Onboarding — a first impression, rebuilt within constraints

Project Overview

Onboarding is the process every new or returning Lose It! member completes. Members answer questions about themselves and their goals, then select a weight loss plan. This is their first real impression of the app.

Previously, onboarding felt outdated and did not align with the redesigned product. That gap set up the work that followed.

I rebuilt approximately 90% of onboarding within strict engineering constraints. In the process, I introduced a warm orange gradient background that expanded beyond onboarding to paywalls and other screens, becoming a core part of the brand.

I served as the sole designer for onboarding on both iOS and Android, working closely with PM, since onboarding depends on both content and presentation.

Project Overview

Onboarding is the process every new or returning Lose It! member completes. Members answer questions about themselves and their goals, then select a weight loss plan. This is their first real impression of the app.

Previously, onboarding felt outdated and did not align with the redesigned product. That gap set up the work that followed.

I rebuilt approximately 90% of onboarding within strict engineering constraints. In the process, I introduced a warm orange gradient background that expanded beyond onboarding to paywalls and other screens, becoming a core part of the brand.

I served as the sole designer for onboarding on both iOS and Android, working closely with PM, since onboarding depends on both content and presentation.

The Problem

What was actually wrong, beyond looking dated?

Onboarding was both outdated and lengthy, with over 75 pages of questions. Through a combination of user interviews and analysis of onboarding analytics, we learned that while the length contributed to effective weight loss plans and user retention, it also introduced friction. Based on these findings, the goal was to modernize and slightly shorten onboarding without compromising its effectiveness.

These were the questions behind it:

Why did it matter to users? Onboarding predated the redesign, so new members’ first experience felt disconnected from the updated product. The dark blue background appeared dull and immediately set the wrong tone.

What was confusing? Single-select and multi-select questions looked and behaved identically, making it unclear whether users could select one or multiple answers. This confusion occurred on every question.

Why did it matter to the business? Onboarding provides users with the plan that drives retention. It needed to match the app’s modern design and remain user-friendly while still gathering essential information.

💡
The app’s first impression was its least modern, least clear screen.

The Problem

What was actually wrong, beyond looking dated?

Onboarding was both outdated and lengthy, with over 75 pages of questions. Through a combination of user interviews and analysis of onboarding analytics, we learned that while the length contributed to effective weight loss plans and user retention, it also introduced friction. Based on these findings, the goal was to modernize and slightly shorten onboarding without compromising its effectiveness.

These were the questions behind it:

Why did it matter to users? Onboarding predated the redesign, so new members’ first experience felt disconnected from the updated product. The dark blue background appeared dull and immediately set the wrong tone.

What was confusing? Single-select and multi-select questions looked and behaved identically, making it unclear whether users could select one or multiple answers. This confusion occurred on every question.

Why did it matter to the business? Onboarding provides users with the plan that drives retention. It needed to match the app’s modern design and remain user-friendly while still gathering essential information.

💡
The app’s first impression was its least modern, least clear screen.

The Messy Middle

My approach included the following steps:

Learn the template system. Before I could redesign anything, I had to understand the templates engineering had built and what they could and couldn’t do. Everything I designed had to work within them.
Start with the background. I replaced the dull, outdated dark blue with a brighter background featuring our signature orange.
Update the details. I refreshed illustrations and text styles for questions and answers, and clarified interaction states to distinguish single- and multi-select options.
Design and animate program imagery. Each program required a unique illustrated and animated image.
Advocate for custom pages only where necessary. Most screens remained within templates; I requested custom work only when templates did not meet user needs.
Adapt for both platforms. I tailored designs to accommodate the distinct button styles and typography of iOS and Android.

My principles: Reflect the new Lose It! brand, work within constraints, make every interaction state clear, and reserve custom work for high-impact moments.

On AI: this project predates AI in our workflow, so I explored and iterated by hand.

The program imagery was a significant undertaking. Each of the five programs, including nutrition strategy, goal weight and calories, and intermittent fasting, required its own illustrated and animated imagery. I designed and animated all of it, including a grocery bag with foods falling into it to explain the idea simply and warmly.

The Messy Middle

My approach included the following steps:

Learn the template system. Before I could redesign anything, I had to understand the templates engineering had built and what they could and couldn’t do. Everything I designed had to work within them.
Start with the background. I replaced the dull, outdated dark blue with a brighter background featuring our signature orange.
Update the details. I refreshed illustrations and text styles for questions and answers, and clarified interaction states to distinguish single- and multi-select options.
Design and animate program imagery. Each program required a unique illustrated and animated image.
Advocate for custom pages only where necessary. Most screens remained within templates; I requested custom work only when templates did not meet user needs.
Adapt for both platforms. I tailored designs to accommodate the distinct button styles and typography of iOS and Android.

My principles: Reflect the new Lose It! brand, work within constraints, make every interaction state clear, and reserve custom work for high-impact moments.

On AI: this project predates AI in our workflow, so I explored and iterated by hand.

The program imagery was a significant undertaking. Each of the five programs, including nutrition strategy, goal weight and calories, and intermittent fasting, required its own illustrated and animated imagery. I designed and animated all of it, including a grocery bag with foods falling into it to explain the idea simply and warmly.

Decision 1

What should the first second feel like?

The problem: The dark, dull blue background made the initial screen feel outdated and set an unwelcoming tone.

What I did: I replaced it with a predominantly white background featuring a gradient of our primary orange. How it solved it: Onboarding immediately felt warmer, more modern, and aligned with the brand. The background was later adopted across paywalls and other screens, becoming central to the app’s visual identity.

The tradeoff: This change departed from the familiar look, causing onboarding to temporarily differ from other parts of the app that had not yet been updated.

Decision 1

What should the first second feel like?

The problem: The dark, dull blue background made the initial screen feel outdated and set an unwelcoming tone.

What I did: I replaced it with a predominantly white background featuring a gradient of our primary orange. How it solved it: Onboarding immediately felt warmer, more modern, and aligned with the brand. The background was later adopted across paywalls and other screens, becoming central to the app’s visual identity.

The tradeoff: This change departed from the familiar look, causing onboarding to temporarily differ from other parts of the app that had not yet been updated.

Decision 2

How do you tell people “pick one” vs. “pick many” without a checkmark?

The problem: Single- and multi-select questions appeared identical, making it unclear whether users could select one or multiple options.

What I did: I gave single-select options a white background with an orange outline, and multi-select options a solid orange fill. Single-select pages have no next button, while multi-select pages include one.

How it solved it: Two clear cues—background fill and the presence of a next button—help users understand the selection type before interacting.

The tradThe tradeoff: I preferred to add a checkmark for multi-select, but this was not feasible within the existing templates. I accepted the limitation and focused on creating a clear distinction through other means, prioritizing effort where it had the most impact.ngle-select and multi-select screens side by side, cues labeled.

Decision 2

How do you tell people “pick one” vs. “pick many” without a checkmark?

The problem: Single- and multi-select questions appeared identical, making it unclear whether users could select one or multiple options.

What I did: I gave single-select options a white background with an orange outline, and multi-select options a solid orange fill. Single-select pages have no next button, while multi-select pages include one.

How it solved it: Two clear cues—background fill and the presence of a next button—help users understand the selection type before interacting.

The tradThe tradeoff: I preferred to add a checkmark for multi-select, but this was not feasible within the existing templates. I accepted the limitation and focused on creating a clear distinction through other means, prioritizing effort where it had the most impact.ngle-select and multi-select screens side by side, cues labeled.

Decision 3

Which screens earn custom design when everything else is a template?

The problem: Templates supported most of onboarding, but could not deliver the desired experience for the two most important moments: the welcome and the post-questionnaire payoff.

What I did: Since a new template system was not feasible, I focused on reshaping what I could within the existing system and advocated for two custom pages: an extensively explored and animated landing page, and a program list featuring dynamic text via Lottie to display each user’s estimated goal date. This was the first use of dynamic text in the app, and I guided the team on its implementation.

How it solved it: The most emotionally significant moments now feel personal and modern, and the app gained a new capability with dynamic text, giving the experience a clearer payoff.

The tradeoff: All other screens remained within the templates. Rather than pursuing a full template redesign, which was not feasible within the timeline, I enhanced the experience through improved typography, color, imagery, and background.

Decision 3

Which screens earn custom design when everything else is a template?

The problem: Templates supported most of onboarding, but could not deliver the desired experience for the two most important moments: the welcome and the post-questionnaire payoff.

What I did: Since a new template system was not feasible, I focused on reshaping what I could within the existing system and advocated for two custom pages: an extensively explored and animated landing page, and a program list featuring dynamic text via Lottie to display each user’s estimated goal date. This was the first use of dynamic text in the app, and I guided the team on its implementation.

How it solved it: The most emotionally significant moments now feel personal and modern, and the app gained a new capability with dynamic text, giving the experience a clearer payoff.

The tradeoff: All other screens remained within the templates. Rather than pursuing a full template redesign, which was not feasible within the timeline, I enhanced the experience through improved typography, color, imagery, and background.

The Challeges

The biggest challenge was the template system. I was not designing on a blank canvas; engineering had structured onboarding so product managers could easily modify and test it, requiring every screen to fit a fixed set of templates. That structure shaped how I worked from the start.

Before redesigning, I needed to fully understand the templates and their limitations. I then identified ways to refresh the onboarding flow without disrupting the tools product managers depended on. Some desired features, such as a checkmark for multi-select, were not possible, so I developed alternative solutions.

The other challenge was the length. With over 75 pages of questions, excessive trimming would have compromised plan quality. I focused on making onboarding feel lighter without removing essential content.

The Challeges

The biggest challenge was the template system. I was not designing on a blank canvas; engineering had structured onboarding so product managers could easily modify and test it, requiring every screen to fit a fixed set of templates. That structure shaped how I worked from the start.

Before redesigning, I needed to fully understand the templates and their limitations. I then identified ways to refresh the onboarding flow without disrupting the tools product managers depended on. Some desired features, such as a checkmark for multi-select, were not possible, so I developed alternative solutions.

The other challenge was the length. With over 75 pages of questions, excessive trimming would have compromised plan quality. I focused on making onboarding feel lighter without removing essential content.

The Outcome

Approximately 90% of onboarding was rebuilt and launched on both iOS and Android. The experience now serves as a true entry point to the redesigned app. The most visible impact is the background, which originated in onboarding and now defines the brand across paywalls and other screens, making the redesign’s payoff visible across the app. A few areas still require updates, which I am monitoring.

The results showed clear improvement following the redesign. Completion rates for onboarding increased from 72% to 84%, and activation (users completing their first logged meal within 24 hours of onboarding) rose from 58% to 67%. In an A/B test comparing the new flow to the old, new users were 18% more likely to finish onboarding and proceed to set up their first goal. These metrics demonstrate that the new experience not only looked better but also encouraged more users to complete onboarding and take meaningful first steps in the app.

The Outcome

Approximately 90% of onboarding was rebuilt and launched on both iOS and Android. The experience now serves as a true entry point to the redesigned app. The most visible impact is the background, which originated in onboarding and now defines the brand across paywalls and other screens, making the redesign’s payoff visible across the app. A few areas still require updates, which I am monitoring.

The results showed clear improvement following the redesign. Completion rates for onboarding increased from 72% to 84%, and activation (users completing their first logged meal within 24 hours of onboarding) rose from 58% to 67%. In an A/B test comparing the new flow to the old, new users were 18% more likely to finish onboarding and proceed to set up their first goal. These metrics demonstrate that the new experience not only looked better but also encouraged more users to complete onboarding and take meaningful first steps in the app.

My Reflection

Constraints serve as a brief, not an obstacle. Although I could not redesign the templates, I focused on introducing warmth, clarity, and brand identity within the existing structure. The result is a background created within these limits that now defines the app’s appearance. Looking ahead, I would advocate for a comprehensive redesign of the underlying templates. This would mean moving beyond fixed layouts and limited interaction patterns to a more flexible system that enables richer user experiences, supports custom interaction states, and improves maintainability for the product team. With the new visual direction validated, updating the templates would allow faster experimentation, clearer differentiation between question types, and a more unified brand experience throughout the app.

My Reflection

Constraints serve as a brief, not an obstacle. Although I could not redesign the templates, I focused on introducing warmth, clarity, and brand identity within the existing structure. The result is a background created within these limits that now defines the app’s appearance. Looking ahead, I would advocate for a comprehensive redesign of the underlying templates. This would mean moving beyond fixed layouts and limited interaction patterns to a more flexible system that enables richer user experiences, supports custom interaction states, and improves maintainability for the product team. With the new visual direction validated, updating the templates would allow faster experimentation, clearer differentiation between question types, and a more unified brand experience throughout the app.