The BodyBoss Redesign
UX/UI for a mobile responsive fitness e-commerce website
Project Summary
What is BodyBoss
BodyBoss is a 12-week step-by-step fitness and nutrition programme that fits seamlessly into busy lifestyles. The fitness programme, The Ultimate Body Fitness Guide, comprises of HIIT workouts of 4 different exercise types that can be done with just bodyweight resistance. The nutrition programme, The Superfood Nutrition Guide, is a structured eating plan that removes food of low nutritional value from one's diet.
​
Situation:
While the BodyBoss website is visually pleasing, design decisions were not based on user research. As such, there were gaps in the user experience where ease of use, navigation and clarity of information on the website could be improved.
The brief to us was to understand the prospective BodyBoss customer, and to share insights on their customer journey and feedback from usability tests.
​
Opportunity:
The client and my team recognised the importance of going back to the users and addressing their goals and pain points in our UX decisions. We conducted usability testing and heuristic evaluation for the BodyBoss website on both desktop and mobile. We also did a thorough competitor analysis to benchmark our UX against theirs. We then conducted interviews with 19 women from BodyBoss' key target markets of US, UK, Canada and Australia, aged 25 - 45, who wanted to get fitter or lose weight. Synthesising the insights, we identified design solutions and demonstrated them through an interactive prototype with responsive design.
​
Outcome:
The clients were satisfied with the results and commended us for delivering above expectations.
Client:
SuperNova
Product:
BodyBoss, with a focus on The Ultimate Body Fitness Guide
Website
Timeline:
25 March - 4 April 19 (2.5 weeks)
Role:
Project Manager, UX Designer, UX Researcher
Tools:
Sketch, InVision, Optimal Workshop, Google Analytics
We are impressed by the research and analysis conducted by the BodyBoss General Assembly team and how they had translated the insights into effective design recommendations. There are some solid suggestions from the team, which we plan to include in our site.
​
Amrita Kriplani, Product Director, Supernova
Project Details
1. DISCOVERY
RESEARCH OBJECTIVES
1. Assess the usability of the site through our users
2. Understand our users' priorities in life, their goals, challenges, attitudes, behaviour and preferences towards fitness
3. Assess the site against our competitors.
Understanding our users more deeply would give us insight on how to tailor the site to address their priority needs and wants.
Assessing and defining the problem from multiple fronts - the user, the market, experts - would keep our UX strategy focused on addressing the issues that would result in the most user and business value.
​
Target audience
Primary: Women, ages 25 – 45, mothers, from US, UK, Canada and Australia
Secondary: Women, ages 25 – 45, non-mothers, from US, UK, Canada and Australia
Tertiary: Women, ages 46 - 58, from US, UK, Canada and Australia
Psychographic: Women who wanted to get fitter or lose weight
​
​
HEURISTIC EVALUATION​
​
Using Jakob Nielsen's 10 usability heuristics, I assessed the BodyBoss website on desktop and mobile to ascertain flexibility and efficiency of use, aesthetic and minimalist design, recognition rather than recall, visibility of system status, match between system and real world, use control and freedom, consistency and standards, help documentation, and error prevention.
​
I prioritised issues to be fixed, by focusing first on the issues with a severity rating of 3 out of 4. A rating of 3 indicates a major usability problem that is important to be fixed and hence should be given high priority.
Issues with a severity rating of 3:
Major issues to be fixed
-
Mismatch between the guide preview image and the guide editions they are for on the product pages
​
-
Expert endorsements' link is hidden in the footer
Major issues to be fixed
-
Scroll-length is too long on most pages with no back-to-top button or quick links to sections of the page
​
-
Hamburger menu is not fixed and disappears upon scrolling
​
-
Content on Method and Why sections can be made easier to digest
USABILITY TESTING​
The aim for usability testing was to uncover issues on the website from the users' point of view to supplement our heuristic evaluation.
METHODOLOGY​
10 target users. 50% desktop, 50% mobile.
​5 tasks assessing direct success in navigating to key information​
Legend: S = Direct Success on the first try, SD = Success with Difficulty, F = Fail
RESULTS FOR DESKTOP USERS
Task 1 had the lowest success rate, with only 2 users achieving direct success.
System Usability Scale (SUS) Score: 67
RESULTS FOR MOBILE USERS
Task 2 had the lowest success rate, with only 2 users achieving direct success.
System Usability Scale (SUS) Score: 76.3
Mobile fared better than desktop, exceeding the average SUS score of 68.
Users found the web pages too long with a lot of scrolling on mobile.
While information on the BodyBoss method and why BodyBoss is available, content is not easy to digest.
Users wanted to know what BodyBoss was and this information wasn't immediately clear to them after spending some time on the site
USER INTERVIEWS
METHODOLOGY​
19 Respondents
PRIMARY TARGET AUDIENCE
MUMS AGE 25-45
WHAT ARE THEIR PRIORITIES?
1. Taking care of their children​
​
2. Time for themselves
WHY DO THEY WORK OUT?
1. The chosen activity or sport interests them
2. They want to be healthy
​
3. They want to strengthen their body after childbirth and/or
in preparation for their next child
​
4. Lose weight and look good
​
5. Invited by friends to an activity
WHAT ARE THEIR CHALLENGES?
1. Managing time, because she has little time left between taking care of her children and juggling work commitments (for those who work)
WHAT ARE THEIR ATTITUDES TOWARDS
WORKING OUT
1. They like having guidance, either in the form of a personal or virtual trainer, because they want to get the workouts right
​
2. They like variety, so that it doesn't get boring
​
3. They exercise alone, because it is more efficient to do so than to coordinate between schedules
​
*Respondents ages 46+ were excluded from the analysis as we discovered that due to physical constraints, they were not the target audience for the Ultimate Body Fitness Guide.
Differences found in the Secondary Target Audience (Women without children, age 25 - 45)
​
1. What is important to them?
-
Convenience, because their exercise habits are formed around what's easy for them to do
-
Getting value-for-money, because of the free options that are available online
​
2. Why do they work out?
-
It is an activity they enjoy with friends, which helps them to lose weight and keep fit
​
3. What are their current challenges?
-
Motivation to work-out, because exercises like high intensity interval training (HIIT) can be intense
​
4. What are their attitudes towards working out?
-
They are conscious about being judged when they work out in the gym
2. DEFINE
With the insights from our target audience, we identified a primary and secondary persona for the potential BodyBoss user.
PRIMARY PERSONA​
.jpeg)
PATRICIA'S CURRENT EXPERIENCE
SECONDARY PERSONA
.jpeg)
Patricia and Jessica are both prime candidates for The Ultimate Body Fitness Guide since they both want to stay healthy and lose weight. However, I surfaced key problems that prevent them from being convinced to adopt BodyBoss.
THE PROBLEMS
​
​
Problem statement #1: Patricia needs an exercise programme that suits her schedule and fitness level because taking care of her child takes up her time and energy.
​
Problem statement #2: Jessica needs the motivation to increase the intensity level of her exercise because exercising is currently done at her convenience.
​
From these problem statements, stemmed the question that we needed to address in our design:
How might we deliver an exceptional user experience on the website that saves time and energy, and also inspires women to choose BodyBoss?
THE STRATEGY
3 key pillars to centre our design solutions and address the problems faced by our personas.​
THE SOLUTIONS​
1. Present a compelling "why BodyBoss"
​
Home page
Real Results page
-
Instead of featuring just promotions on the carousel as the site is currently doing, the first homepage banner features "about BodyBoss" information to give users a better understanding of the merits of the programme.
​
-
The local navigation bar is the solution for the long scroll-length raised in the usability test and heuristic evaluation. On home page, the user can easily access "why BodyBoss", "Results" and "Reviews" information. These are key information that would persuade users and present users with a compelling "why BodyBoss", as well as answer questions that users may have early on in the purchase journey on the credibility of the programme.
-
Purchased feature lets the site's admin indicate which product contributed to the results achieved, and it would appear on the bottom right of the review. This feature provides more context to the review, and raises the credibility of the fitness/nutrition guides. Upon clicking the icon, users are directed to the product page for more information, or an easy add-to-cart.
Product page
-
Adding filters in the Customer Reviews of each product page would make the experience tailored to the user. Currently the Customer Reviews sections do not have any filters and are listed in reverse chronological order. The addition of filters that allow users to filter reviews by age, most helpful comments, and the no. of stars, will make the reviews more believable and relevant to the user as they are given more control on the information they would like to consider.
2. Address the user's time and energy constraints
In the usability tests and heuristic evaluation, long scroll length, especially on mobile, was a recurring issue raised by our participants. The two key solutions to address that is the local navigation bar, and a back to top button on all pages, both of which we implemented in the prototype.
As Patricia, our primary persona, faces the problem of the lack of time and energy to work out, I prioritised features that would make things easy for Patricia to access and absorb important information on the site. The screens below demonstrate the other features we chose to implement.
Home page
Product page
-
The second banner on the home page carousel draws attention to The Ultimate Body Fitness Guide's selling point of 24 min, 3 times a week, no equipment needed commitment to tailor to the time and energy-pressed woman.
​
-
Try it for 2 weeks call-to-action leads to the free trial of the programme.
​
-
It is recommended that in order to keep the content fresh, this banner space be refreshed regularly, but position 2 of the carousel should be reserved for content that highlight BodyBoss' unique selling points. This would inform our primary persona at the onset on how BodyBoss' fitness guide caters to their lack of time and energy.
-
Product preview images are now in sync with the available editions. E.g. the online guide shows an image of the guide on an ipad, plus free workout videos. Previously, these were not in sync with the guide editions.
​
-
The local navigation also allows for users to easily compare between print vs. online editions.
3. Show that the BodyBoss method can be fun
​
In order to motivate Jessica, our secondary persona, to try out HIIT workouts, our strategy was to incorporate fun into the BodyBoss method. Inherently, the product allows women to workout anywhere they want - on the track, at the beach, in their own backyard - and this flexibility of not needing any equipment to do the workouts, as well as being able to do it anywhere, leaves room for the user to make things fun for themselves. Hence, we wanted to inject fun into the brand, as well as on the website as well.
-
Quiz section contains short "this or that" type questions on fitness. This serves to engage the user, and injects fun into the brand.
​
-
Blog was a suggestion that came from the client, and I would recommend this as well, although additional manpower resources are required to maintain it. My recommendation is to include tips on fitness, lifestyle, and nutrition as a way to position BodyBoss as a thought leader. As BodyBoss has ambassadors, some of whom are fitness experts, they could also be contributors to the blog. The editorial team could also open it up to readers to contribute, and the team could curate and select articles that are fit for publishing.
For an interactive experience, please view the prototype below.
OUTCOMES​
​
The clients were satisfied with our recommendations and they have plans to implement our suggestions in the
next iteration of the website.
​
"We are impressed by the research and analysis conducted by the BodyBoss General Assembly team and how they had translated the insights into effective design recommendations. There are some solid suggestions from the team, which we plan to include in our site.
​
Amrita Kriplani, Product Director, Supernova
​