Research

HomeBody provided me with user research that they had done prior to bringing me on board. The research contained interviews with a number of participants who were asked to “tell me about your experience working out or exercising from home”.

I read through these interviews, took notes on the most important points that were discussed, and assembled then grouped similar ideas together using an affinity map. 

I was able to determine what was most important to the majority of users:

• Users need a way to stay motivated to workout at home
  

• Users need to be able to use limited equipment and limited space
  

After reviewing the goals of both user and stakeholder, it became clear that we needed to address the following question:

Competitive Research - Lightning Demos

To get started, I needed to get some inspiration. I took a look at some other products to get some ideas of how they laid out their onboarding processes.

DuoLingo

The first one I looked at was the DuoLingo site, since the client had specifically requested to make their onboarding process similar to DuoLingo’s.

Duolingo’s onboarding process uses the first person tense a lot, “I want to…” to get the user to feel ownership of their experience, and to make it personalized. They ask the user why they are signing up, and have them select a goal. Having the user select a goal helps with retaining the user through the process, and also makes the user want to stay motivated to workout. Then, they have the user choose a path - “beginner” or “I already know some [Language]”. If they already have experience, they get to take a short placement test. 

If they select “Beginner”, it starts them out with a small exercise to complete. This really helps to get a feel for how the app works. Throughout this exercise, they are rewarded with positive feedback in the form of bright color, encouraging phrases, and loud “dings” when the do something correctly. 

After completion of the exercise, they reinforce motivation by telling the user how close they are to the daily goal that they had chosen a few steps prior. 

Most notably, only now, after completing an exercise and setting goals, do they ask the user to create an account. The user can even select “later”, and get right to the dashboard to explore the app more. Then, once they try and start an exercise, it prompts them again to create an account.

The process to create an account is fairly painless, and just requires inputting your email address. Then you can jump right into doing some exercises.

Peloton

I also took a look at Peloton’s mobile app, since this seems to be one of the most popular fitness apps right now.

The Peloton app’s home screen lists out their main features on 3-page screen that you can swipe through. Then, when you click on “get started”, it jumps right into creating an account. It asks you to create an account using your email address - using a social media account does not seem to be an option. Then, you have to go through and create your profile (name, location, connect to Apple Health, allow it to connect to Apple Health in Settings. I actually discovered later that this had auto filled my profile with lots of info like my height, weight, birthday, gender, etc). Then it brings you back to a screen where it asks if you want to start a free trial. If you select continue, it has a popup asking if the app can send notifications.

After all that, you’re finally in - and ready to explore. There is not a lot of guidance, and it seems that you mostly need to browse around to select different workouts you might need to try. I can see how this would be overwhelming for our target users. However, once you select a workout category they have pretty good filters for narrowing down your fitness level, and they have nice programs that take place over a set number of weeks that a user would be able to just follow along with once they select one.

Overall, I was surprised that the Peloton app didn’t give you some content prior to having you create an account. I think that this probably works for them because they’re already so well-known, and don’t need to worry about people dropping out of the onboarding process as much as a lesser-known app might.

Ideation

Brainstorming

I know there are all kinds of fancy ways to brainstorm, like using Mind-Mapping software, drawing out storyboards, and more - but I prefer to start with good old-fashioned lists and outlines typed out in a word document! I jotted down my first ideas for the flow of this app, and created a visual map showing my plan for the user flow.

Wireframes

I began to sketch out some basic wireframes, which were quite simple as the majority of the onboarding process would be screens with questions for the user.

So, after sketching a few, I jumped right into creating the wireframes in Figma.

Visual Design

Style Guide

Once I had the basic layout, I created a logo and chose colors and fonts. I did some quick research about what types of colors are best for fitness, and decided to go with red as the main color. Red is energizing and can portray strength. Red can be overpowering if used too much, so I used it sparingly on a white background, and complemented it with orange. Orange represents motivation, positive attitude, and enthusiasm. I used a softer orange for the active buttons in order to keep the bright colors from becoming too overwhelming.

Components

I have also been interested in trying the new “Soft UI / Neumorphism” trend, and I thought that a modern looking fitness app would be a great place to try it out. I applied this look to the component system:

Hi-Fidelity Mockups

Here are the hi-fidelity screens for the onboarding process:

Highlights & Design Decisions

Like the DuoLingo app, I decided to put the “Sign Up” form after the user goes through some steps to create a goal, and choose a schedule for their workouts. This way, the user has invested some time and sees the value in what they will be getting prior to spending time signing up. Peloton’s app has the user sign up right away, and keeps telling you that you’re almost done, yet keeps asking you to enter more information. 

I made sure to include a progress bar so that the user will know for sure once they are almost done. I also gave the user the option to skip the signup and do it later. This would allow them to enter the app, and browse through all of the workouts and see what other features the app would have available for them. Then, once they go to click on a workout or start the program that was designed for them, they’ll once again be prompted to fill out their profile. This allows the user to experience more of the app and see its value before committing.

Next Steps

The next steps in this process would include testing the onboarding process with real potential users to answer outstanding questions and discover what works and what doesn’t. 

Would users go all the way through and create an account, or would they find this to be too many questions and drop out? Are the questions specific enough to tailor a unique program to the user? Does the user find having a custom program set up for them useful, or would they rather jump straight into browsing and selecting their own workout?

I would also like to build out a goal timeline where the user could see their progress toward their goal in their dashboard, and provide motivation by making the app integrate with social media, so the user can “compete” against their friends, and earn badges for completing goals.