Beachbody On Demand
TV App Redesign
Beachbody was on the brink of going public and adding a lot more content. The ask was to redesign these apps from scratch and bring them all to parity.
My roles: Competitive Analysis, wireframes, user flows, design for business goals, created design system / design library, requested early testing with users, worked closely with product and each engineering team (Roku, tvOS, firetv).
Jump to... 01 Discovery • 02 Styles • 03 Designs
01 Discovery & exploration
There’s usually a bit of a journey to take before getting to the high definition visual design work. That journey includes competitive research, user flows, user testing, prototyping etc.
Problems
- Previously, each TV App for Beachbody On Demand was designed & built native to each platform & therefore, vastly inconsistent with one another.
- In a short period of time, Beachbody would be introducing a Live, daily schedule of classes that needs to co-exist on TV along with the VOD based training programs.
- TV Apps were missing valuable features like “Search” & “Class Favoriting.”
Solutions
- Design a TV app foundation & experience that can align with each platform’s common user behaviors.
- Architect each section of the app to meaningfully balance the existence of Live content functionality with pre-recorded programs and classes.
- Lay out a menu system that allows for scalability of content sections.
Previous versions of the app
Each of the Beachbody On Demand TV apps were originally built and designed "out of the box" & native to their platform. It was time to design a custom and consistent layout that was shared between all TV devices.
Mapping it out
Not only was I organizing content for what currently existed, but I was also working out where all of this new, Live content would live, even before we knew what all that new content would be!
The previous content could be broken down two BOD Fitness & Nutrition. In less than 8 months, we would then be working in the BODi (Live) content.
Competitive research
It was obviously important to have an understanding of what other fitness apps were doing on their tv apps, but I made sure to take a fresh audit of many video streaming apps that our customers would be familiar with as well.
User flows
It's always helpful to plan things out from a top-down view at first. This exercise was especially helpful with some of our more complex features like In App Purchase & Search.
Selling a darker look on TV
My initial instinct when starting this project, was to design a darker version for our TV apps specifically. TV’s are large and project a lot of light, which is why you’ll see that many TV apps out there stick to dark colors for their backgrounds.
Some quick research
We felt it was important to point out to our internal stakeholders that some other big brands in the video streaming space are already doing what we were proposing. AppleTV+, YoutubeTV, & Hulu have predominantly lighter desktop, yet darker looks on TV.
We asked some of our users
From the start of Beachbody On Demand, our users have become accustomed to a very light and bright version of our apps on all platforms. Before making such a drastic change, we asked a small sample size of users what they thought.
“Coaches liked the OTT designs and considered them “sleek”. When asked for a preference, most preferred the dark design..."
Our testing coordinator
02 Style Library
Due to the viewing distance of the TV, designing styles for various Television sizes requires larger minimum text sizes & components for visibility.
03 Final Screens
Each section of the app were treated like their own projects and feature - putting them through a full, yet quick, design process.
Jump back in
Every day, the most common intent of our users is to find and play the next workout in their current workout program. We made it easier for user to jump back into their latest program and find the video they need quickly.
Quick & easy log in
We want to give our users the option to login using their TV platform remote or by typing an activation code on their phone or computer.
Search
This was one of the more complex features we designed for the app. Challenges included keeping parity while adjusting the flow for four different native keyboards as well as giving the users many filtering options.
Presearch suggestions
It was our goal to give users as many shortcuts to the users as possible BECAUSE typing out a search query with a tiny tv remote is not fun!
Top results
After initiating a search, we trust our search engine to display & sort the best possible results to the query.
Content grid with heavy filters
Unlike most TV apps, we gave ourselves the challenge of incorporating all of our most popular filters to the results.
Four keyboards, four flows
We did not have the time or budget to build a custom keyboard that would work create parity on all of our tv platforms. Extra research & care was given to understand each platforms native keyboard and create as common of an experience between the devices as possible.
Program detail
From the moment of conception, Beachbody’s bread & butter has always been their workout programs. It’s important to design the program detail to both educate users as well as to make it easy for the user to get in and get out.
Live class schedule
Adding live classes was a game changer for Beachbody. This was a brand new set of content for mobile & web as well and would start to reshape Beachbody moving forward. It was essentially a new brand of content that would need differentiation from the current program-based workouts.
In app purchase
We were very excited to start giving new users the opportunity to sign up on Apple TV, Roku, FireTV, & Google TV. This was another feature that had a good amount of overlap between the tv devices but also required specific solutions for each platform as well as many many different states!
Release & app store
Special care was given to our store images. This was a brand new look that we were proud of and so we wanted to best represent these new designs.
