/BEACHBODY LIVE UK

workout class finder

/BUSINESS REQUIREMENTS

Problem:

Lacking a website that aggregates all other websites for the different Beachbody Certified programs.

Solution:

  • Create a more in-depth user experience for different scenarios when signed-in or signed-out, and where all the separate fitness programs get their own interstitial pages.
  • Make it easy to find which trainers are teaching at which location for a given class per the desired fitness program.

Opportunity:

To generate more users who want to be part of the BeachbodyLive community by either attending the different classes or by becoming certified trainers themselves.

Goals:

  • Create flawless UX so the user can easily find classes, trainers, and fitness programs they are interested in
  • Customize a photo shoot to help create the best visual assets for the website
  • Increase Lifetime Contribution Margin per visitor
  • Improve BeachbodyLive branding / experience / perception

ROLE:

Art Direction, Design

COMPANY:

Beachbody

YEAR:

2014/2015

CATEGORY:

Fitness Website

/RESEARCH

Priority list:

  • Carefully study the priority list and all the requirements from the development team and have detailed conversations with the product managers and the business leads to make sure we meet our deadline.
  • Confirm that all required components for the templates make sense per the UX design.

user flow:

  • Study the sign-up flow for two scenarios - when you are a customer or a coach.

style guide:

  • Carefully reviewed the Style Guides to create the necessary Libraries in Photoshop based on all of the set colors and shapes used.

/SITE MAP

/USER EXPERIENCE

I worked with the UX designer to create wireframes to explore the complete picture of the user’s sign-up protocol from both the customer’s and coach’s perspective. We created wires for both logged-in and logged-out scenarios. We also looked closely at the checkout process along with Account Management site flow overview, coach referral during initial customer sign-up, and outlined further maintenance page details, including Home Direct options.

/DESIGNING THE TEMPLATES

After carefully reviewing the three large stacks of wireframes (86 pages of Account Management, 151 pages of combined mobile and desktop Beachbody Live, and 46 pages of the Checkout Process), I was ready to start creating the templates to match the UK design to the US design.

/MOBILE LAYOUT

I worked with a fellow designer to help expedite the process of creating all templates and to be able to meet the deadline. I created a guide for the mobile home page and once I was ready with a desktop version of a category, I passed it along to my colleague to mimic it for the mobile layout. With strong teamwork, collaboration, and great communication, we were able to complete all pages on time.

/monthly email design

To match the new look and feel of the new site, I created a new email design to follow the same fonts, font sizes, and design elements. I included all new Beachbody Live art and directed an apparel photo shoot with all new apparel that needed to be featured. We created these emails once-a-month to feature all new promotions and announcements.

/Ready for development

After all of the templates were created, I did a very detailed delivery sheet that included all of the CSS and layer comps notes to help expedite the development process.