top of page
Ongo Mobile Onboarding

Designing an onboarding XP for better health outcomes

Context

Ongo is a marketplace where fitness/wellness experts can create and share programs to help users improve their health habits by accessing the content through the Ongo app. Ongo came to Tradecraft wanting to improve the app's onboarding experience by clarifying Ongo's value propositions and completely updating the user interface to reflect the brand's vision.

My role

This was a contract role where I was part of a team with 4 other product designers. I focused mainly on user interface design, copywriting, and user research.

User research

UX Strategy

Wireframing

Prototyping

Usability Testing

UI Design

Interaction Design

Copywriting

TL;DR

In their first experience with the Ongo mobile app, users didn’t understand what was the product’s value proposition – a wellness marketplace aimed at helping people live a healthier life through data-driven insights, adaptive exercising programs, and motivational communities. My team worked on a completely new onboarding flow to clarify Ongo's value proposition, help users set health goals, and collect user information to provide personalized user insights. We completely redesigned the user interface to reflect Ongo's brand identity, as well as added new components to its existing design library. With the final design, 95% of users understood Ongo's value proposition and 90% enabled notifications to receive health insights. Due to this being a contract job, I can't speak to the implementation phase of this project.

Final Design

Hi fi Ongo Final.png

Design Process

The problem

In their first experience with the Ongo mobile app, users didn’t understand what was the product’s unique value proposition – a wellness app aimed at helping people live a healthier life through data-driven insights, adaptive exercising programs, and motivational communities.

1.

Comprehension testing

The design process started with comprehension testing of Ongo's existing mobile app with 15 people. The goal was to identify the users' pain points during onboarding and create a better experience. Here's what the onboarding flow looked like:

ongo_existing_final_1x.png
Ongo's old onboarding experience
Insights from comprehension testing

15/15 users wished for more clarity on how Ongo would improve their health

​

14/15 users were confused about the app's value and wouldn't use it

​

12/15 users wouldn't connect their health apps and devices to Ongo just yet

​

9/15 users thought Ongo was a step-counting app

 

14/15 users were confused with the dashboard (the first screen after onboarding)

2.

Competitive analysis

To understand mobile onboarding best practices in wellness apps, we also conducted a thorough competitive analysis by examining onboarding experiences from Ongo's direct and indirect competitors such as Headspace and Nike Run. This research uncovered patterns and insights that guided our design decisions later on.

Patterns and insights

  • Introductory carousel screens: More than "educating" users, focus on providing "value" and excite them about the experience.

  • Progress bar: Help users understand how long the onboarding process will take – it should be short.

  • Goal-setting features: Encourage users to focus on their health goals from day one so they can bring Ongo to their daily routine.

  • Smart notifications: Users might feel compelled to enable notifications when given enough context as to why that is important for the overall experience.

  • Progressive Disclosure: Guide users to a state of understanding the product's unique value proposition without overwhelming them with too much information, all at once.

3.

Ideation: Design studio

With the insights from comprehension testing and knowledge compiled from competitive analysis, we ran an ideation exercise to define the problems we would be focusing on. 

Ongo ideation.png
Solutions proposed

  • Redesign introductory carousel screens to reflect the app's features and clarify its purpose. 

  • Consider the funnel through which Ongo's new users will be coming from – initially by invitation from community experts – and make sure to introduce the concept of "community" during the onboarding process.

  • Implement a goal-setting process by designing a "health goals" step aimed at encouraging users to work toward reaching their goals. 

  • Create a notifications screen that explains the benefits of turning notifications on – users would only receive the alert message if they opted-in from that screen.

  • Change the homepage: Users shouldn't land on an empty dashboard, but on an "explore" page where they can see the content available

4.

Wireframes

From our design studio sessions, I sketched onboarding flow options with the goal of addressing the users' pain points and business goals.

paper_sketches_ongo_pres.+copy.png

Between paper sketches and the final high-fidelity mockups, we worked on two design iterations to address problems uncovered during usability testing. Here are the highlights from these iterations:

Hi-Fidelity: V1
Mid-fi 1.png
At this point, we were still trying to figure out the new visual identity of Ongo
“I didn’t import my contacts because at this point
I don’t know the value this app is providing.”
– User 1
Hi-Fidelity: V2
Mid-fi 2.png
The new visual identity starts to take shape, with lighter colors and a cleaner illustration style
“I didn’t import my contacts because at this point I can’t tell how many more steps there are by looking at the progress bar.”
– User 2
5.

Contributing to a design system

While our team was able to successfully leverage Ongo's existing design system and brand guidelines, we also contributed to adding new components to their library. To make the teamwork more efficient and to establish clear communication with our client and developers, I componentized some of the new designs we created such as the "goal cards" shown below.

Ongo_gif_500.gif

Final Onboarding Flow

After user testing and two rounds of iterations, we arrived at the final flow:

 

  • We created new carousel illustrations and copy, as well as completely updated the UI across all screens to reflect the refreshed brand identity.

  • We shortened the onboarding experience by excluding the contacts importing step (the majority of users expressed no interest in adding their contacts during their first experience with Ongo.)

  • I designed a segmented progress bar, which signals how many more steps the user needs to go through to finish onboarding.

Hi fi Ongo Final.png

Final user testing insights

15/15 users understood Ongo as an exercise/wellness marketplace where they can join communities

15/15 users understood Ongo as a wellness marketplace where they can set and track their health goals

14/15 users thought the onboarding experience was clear

11/15 users said they would use Ongo to get healthier

Impact

Ongo did not have product market fit at this point (2018), so this project was an experiment to get initial traction for this two-sided marketplace (communities run by wellness professionals). Having said that, in less than 3 months, we delivered a completely new onboarding experience to our client, achieving:

 

  • A 75% approval rate (11/15 users said they would use Ongo to get healthier) compared to the initial 6% from comprehension testing (14/15 users said they wouldn't use Ongo as they didn't understand the app's value)

  • A refreshed user interface while maintaining Ongo's original brand identity

  • New components added to Ongo's library and implemented by engineering

​

bottom of page