Onboarding Redesign
Improving onboarding experiences for new users to sync the physcial product and discover personal preference on sun-a-wear mobile app
Role
Lead Designer
Employer
sun-a-wear
Platforms
iOS, Andriod
Duration
1 month
Background
sun-a-wear is a companion app for a wearable device that tracks sun exposure and provides users with personalized skin health insights based on their UV data and skin type. As the first touchpoint for new users, the onboarding is the user's first impression of the app, and like it or not, it's everything.
Until 2024, the app has servered the need. Despite the app’s promising health value, but user retention during onboarding was low and they need to spend a long time to complete the onboarding sign in. After analyzing usage data and user feedback I realized the biggest problems were the following:
-
Information overloaded all at once
-
Lack of visual consistency
-
Low clarity about hardware device connection steps
A good product can’t succeed if the onboarding pushes users away. This redesign aim to understand the use's motivations, shortern onboarding sign in and providing engaging information.
The original design (from left to right):
permission page, connect device page, user profile page, user personal questionaire
Approach
The average onboarding time for new users was 1:29 min — a lengthy process involving device syncing and a required questionnaire to personalize skin type settings. Many users dropped off because of unclear instructions, confusing questions, and a lack of visual guidance.
As the lead designer, I had two main goals:
1. Simplify the onboarding flow flows with no distractions without removing essential steps.
2. Build a clear, scalable system for both users and the development team.
The first change I made was ease the 8-step skin type questionnaire into a cleaner, more focused flow. Next, I built a UI tool kit for the team in Figma and educated the team on usage.
-
Visual progress matter
-
Improve time-to-value
Our main challenge was finding a best way to showcase the different between skin type and ensure the new user can chose the correct one.
.
Impact
From user flow and information architecture to visual design and final prototyping, I led the design process. Working closely with stakeholders, PMs, and engineers, we successfully launched a new version of the product in just 2 months, receiving positive market feedback and improving onboarding time by 27.7%.