Loading... Loading...

banner

Nutrition App – Onboarding Experience Design

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 stressful 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

Persona

Empathy Map

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.

Journey Map

Competitor Research

2. During Onboarding

UX Ideation

UX Workflow

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.

IKEA EFFECT

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.

Organize

Result – Onboarding User Flow:

User flow

Sitemap

Sitemap

Wireframe

Quick iterations on paper

1
2

UI Ideation

ideation

Illustration

Use colors and shapes to connect each screen and make the foundation for animation design.

onboarding

Animation Design

onboarding
AE

Interactive Prototyping

Clickable Prototype

1. Render After Effects animations natively to a JSON data file by using Lottie-web

bodymovin

2. Code click interactions in Dreamweaver

Dreamweaver

Key Screens

UI

< Home     |     More UX/UI Projects >