Beachbody On Demand
TV App Redesign
Every Beachbody On Demand TV app looked completely different. 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.
Jump to... Style Library Final Designs Process
Style Library For TV
Due to the viewing distance of the TV, designing text styles for various Television sizes requires larger minimum text sizes. Typically I use 24px as a minimum with very few exceptions.
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.
Discovery & exploration (Work in progress)
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, etc.
Wireframes
Time was very tight on this project. The goal was to create content layouts that were relatively familiar to our demographic. We were not trying to reinvent the wheel, but instead be smart, clean, & be an upgrade from the current experience.
Email • Instagram • Vimeo • Linked in • View Resume