Designing the fitness journey at 8ift

2016-2017 @8fit
Visit the site

Background Image
  

Challenge

Overhaul the workout experience

8fit is a fitness app that offers efficient workouts, customized meal plans to over 30 million users who desire to achieve a better healthy lifestyle. First launched in 2014, the workout as the core experience 8fit offered at that time has not been improved much since the beginning.

Design debt accumulated throughout various releases and after add on features, which led to decreased customer satisfaction and overwhelming support workload. In 2017, the team decided to spend several months to overhaul the workout experience.

The team

Me as the sole designer
1 Content Creator / Coach / Copywriter
1 Product manager
3 Engineers

My role

Product strategy
UX
Visual design
Interaction design
Prototyping
User research
Build design system

Kick off with content audit

To get started, I scheduled 1:1 interviews with the product owner to get a sense of where the key user frictions were within the current app. I also used online reviews and support tickets to gather direct user feedback.

To get more concrete, I put together a mobile map of the iOS and Android apps in Sketch. All in all, I ended up with about over 100 screenshots that had to be pieced together. The goal was to better understand the product and have a common base to start the conversation with other stakeholders. Since we were rebuilding both apps to React Native, it was also helpful to take inventory of all our UI components and see where we had inconsistencies and identify potential areas to improve.

Problems to goals

There are many problems being identified, plus some suggestions from our CEO and trainers. After several prioritization workshop, we landed on three major areas to start with:

1. Redesign program store to increase content discovery

The previous program store was designed to follow through one main program and the design wasn’t able to accommodate the new content we added on along the years. As a result, users had been complaining that they can’t find new workouts to try.

2. Optimizing interactive workout flow

Data shows that our workout completion rate has been on a downhill trend and lingering around 11%. Every day our support team receives tickets about issues of the interactive workout flow. The flow was unnecessarily long and many screens could be improved usability wise.

3. Update visual language and set up component library

A related goal was to unify the visual language and set up a base component library to help us design and build faster.

Goal-1: Redesign program store to increase content discovery

Problem

Previously the program store was designed to nudge users to follow through one recommended program to achieve fitness results. Along the years, users needs had shifted to trying out various specific body part programs. In response, the content team added fresh new content, but it was put into the full plan section, which was not easy to access.

There are two ways for users to check out the “full plan”; one was during onboarding. Another was later to change the main program via the setting icon. Data showed that we failed at both touchpoints. As a consequence, new content kept being added with very little exposure.

First attempt

My first intuition was to break away from tab navigation to enable users explore all content at once. It worked out fine for pro users, but for free users, full plan meant a list of locked programs, which was equally disappointing. That’s when I realized that to increase content discoverability was not only about improving the navigation, but also the way we upsell out content.

I reached out to our content and growth team, and together we came up with the freemium approach, which enables all users to explore all workout programs at once and only upsell after several levels. To avoid information overload, the main program was anchored on top and followed by all programs.

Background Image

Follow ups

The new design had shown effectiveness in encouraging users to try out more new programs, but the initial test showed a decrease in program completion, which meant users were derailed by new content and failed to follow through their current ones. Based on learnings from our coach and product, it was counter effective for achieving real fitness results and would ultimately lead to low retention in the long run.

I immediately followed up with an exploration of how to motivate users to follow through their main program while still being able to explore many other ones. I explored many variations of how to display the program on the top section to enable users to one click to start their daily workout.

Background Image

AB testing

We AB tested two variants; the list view and the carousel view. The list view that showed all sessions within the program; the carousel view focused only on the next workout to perform. After 30 days of testing, the list view has performed better. It increased the numbers of users coming back to continue the program, which was a healthy indication of the long run program completion rate.

Background Image

Goal-2: Optimizing interactive workout flow

The workout flow had a lot of the right pieces but they may not have been designed in the most intuitive way. The plan was to make some usability improvement, and then test them with real consumers in real time — and learn and build on this feedback. Together with our coach and customer support and product, we identified three main challenges to tackle in the first phase.

How might we make the session detail screen more informative?

I learnt from analytics that Users who have coach contact have higher engagement. Therefore I introduced the meet you coach section top of each session, and delivered messages from their perspective to make it feel more human. I also redesign the workout preview to make it more informative with how to and tips from the coach.

I worked on the motion to make the entire experience more smooth. By realizing that it’s important to see the video while reading tips, I design the anchored video view to increase usability of the workout preview screen.

How might we assist users follow through the workout with less stress?

By observing 5 users performing a live workout with the product, I noticed that users were often stressed out in between workouts because the next one starts without any live preview. They often have to stop to catch up.

The design solution here incorporated the preview together with countdown to give more context and help users better prepare for what’s coming next.

How might we encourage users to complete logging after doing a workout?

The most obvious problem was that the post workflow was unnecessarily long. On average users have to go through 9 clicks to reach the end. Data showed that over 50% of users do not complete the post workout flow, and very few reach the end screen to schedule the next workout, which was very important to help users form a workout habit. It was also an important retention mechanism for us.

To shorten the flow, I first deleted the written feedback forms, because after investigation, I learnt that we didn’t set up any tool to utilize the feedback data we gathered. I then redesign the rest of the feedback with progressive disclosure pattern to make it less overwhelming. The new design focused on what matters to users; celebration, giving feedback, and schedule for the next workout. It shortened the flow from 9 screens to only 3 screens, and effectively increased logging rate by 15%.

Goal-3: Building a component library

I took the inventory activity as a chance to also document numbers of styles and components in the previous App. I quickly noticed that there were many design debts being accumulated over the past 2 years since the app’s first launch. Different teams added features and inconsistency started to creep in. It was clear to me that a design system was very much needed along with the redesign to make sure we design more efficiently and also build faster.

By that time, we already had basic colors and fonts defined by the previous designer, which was a good start. My job was to turn those basic style guides into living component libraries that can be shared among designers and engineers. The component library was not just the first we had in 8fit but also my first time working on Design system. Many to learn and improve but it helped us build the product faster, reduce the code, but most importantly achieve consistent user experience overall.

Background Image Background Image Background Image

Take aways

Looking back, It was exhilarating to see what we have achieved, building something that would provide real value to millions of people in a relatively short time. The process of making was nonetheless filled with ups and downs. However it helped me grow as a designer, and here are some of my highlights:

Get engineers involved at the beginning

I used to hesitate talking to engineers often because unconsciously I knew it often ended up feeling like my dreams were being crushed by reality. However, even a small design decision could have a huge technical impact. I’m sure that many times I could have saved some time by checking early ideas with someone who has a bit more technical knowledge to guide me to the right path. I realized that the fastest way is to just sit with them, design and build together.

It’s crucial to measure impact beforehand

Not because there are users requesting it and by chance it’s feasible to build then it means for sure it’s a great idea. It happened a couple times we were being let down by not seeing any results even though we felt like we delivered exactly what users wanted. It’s always good to remember to double check the user and business impact statistically before making any product decisions.