Ongo is a fitness app that helps users keep track of their activity, diet, sleep, and overall health with science backed data and fitness programs.
The objective of the project was to create a more comprehensive and user friendly onboarding experience for Ongo's iOS app in order to increase their acquisition rates.
The team consisted of 6 designers including myself. I had the unique opportunity to function as both a product designer and illustrator for this role.
We conducted competitive analysis of other fitness app onboarding flows, comprehension tests to determine pain points in the current flow, and numerous validation tests throughout the lo-fi and hi-fi process to make sure our changes created a higher acquisition rate. I was personally tasked with updating the onboarding carousel to help solve some of our pain points as well. As shown below, our final design actually doubled Ongo's acquisition rate.
After we conducted our preliminary comprehension tests, we discovered a number of pain points throughout Ongo's current onboarding flow. In fact, only 3/7 users would actually use the app based on the onboarding process.
We then used an affinity map to group all of the pain points we recorded through our interviews.
After we had affinity mapped our data, we took the most common points of friction and mapped them on a 2x2 grid to see which were both important for the business and the user.
Next, we created a task flow of the current onboarding flow to map out the pain points that would need to be solved based on our analysis.
It was important to explore as many solutions as we could for each of these pain points with sketches. As a group, we independently sketched our ideas, and then came together to dot vote on what we thought were effective solutions.
Because I have illustration experience, I volunteered to take on the onboarding carousel. The overall goal of the carousel was to explain Ongo's UVP (or unique value proposition) by clarifying the role of data, experts, and communities in the app.
Through our comprehension tests, we were getting comments from our users such as, "The carousel was confusing. I honestly forgot I was in a fitness app altogether with the map and duffel illustrations. For a second I thought I was in a travel app."
Before I could get to the illustrations, I first needed to update the copy for our lo-fi version. Based on our comp tests and speaking with the business stakeholders, we realized that copy and illustrations needed a few big changes in order to better explain Ongo's UVP:
1. We had moved the "connect device" CTA to a different phase of onboarding, so those needed to be removed.
2. The first screen needed to emphasize the role of data in Ongo's app since users were confused about that.
3. The second screen needed to speak to the goal of the app : "to help user's reach their full potential".
4. The third screen needed to explain the role of experts and communities within the app.
Below is the carousel with updated copy:
We then combined all of our re-designed chunks of the flow into a lo-fi version. It was important to test this version to make sure we were on the right track in improving user experience and acquisition rate.
A bird's eye view of our lo-fi flow and results from our validation tests are below.
Hi-Fi Carousel Illustration Process:
Our tests showed us we were close. We had improved our success rates in each of our pain points with our lo-fi mock up, but we knew we could push our design even further. With the copy set for the carousel, I could now focus on creating illustrations that matched.
The unique challenge with this illustration project was that the company already had an established illustration style. I had the opportunity to generate new illustrations that matched their style as well as our updated copy.
Because their branded illustration style was sketchy and hand-drawn, I began with a round of sketches on paper.
Then, as a group, we selected the illustrations that were most effective with their paired copy. The next challenge was recreating those sketches digitally and matching Ongo's style. I also added a "Get Started" CTA to each of the screens to give more experienced users the option to skip the carousel.
The final screens are shown below.
Our team eventually compiled all of our screens into one file, created the final prototype, and did one last round of validation testing to make sure we had improved Ongo's acquisition rate with our designs. As mentioned in the project overview, we were actually able to double Ongo's acquisition rate from 43% to 86%.