Project Time: September 2017 Role: UX/UI Designer Project Goal: Create an efficient and engagement-filled onboarding flow that delivers the value of the app, improves the retention rate and makes the user feel competent.
While working at HTD, which is a healthcare design and software development company, I was tasked with exploring the onboarding process for a nutrition app. When a user launches the app for the first time, they want an interaction that’s seamless, easy, enjoyable, and free of awkwardness. The first impression, or ‘onboarding,’ is a make or break moment for app businesses.
Problems:
1. Digital health apps have low engagement.
2. Onboarding experience usually makes a user feel stressed and perplexed as it’s exceptionally long and doesn’t make sense for the user.
Solution:
My approach was to create a rich, animated onboarding process to engage the user. I explored using shapes and color to create smooth transitions of this interactive tour.
Onboarding Animation Prototype
Please click on the bottom button to look through onboarding screens
Process
1. Pre Onboarding
User-centric design approaches – who are our users, why they want to download our app, and what are the overarching traits of a user?Research resource: Reviews of competitors’ apps in the App Store or Play Store
User Persona
Empathy Map
Journey Map
After understanding the users, and documenting a user’s pain and motivations throughout the competitor’s onboarding from start to finish, I’ve found the following areas of opportunity to alleviate the user’s pain points.
2. During Onboarding
UX Ideation
User Flow
Challenge:
Onboarding process might push users to abandon the app due to information overload. But we do need to gather lots of information to customize their coaching plan before they can start using the app.
Solution:
1. Use IKEA Effect
Make the customization and co-production effort from the users when completing the product to transform into trust and love.
2. Organize – The law of simplicity
To make the user feel competent (low effort), I organized our questions based on their topics. Organization makes a system of many appear fewer.
Result – Onboarding User Flow:
Sitemap
Wireframe
Quick iterations on paper
UI Ideation
Illustration
Use colors and shapes to connect each screen and make the foundation for animation design.
Animation Design
Interactive Prototyping
1. Render After Effects animations natively to a JSON data file by using Lottie-web
2. Code click interactions in Dreamweaver
Key Screens
< Home | More UX/UI Projects >