HomeBody mobile app (iOS)

Overview

The problem

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

There has been a surge of new users who are trading in their gym memberships for working out at home and want to help these users find great exercise programs.

They want to create an onboarding process that helps the first-time users find great home workout programs.

Design constraints

• The solution should be designed as a mobile app.
• Focus on the onboarding process.
• The user needs to create a free account with their email and password to save their settings and progress.

My role

I worked on this project as an independent UX Designer where I:

• Summarised the user research.
• Sketched wireframes of possible solutions.
• Created interactive prototypes.

Approach

• I used first person language and easy to recognise semantic options to guide the user into using the app directly. This gives them more ownership over the experience.
• Learn and understand users’ goals, preferences, level and then suggested a suitable ‘taster’ workout. Tailoring the user’s experience to their situation further improves immersion and avoids serving them workouts they are unable to do, pulling them out of the app.
• I increased users’ engagement by providing a discount-based reward system for the associated store. If they sign up, they get to save and apply their discount. This will encourage users get more reward and keep using the app.

Tools

Wireframe and prototyping: Figma

My process

Video demo of app interactions

Discovery phase

User research

The first step I took was to summarise the user research by Pain Points, Preference, and Behaviour. From that I was able to see a clear pattern and actionable themes:

• Limited space and equipment make workouts at home be difficult to plan.
• Users don’t know how to create a workout plan and would rather be told what to do.
• Users want a way to stay motivated and to come back to the app regularly.

Fig.2 — Quote from user interviews

Competitor analysis

I next turned to study competitors to get familiar with workout apps and their typical onboarding process. I looked at the following apps:

• Duolingo
• Seven
• GetFit
• 30 Day Fitness

By studying these apps I learned that:

• Helping users engage with and understand the product is an important part of the onboarding process.
• Onboarding needs to be short and with a low learning curve.
• To better tailor workouts for users, asking users preferences, goals, etc is helpful.

Defining the problem

Based on the research and the design brief, the app should try to answer these questions:

• How can we make it easy to understand for new users?
• How can we help find the right workout for new users?
• How can we incentivise them to come back and increase engagement?

Ideate phase

Sketches

I started sketching wireframes on paper to help visualise the different steps needed and further develop my solutions.

Fig.3 — Sketching for solutions

Wireframes

Next I turned my sketches into wireframes to refine the user journey and make sure I was answering the problem questions.

Fig.4 — Wireframe artboard

My solution for “How can we make it easy to understand for new users?”
I decided to frame the personalisation options as a statement the user could identify with whilst also being able to tailor it to their goals. By using clear and action-oriented language we can draw them in.

“Today, I want an easy, all body workout, using no equipment.”

“Today, I want an easy, arm and leg workout, using a chair.”

“Today, I want a hard, core workout, using resistance bands.”

By framing it as a simple sentence the user could interact with I let them set the purpose of workout, the equipment available, training focus, and workout level. Addressing a number of user complaints in the process.

People HATE being inconsistent with what they say they will do. Having them set their chosen level of engagement with the interaction early on gets them to commit straight away.

This ended up making it feel more straightforward and less complicated than other apps.

My solution for “How can we help find the right workout for new users?”
Tailoring the user’s experience to their situation could avoid showing them duplicate workouts or workouts they are unable to do, which would break their immersion.

My solutions for “How can we incentivise them to come back and increase engagement?”

Typically this is one of the 3 ‘R’s:

1. Reward
2. Ranking
3. Reminder

I opted for a twist on the reward scheme. By tying a monetary discount with the amount of calories they burned, the idea ‘workout = money off = good’ is introduced. All of a sudden there is a monetary reward associated with working out, leading to a want to come back and increase or sustain that reward.

My solutions for “creating an account”
I put the “Create Profile” page after experiencing the whole workout process because:

• It will lead to a high sign up rate as the users now understand the app and are invested.
• After users earned their ‘reward’, they probably do not want to lose it.

Prototype

After wireframing, I created prototypes in Figma using the iOS design guidelines as a template.

Fig.5 — Prototype artboard

Colour choice
I chose bright colours with a high contrast ratio to add a sense of fun and energy.

I made sure to include a visual change in the main colour onscreen to further reinforce transitions or state changes.

Finally, I ensured that all calls to action had the highest contrast to really grab user attention.

Asking workout purpose and showing options available
I opted for a layer card approach to show the question hierarchy in a visual way.

I used a simple, action-based, textual representation of the user’s intent to pick a type of ongoing engagement early on. This is then continued throughout the app as positive reinforcement to sustain the immersion and fuel a sense of achievement.

Next steps — Testing

Conducting more user interviews would be a great place to continue. We know that the gym to home transition is difficult for them, so I would like more information on what users feel like they’re missing at home.

I would also run a sizeable test of the current version of the prototype with new and previous users to gauge their experiences and expectations and see how the prototype could be developed further.

Conclusion

This was a fun design challenge provided by BiteSizeUX. Here are some things additional things I would think about if this had been a real-world project:

• Thinking more about business needs and any engineering constraints.
• Designing the rest of the app and how that affects the onboarding process.
• Going over any analytics, heatmaps, and user behaviour analysis available.