Kim Harris
UX designer

Creating an Onboarding flow for new HomeBody users

HomeBody is a fitness app with videos and resources for home workouts and training programs. Recently, HomeBody has seen a surge of new users who are leaving the gym to exercise from home more. They want to set these users up for success by recommending them the best possible workouts. 

This design will focus on the on-boarding process for new users of HomeBody. 

UX Constraints

This project came with the following constraints. I will be addressing them in multiple design solutions.

  • On-boarding Process only

  • Solution must be for a native mobile app

  • Create free account with email and password

  • Make it like Duolingo

UX Goals

  • Create an on-boarding process that is short, easy, and focused

  • Avoid information overload – give the user just the right amount of information to make them want to use HomeBody to reach their fitness goals

My Role:

As Designer for my project, I was involved in the entire process, including the overall strategy, user research, website hierarchy and visual designs. 

User Research
Homebody - UX

Affinity Mapping

To begin I started by understanding my target audience and their pain points. This came in the form of user interviews. Using affinity mapping I was able to identify the following common issues users were facing:

  • Motivation

  • Consistency

  • Space

  • Difficulty Levels

  • Workout Techniques

"Im not sure if I'm doing it right"
"Finding the right level of difficulty takes a lot of trial and error"
"I need a way to stay motivated"
"I give up if I feel like I don't have a clear path to my goals"
How might we create an onboarding process that helps new users find the perfect at-home workout program?
Competitive Analysis

What's happening in the field?

In order to get a better understanding of how competitors handle their onboarding I downloaded some direct and indirect competitor apps. (see figure below)

I quickly realized that direct competitors like Aaptiv and Daily Burn were not allowing users to have access to the content without signing up first - the first screen when you launch the app is the log in screen. Users have no idea what they are signing up for or if the product will live up to the promises.

Another point that stood out to me was that only half of the apps I audited had a questionnaire before sign up. An assumption is that users feel like they have invested time and information and want to move forward with signing up to get their results.

Key Points to bring into design solutions:

1. Ask questions up front - I want users to feel like they have control from the moment they open the app by asking specific questions to help them make the most of their time.

2. Provide free content - Outside of Youtube, there was no other direct competitor that offers free content

3.  Keep it short - Most competitors have a very short onboarding process

4. Address the market gap of providing free content without commitment

Homebody - UX
Design Solutions
Homebody - UX

Solution #1 - Carousel

Using the carousel design opportunity to use the benefit oriented approach remind the user why they downloaded the app to begin with. 

These three screens will only appear for first time users, and can be skipped at any point to allow the user to feel like they have control early on on the experience. 

Homebody - UX

Design Solution #2 - Onboarding Quiz

To ensure HomeBody is able to provide the best solution, there are certain data points that need to be collected up front. I wanted to use this opportunity to introduce the overall experience to the user, but keeping the questionnaire short and easy. There is always an option to skip the questionnaire.

Each question addresses key pain points identified in the user research. Users can always change their preferences later in the user profile settings.

Homebody - UX

Design Solution #3 - Log in Prompt

To address the constraints of creating an account, I designed the log in/sign up screens that are required before the user is able to access the content. 

To give incentive I included a free trial pop over which allows access to the app for 14 days without commitment and without providing credit card information. We want users to know we are willing to take the risk for them to experience how much HomeBody can change their fitness life without asking for money upfront.

User Flow
The flow above shows the path the user would take after downloading Homebody.

The flow above shows the path the user would take after downloading Homebody.

Homebody - UX

Style Guide

I followed a gradient style to give the users a fun upbeat feel. Fitness and physical health is a big commitment, I don't want HomeBody to feel that way, when interacting with the app the overall experience will be energetic and up lifting. 

Homebody Prototype

Test out my design solutions for yourself! Below is a direct link to the prototype on InVision. Here are your user goals:

You are stuck at home for the foreseeable future, but you want to maintain your fitness goals. You downloaded HomeBody from your app store, it has installed and you are going to get started. 

1. Complete the questionnaire on-boarding process

2. View your program

*this is best experienced on the desktop

Next Steps

1. Validate designs through usability testing

2. Build out application programs