HomeBody is a fitness app with videos and resources for home workouts and training programs.

Overview

Recently, HomeBody has seen a surge of new users who are leaving the gym to exercise from home more.
 
 
HomeBody wants to set these users up for success by recommending them the best possible workouts.

Problem

Currently, HomeBody does not have an onboarding process for new users.
How might we create an onboarding process that helps new users find the perfect at-home workout program?
Roles
User Research
UI/UX Design
Visual Design
Deliverables
User Research
Competitive Research
Wireframes
High Fidelity Mock-Ups
Prototype & Testing
Tools
Sketch
InVision Studio
Principle

My Plan...

User Research

11 interviews
Individuals that workout at home
Men & Women

1/9
After completing the additional interviews, I summarized the findings in order to capture the main insights.
The research can be summarized into three points
1.
Limited space and equipment make working out at home difficult 
2.
Users don't know how to create a home workout plan on their own.
3.
Users want to stay motivated.

Competitive Research

I studied competitors Duolingo, HomeWorkout, GetFit, and 30 Day Fitness to get familiar with workout apps and onboarding process. The insights are:
 
● Help users engage with and understand the product is important in onboarding process.
● Onboarding process needs to be short and have a low learning curve.
● To better tailor workouts for users, asking users preferences, goals, etc is helpful.
As a means to make sure the user's needs were taken into account in the design stage, I correlated insights directly to design features.
Users want workouts to their level
After filling out the onboarding the user will have a tailored plan to their level.
Users need to know what equipment they need
Onboarding asks about equipment and will filter the workouts.
Users want to be motivated
Profile will track their progress and promote different types of workouts.

How research impacted the design.

Persona
Before continuing the design process, I created a character that was a compilation of all the user interviews. This helps me keep the user at the forefront of my decisions.
Jane
"I want a workout app that can be tailored to me."
Goals
Complete home workouts that are targeted.
Frustrations
Other apps assume she has more equipment and space than she really does.
Less motivation working out from home
Needs
To know the intensity level of workout
A variety of workout options to keep motivation and interest high.
Brainstorm
Using sticky notes for a design sprint to quickly figure out what makes the most sense for this onboarding process.
Sketches
I sketched and explored a few different layout options for each page to see decide how to display all of the necessary information I wanted to include.
Wireframes
Creating wireframes of the different ideas I had sketched out to help figure out the functionality of the app but also catch any problems early whether its visual hierarchy or function.
Final Screen Mockups
Dark Mode
Interaction Map
Mapping out each interaction of how the app will function helped me pick up on any errors or missing details. This helped me ensure that the process would be seamless and organized for the prototype.
The Prototype
After mocking up the final screens, I used a combination of Sketch, InVision and Adobe AfterEffects to create a prototype.
Next steps?
If I were to continue this project further, some immediate next steps I would take are:
 
1. Test the onboarding process I had designed with real users.
 
2. Iterate and improve designs and functionality based on insights from testing.
 
3. Intergrate the onboarding process with the rest of the app so that the function and aesthetic of the entire app is seamless.