.png)
Overview
The Challenge
20% of new users weren't entering a single body measurement into the mobile app. This is a problem because if new users aren't entering their body measurements in the first place, they aren't using the app for its intended purpose. By not inputting any data, these new users are less likely to become returning users, and will therefore not become paid users of the premium version.
Results (Projected)
Usability testing of my redesign of the onboarding flow is projected to decrease the rate of new users not entering a single body measurement into the app by 60%.
The Constraints
-
I carried out the UX research and UI alone
-
A monthly budget that limited how much user research and design iterations I could carry out
UX Research Uncovers Usability Issues in the Onboarding Process
Looking at Google Analytics first, I realized that 62% of new users going through the onboarding flow were abandoning the app. The onboarding process is where new users get prompted to enter their body measurements. Although this didn't mean that these people hadn't entered a single body measurement into the app before abandoning it, it did signal that there could be usability issues in the onboarding flow that could be contributing to why 20% of new users don't enter a body measurement.
Usability Testing of the Existing Onboarding Flow Highlights Findability Issues
Originally, I was hoping to recruit new users of the mobile app with an in-app survey I created; however, this failed to recruit anyone. I was, however, able to recruit five people from an online forum on health and fitness to interview and test the existing onboarding flow. Three repeated issues came up during this.
ISSUE 1: 60% of participants didn't know what the word 'Navy' meant on this screen
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
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*
.png)
.png)
.png)
*The usability testing sessions were done remotely, and I shared the prototype of the onboarding flow in Figma on desktop. I then told them to direct me on where they'd like me to "tap" in order for them to complete the tasks I had given them. If participants had used the prototype on a mobile device during usability testing, most of them may not have tapped on the 'Done' button after entering a body measurement. They may have simply swiped left to get to the next tab instead.
Please see the affinity map to discover more usability issues uncovered during the usability testing phase.
The UX Problem Statement
New users are having trouble finding the information they might need before entering a body measurement in the onboarding flow. This causes frustration for new users and leads to some of them abandoning the onboarding process altogether. This is affecting the revenue of the company because new users who end up abandoning the onboarding process are less likely to become returning users, who will eventually pay for the premium version.
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.
ISSUE 1
​
BEFORE
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 that he would leave the app to Google what these terms meant before moving forward with the app!
AFTER
.png)
SOLUTION: In the former onboarding flow, users would have to wait until they reached the home screen to figure out what the terms ‘the Navy Method’ and ‘Caliper Method’ meant. Now, users can find out what these body fat percentage methods mean by simply tapping on the information icon button next to the terms.
ISSUE 2
​
BEFORE
ISSUE 2: 80% of users didn’t know where to go during the onboarding flow to find out how they could measure their body accurately before entering any body measurements. The information they needed to do this 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 not hidden behind a ‘Help’ button anymore.
ISSUE 3
​
BEFORE
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. Instead they get taken to the home screen because tapping on the 'Done' button "tells" the system that users are finished with entering all of 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 the user that they can expect to be taken to the next measurement screen and not the home screen.
The Decision to Redesign the Entire Onboarding Flow and other Decisions
Although I could've just redesigned the particular screens that were causing findability and usability issues in the design style of the existing onboarding flow, the client wanted me to redesign the entire onboarding flow. This was especially since the client no longer wanted to use photographs of his own body to demonstrate how users would measure each part of their body accurately. He was open to using illustrations instead.
Delaying the Sign Up/Log On Screen and Onboarding Process to Make it Worthwhile to New Users to Start Entering their Body Measurements
In the existing onboarding flow, new users when they first open the mobile app are confronted with a sign up/log in screen. They are then asked to start making decisions about how they want their body measurements to be recorded and calculated. Next, they are prompted to start entering their body measurements. To new users, this possibly could be a lot to ask upfront, especially since it can be time consuming to measure one's body and then record it. It might be why some of these new users abandon the onboarding flow before entering a single body measurement.
​
With the redesign, now new users can explore the rest of the app before tapping on the 'Enter Data' button on the home screen to start entering their body measurements. This effectively delays the onboarding process.
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.
Usability Testing of Redesign Demonstrates that 100% of New Users can Enter a Body Measurement without Issue
I was able to carry out usability testing of the redesign with 5 participants. I asked them to complete the same task set in the previous round of usability testing of the existing onboarding flow. All participants understood what 'Navy Method' and 'Caliper Method' meant from the new screen that now includes a tappable information button that brings up a modal explaining each method of measurement. They also had no trouble finding out about how to measure their body accurately before entering their measurements.
High-Fidelity Prototype
What did I Learn from this Project?
The redesign is currently going through beta testing, and it's set to be released in the fall. I will update this section when the redesign has launched.