Fitness One: Creating an Engaging Onboarding Experience for Health & Fitness Apps

In this product design challenge I designed a data driven onboarding Experience for a health and fitness app, fitness one. duration of this project was 24 hours!

I Created a onboarding experience that Gathers essential user information to generate a Personalised health and fitness plan chart. there were more than 20 data entries to be recorded, after the flow, user would get to download their personalised plan created with their data input.

The data entries are as followed

Primary goal of this project was to reduce the drop-off rate of during the data entry process, while making the flow engaging and optimal completion.

Figma prototype link — http://bit.ly/Fitnessoneprototype

After Login Users are greeted with a minimal, easy to understand start screen, with no distractions.

Two pointers on how I improved user experience of the flow —

1. Providing a Completion status so that the user has a idea of how much they have progressed into the flow
2. User has an option to go back and Correct any mistakes they may have made in filling information. positioned at the bottom for accessibility.

Two ways I made the data entry process engaging and user-friendly —

1. Using minimal but understandable Symbol language to keep the flow user friendly.

2. Using simple but recognisable and familiar input fields to not overwhelm users.

I used a big CTA(1) for progressing in the flow and a back button(2) to get to go back if the user wishes to make changes in previous entries. placing both in the bottom of the screen making them more reachable.

If the user wishes not to provide certain information, I provided a skip button(3) for flexibility.

The critical decisions that Shaped this project —
1. Making a component that can take multiple inputs

I'll take allergies entry as an example, people might not have only one allergies but multiple. even in preferred food choices people might not have just one preferred food. to make the entry of multiple items more friendly, I designed a component that can take in multiple items as input.

2. Inspiration from fitbit and apple fitness

Both products are two of the most popular fitness tracking devices and apps on the market. They are known for their user-friendly interfaces, intuitive navigation, and visually appealing designs.

I took inspiration from Fitbit and Apple Fitness in order to create a user experience that is —

• Easy to use
• Visually appealing
• Consistent with other popular fitness apps — Users should be able to easily learn how to use the app. By following the design conventions of other popular fitness apps, I made it easier for users to get started.

Simple and easy to understand ui Users should be able to easily learn how to use the app. By following the design conventions of other popular fitness apps, I made it easier for users to get started.

I Did have to modify the apple components to fit the needs of the design, and In some cases make new ones inspired by apple’s design language.

Primary Colour — Orange
It suits well for a fitness oriented app because It is a motivating and energetic colour. also a popular colour for sports teams and fitness brands.

I did not use pure black and pure white because they can be harsh and unpleasant to look at. Using a variety of shades of white and black creates a more visually appealing and inviting UI.

The first step was to observe onboarding flows of current fitness apps. I chose apple fitness and fitbit. here are the things that I observed —

Apple Fitness

Observations

1. Not too text heavy — Apple Fitness uses a clean and minimalist UI design, with a focus on visuals and data over text. This makes the app easy to scan and understand
2. Usage of familiar and easy to interact inputs — This makes it easy for users to learn how to use the app and get started with their fitness journey.
3. Usage of white space — Apple Fitness uses a clean and minimalist UI design, with a focus on visuals and data over text. This makes the app easy to scan and understand

Fitbit

Observations

1. Good Layout — Fitbit has very similar pointers as apple fitness, but the onboarding process is a little more text heavy. but with good layout and hierarchy, users don't get overwhelmed.

These are the low fidelity wireframes that I made after I had inspirations —

Because of time constraints I did not get to record the iterations, I iterated on the design by testing it on mobile repeatedly.

If I had more time than just 24 hours on my hand, I would have done a lot more things, here are the things that I would like to improve in this project —

1. Primary research- by interviewing people and understanding their pain points, i can get helpful insights on how to make the data entry flow more engaging and reduce the drop-off rates further.
2. Illustrations- My goal was to make the experience seamless and clutter free, but addition of illustration on the start screen and download screen can be engaging and aesthetically pleasing.

It is still unbelievable to me that I produced this onboarding flow with the time constraint I had! here are my key learnings from this project —

1. Time management — I had to carefully manage my time, especially when there was so little I already had. I prioritised tasks that I thought were more necessary to make the flow usable.
2. Iterate — I learnt to quickly test designs and refine them with iteration.
3. Problem solving — There were a lot of problems that arised while designing the onboarding flow. It was important to be able to identify problems and to generate and evaluate solutions.

Thank you so much for getting this far! this is my third case study and I know it is not perfect, but I'm motivated to iterate and improve my documentation skills! if you have any feedback or suggestions then please drop a comment, it would be helpful!

we can connect on Linked In