---

Experience Design                           Interface Design                          Graphic Design                     Jennifer Qian

Interface Design:
Headspace 
Onboarding Redesign

Overall View:
Onboarding feels long, repetitive, and misaligned with Headspace’s intended emotional tone.


Pain Points:

• The current Headspace onboarding has visual inconsistency (mixing cartoon style and photo-heavy promotion screens).
• Commercial ads break the animation flow, disrupting the calming experience the app wants to create.
• “Personalization” steps do not meaningfully affect what comes next → all users receive the same flow.
• The metaphor of the “blue sky” onboarding animation is interrupted, making the experience feel fragmented and confusing.

Design goal:

Reduce onboarding time from 6 min to around 3 min; 

improve the flow to make sure the users’ attention was continued to the home screen.


Research:
1. Screen-recorded the entire onboarding to identify friction points, animation breaks, and unnecessary screens.



2. Compared the newest onboarding with earlier versions of Headspace’s onboarding to see how the experience has changed over time.



3. Identified three major UX opportunities:

1.
Remove screens with a different styles. 2.
Combine the breath animation with 3 ad pages3.
Strengthen personalization step


Ideation & Exploration:

• Discussed multiple directions for simplifying the onboarding:
  • A shorter onboarding with no ads before signup (delete 3 promotion screens)
  • Try an honest personalization flow that visibly changes recommendations for chosen buttons
  • emphasizing the behavior of breathing in and out as a memorial point

Design Process:
Visual Design Exploration:
Preserved Headspace’s signature: warm orange color schemes, cartoonish character build-ups, typography

Typography:

• We discussed and asked ChatGPT about the typography in Headspace to ensure the text change is consistent.
• We imported this font, Aperçu, and applied it to our changes.

Content Design Decisions:Add microcopy on breathing animation screens (text extracted from promotion page):

“Everything your mind needs”
“Loved by millions.”
“Support your mind on your schedule.”

We also discussed which text is more fit as microcopy; maybe the small descriptions like “stress less, sleep soundly” is better than “everything your mind needs.”


Final Deliverables:
1. Deleting three promotion pages:

• Looks like App Store preview screens, not necessary for in-app onboarding
• Repeats information already shown in later onboarding screens
• Visual inconsistency—uses photos instead of the app’s usual cartoon style
• Dense with text and data—may create friction for users
• Social proof elements are valuable but could be simplified or integrated later

2. New Breathe In/Breathe Out animation: (my part)

• Move key information from the deleted pages into the opening animation pop-up Make the animation a bit longer
• Keeps important context while maintaining smoother onboarding flow
• Preserves social proof elements in a more engaging, lightweight format

Before vs. After


3. Updated Personal Selection Flow:

• The follow-up screen after goal selection isn’t personalized or connected to chosen goals “Personalization” feels superficial—all users receive the same onboarding flow
• Clearer feedback showing the previous choices influenced the results. Use wording like “For You” or “Recommended” to signal personalization
• Visually emphasize chosen options (make selected items larger or featured)

Before vs. After


User Testing & Validation

• The new flow is shorter and less time-consuming
• All the comments agreed on deleting and altering the 3 promotion pages.
• The “info inside animation” design was well received, and most people commented, “I love the combo of the breathing exercise.” “Love the idea of adding the animation for the leading page.” “Like the breath with the infos.”
• One person thought the idea of adding text in the breathing felt frustrating because it felt like being controlled by the company
• We received comments on the personalized selection flow: we may add scrolling information of learning tasks under the chosen buttons; people may be interested in certain titles of the courses and be likely to investigate when reaching the home page.
• We can also try to use hierarchy and more comprehensive UX writing to help the user to understand the tasks they can learn in Headspace more easily.