/BEACHBODY

website redesign art direction

/BUSINESS REQUIREMENTS

Problem:

An abandonment survey, usertesting.com, and qualitative data all show that some users have experienced difficulty navigating through Beachbody.com, noting that pages are cluttered with excessive options, leaving them with a paradox of choice/paralysis.

Solution:

Conversion would be improved with a cleaner interface and user-friendly navigation. This would expedite the user experience and help to eliminate confusion. Then, incorporating elements of the Beachbody brand would increase trust + affinity, and thereby increase conversion (and repeat purchases).

Opportunity:

We have the opportunity to make product discovery and the purchasing process fast, simple, and intuitive, while still telling the Beachbody story and further establishing the brand.

Goals:

  • Improve performance on Beachbody.com
  • Increase Conversion (Current: desktop 6.1%, mobile 3.4%, tablet 6.2%)
  • Increase Lifetime Contribution Margin per visitor
  • Improve Beachbody branding / experience / perception
  • Increase ratings in attributes such as: ‘brand I trust’, ‘innovative’, ‘thought leader in health and fitness’ (increase from benchmark study)

ROLE:

Art Direction, Design, UX, Research, Content Strategy

COMPANY:

Beachbody

YEAR:

2015/2016

CATEGORY:

Ecommerce Website

/RESEARCH

best in class:

  • Contributed to a Pinterest board where the team and myself posted sites we found compelling and inspiring.
  • Became familiar with Beachbody competitors and other e-commerce / lifestyle brands such as Nike, New Balance, Patagonia etc. This allowed me to find a clear direction toward these big brands’ practices and how they deliver overall user fulfillment.

data research:

The data and branding research I did was very detailed and included some of these key points:

  • Abandonment Survey provides over a thousand user opinions and suggestion
  • Analytics Overview provides key statistical information about Beachbody.com
  • Key Site Metrics and the conversion in desktop, mobile and table along with all the Channel Activity
  • Reviewing all the numbers from the Usage by Feature Heat Map
  • Internal Search Keyword
  • Page Summary Report and Entry Points
  • Bounce Rate Report
  • Studying the Branding Architecture in detail
  • Creating a detailed research about Best Practice in E-commerce

navigation and content research:

To purposefully study the navigational tools of heavy-content websites such as Amazon, Apple, and Nike, then to determine different strategies on how to visually present all of the content in a user-friendly manner.

/CONTENT STRATEGY

With the goal of organizing the current site’s content to achieve a greater user-friendly interface, but not disrupt familiarity for returning users, I successfully balanced the necessary modifications. While maintaining some existing elements, I also introduced and implemented the tab system, allowing users to reach the main Beachbody domains at a glance. Additionally, I added a filtering system that would allow new visitors to access a workout program best suited to their individual needs.

/USER EXPERIENCE

I worked with the UX designer to create wireframes, which explore the home page concepts and create an enjoyable and engaging user experience to drive sales conversion on Beachbody.com. Designs take cross-platform needs into account so that mobile visitors can have an enjoyable experience. Concepts will be considered with platform enhancements and other roadmap priorities.

/DESIGN AND NAVIGATION EXPERIMENTS

After all of the research I decided to perform a few visual tests to see which one would be the best navigational solution. In doing so I created three different layouts to set the tone for the team.

/design picks for user testing

My Creative Director and team helped me determine the best approach for user testing. We agreed to develop three different designs: e-commerce, branding, and a hybrid. I then set the tone for my team and delegated tasks. I oversaw four designers as they created their best straightforward designs for e-commerce and branding. Meanwhile, my fellow Art Director proceeded to design the hybrid version.

/user testing

We performed two types of user testing - live testing and online testing. After three days of in-person user testing we collected our data and applied them for the online testing. Once the online testing was complete we filtered through 40 hours of total user testing and extracted the essential data for each design.

FEW OF THE FINDINGS:

  • Participants valued the hover details but some scoffed at the “Buy Now” button on the homepage without even a price listed (e-commerce design)
  • Most participants wanted to see a short video about the program after making a click decision (e-commerce design)
  • Comparison photo was believable but participants wanted to know other details like what supplements they took, etc. (branding design)
  • The thumbnail images of the programs didn’t provide enough detail to find a suitable program for their goals and level (branding design)
  • Participants wanted more detail about programs before making click decision (hybrid design)
  • P90X image intimidated some and didn’t communicate home workout program to those unfamiliar with it (hybrid design)

/prototyping and a/b testing

After evaluating the user testing data we concluded that the hybrid design, along with some modifications, would be the best option to prototype and continue for A/B testing.

This project is currently in the prototype phase.