.png)
Overview
The Challenge
66.4% of new users were abandoning the onboarding process due to findability and usability issues.
The Results
My redesign of the onboarding flow has resulted in a 41% reduction in the abandonment rate.
My Role and The Constraints
-
I carried out the UX research and UI alone, as well as created all of the illustrations
-
A monthly budget that limited how much user research and design iterations I could carry out
Testing of the Existing Onboarding Flow Highlights Findability and Usability Issues
I recruited five people from an online forum on health and fitness to interview and test the existing onboarding flow with. Three repeated issues came up during this.
ISSUE 1: 60% of participants didn't know what the word 'Navy' meant on this screen
.png)
ISSUE 2: 80% of users missed the 'Help' button in the process of trying to find information about how to measure each body measurement accurately
.png)
ISSUE 3: 4 out of 5 participants tapped on the 'Done' button after entering a body measurement, thinking that it would take them to the next tab to enter another measurement. It didn't.*
.png)
*Usability testing was done remotely using a Figma prototype of the onboarding flow on desktop, with participants directing me where to "tap" to complete each task. Had the prototype been tested on mobile, some participants likely wouldn't have tapped 'Done' after entering a body measurement — they'd have simply swiped left to the next tab instead.
Design Solution: Removing the Findability Issues in the Onboarding Flow
After sketching some design solutions to the findability issues found in the onboarding flow, I designed high-fidelity designs in Figma. Please see below the new screens that remove the findability issues that were confusing users during usability testing of the existing onboarding process.
BEFORE
ISSUE 1
ISSUE 1: 60% of usability test participants didn't know what the two methods to calculate body fat percentage meant when they got to this screen. One participant even said he would leave the app to Google what these terms meant before moving forward!
AFTER
.png)
SOLUTION: In the former onboarding flow, users had to wait until they reached the home screen to find out what 'The Navy Method' and 'The Caliper Method' meant. Now, they can find out what these body fat percentage methods mean by simply tapping the information icon next to the terms.
BEFORE
ISSUE 2
ISSUE 2: 80% of users didn't know where to find instructions for measuring their body accurately before entering their measurements during onboarding. This information was hidden behind the 'Help' button.
AFTER
.png)
SOLUTION: With the redesign, users can now read how to measure any given body part correctly and enter that measurement on the same screen. These instructions are no longer hidden behind a 'Help' button.
BEFORE
ISSUE 3
ISSUE 3: 4 out of 5 participants tapped the 'Done' button after entering a body measurement, thinking it would take them to the next tab to enter another measurement. Instead, they were taken to the home screen, because tapping 'Done' tells the system that users are finished entering the body measurements they want to track.
AFTER
.png)
SOLUTION: In the redesign, there is no longer a 'Done' button on the screens prompting users to enter their body measurements. Instead, there is a 'Next' button. Using the word 'Next' instead of 'Done' makes it obvious to users that they'll be taken to the next measurement screen rather than the home screen.
The Decision to Redesign the Entire Onboarding Flow and Delay Onboarding
The client wanted me to redesign the entire onboarding flow. This was especially true given that he no longer wanted to use photographs of his own body to demonstrate how users would measure each body part accurately. He was open to using illustrations instead.
Delaying the Sign Up/Log On Screen and Onboarding Process
In the existing onboarding flow, new users are first shown a sign up/log in screen, then asked how they want their measurements recorded and calculated, and then prompted to enter those measurements. This can be a lot to ask upfront, since measuring and recording one's body takes time. With the redesign, new users can explore the app before tapping 'Enter Data' on the home screen to start entering measurements, which effectively delays onboarding.
The Use of Illustrations to Aid New Users when they’re Entering their Body Measurements
Currently, instructions on how to measure each body part accurately are accompanied by a photograph of the client measuring that body part on himself. The client was open to me creating illustrations in place of these photographs, which is what I did below:
The Use of other Illustrations in the Onboarding Flow
I also created illustrations for the four screens that come before the body measurement input screens, as I thought including some here would make it more consistent with the rest of the onboarding flow.
Testing of Redesign Pre-Launch
I carried out usability testing of the redesign with 5 participants, asking them to complete the same set of tasks used in the previous round of testing on the existing onboarding flow. All participants understood what 'the Navy Method' and 'the Caliper Method' meant, thanks to the new screen's tappable information button, which brings up a modal explaining each method of measurement. They also had no trouble finding out how to measure their body accurately before entering their measurements.
High-Fidelity Prototype
What did I Learn from this Project?
I learned that providing the right information for users to complete a task is not enough. Users have to be able to discover that information in a timely and intuitive way, too.