case study
Kokoon offer a connected device (headphones + app) sleep improvement experience, for anyone suffering from sleep issues or those who simply want to track and improve their sleep. Several different hardware devices and purchase routes meant a tailored but overly-complicated subscription set up.
The goal of this project was to integrate a new subscription setup into our mobile app’s onboarding experience while streamlining the existing sign-up and login flow. Users had reported drop-off due to step fatigue, friction during sign-up, and unclear error handling. The redesign was an opportunity to simplify the process, support social sign-in, and implement more intuitive error states and permission priming.
my role
UX Design (Lead)
User Interface Design
timeline
10 months
tools
Figma
Miro & FigJam
Google Analytics
The onboarding experience was overly long and unintuitive. It assumed the scenario of users setting up and pairing their headphones there and then, without much flexibility. For account set-up, form fields were not auto-filled or optimised for mobile, social sign-in was unavailable, and error feedback was minimal. Users often abandoned the flow, and support tickets for account creation issues were increasing.
Previous onboarding
It was around this time that we entered into a partnership with Philips for the production of the latest version of in-ear headphones. The timing meant that we would be launching the app subscription service to be coupled with 3 different hardware device options - with various purchase routes dictating tailored price offers, customer account info being pre-linked or not, and even the features available in the case of legacy users on older hardware. This meant that onboarding would have to incorporate a way to know the hardware being used and work for all user flows.
Strategize and design a much sleeker and quicker onboarding experience that includes best-practice elements such as permission priming & auto-filled forms, with a subscription set up that covers all customer funnels, to be completed with as few steps as possible to limit drop-out. Focus on increasing robustness of experience for all pathways, while reducing support tickets related to sign-up / sign-in issues.
Reviewed analytics data to identify where users were abandoning onboarding.
Conducted a competitor analysis across apps with best-in-class onboarding experiences.
Led a cross-functional design workshop to align the product, engineering, and marketing teams on goals and pain points.
Created a comprehensive system diagram to capture all scenarios across the onboarding user flow and how we would gather device info:
A series of ‘license status checks’ would be needed from the backend in order to check for a ‘subscription license’ against the account & hardware device
In order for this to work smoothly, permission priming would have to go first, followed by account sign-up / login, to give those valuable few more seconds to complete the license check before subscription set up
“A lot of customers only use the default earbud sleeve size.
We encourage all to try different earbud sleeves, even ones they don't think will fit, for improved comfort and noise masking.
“Customers often don't know about location settings and allowing permissions.
So most customers that "can't connect to Bluetooth" end up saying they were eventually able to connect when we get back to them.”
“Customers get confused with not getting a verification email once they are verified.
They also get annoyed with having to log back in if their session has expired (especially if it's in the middle of the night).”
“We need to outline bluetooth settings really clearly, as if it’s on a platter for them to accept & set.”
permission priming examples
Account setup with paired devices - competitor analysis
System diagram
Explored multiple concepts for reducing cognitive load.
Created wireframes for optional social sign-in and contextual permissions & tooltips.
Mapped out possible error cases and matched them with clear, actionable messaging.
Create account / log in
permission priming
forgot password flow
Device pairing for subscription info
Developed interactive prototypes of the end-to-end onboarding flow.
Tested progressively higher fidelity versions, improving clarity at each stage.
Designed smart form inputs using auto-fill and optimised for mobile keyboards.
Removed headphone wearing tips from app onboarding & helped Philips design a ‘quick start guide’ included in headphone packaging.
Gathered feedback and adjusted layouts to make the process feel faster and more intuitive.
end of flow transition
quick start guide for philips sleep headphone (paired device)
Ran further usability tests using Figma present view on video call screen sharing, targeting interpretation speed and comprehension.
A constraint of the chosen Shopify package for our subscription webview section, coupled with the need to match device & account info, meant I unfortunately had to remove most social sign-in (apart from Google sign-in for Android users) because the user’s account info could be hidden.
Simplified the user journey with fewer screens and better permission priming.
Streamlined layout reduced the number of screens and interactions.
Improved visual feedback and accessibility considerations for forms.
Updated UI for a smooth transition into the app home screen at the end of onboarding flow.
Permission priming presented at the right time with clear benefit statements.
Onboarding completion rates improved by over 40%.
50% reduction in support tickets related to login and sign-up issues.
Increased user satisfaction with onboarding, based on post-completion surveys.
This project reinforced how impactful small changes in onboarding UX can be. By combining behavioral design principles with usability heuristics, we reduced friction and made the first-time experience more inclusive. In future iterations, I would incorporate biometric sign-in such as Face ID, and explore adaptive onboarding for returning users.
Want to know more about me or my previous projects? Reach out below:
Contact me
