Case study
for the mental health app Happy Being
GOAL
Improve the conversion sign
up rate and reduce the bounce rate during onboarding
TEAM
4 UX Designers
(including myself)
and Dev team
TIMELINE
One month
October 2020
MY ROLE
UX site audit
Gamification concept
UX copy
Asset design
TOOLS
Sketch
InVision
Marvel
Photoshop
Illustrator
THE BRIEF
Design Constraints
Happy Being
deliverables need to be initially designed for a desktop website, users are directed from there
to download the
mobile app.
NSmiles is a start-up developer providing a tool for mental health support.
Their product Happy Being promises to improve a user’s emotional wellbeing, it is slated for a complete re-launch to over
7 million users.
Our team focused on the onboarding/sign up for
Happy Being Wellbeing
THE PROBLEM
Analytics show that many users abandon the assessment page mid questionnaire, resulting in a low sign-up rates.
How Might We...
increase user sign up rates?
How Might We...
decrease user jump rate?
How Might We...
enhance the onboarding experience?
DISCOVERY (1)
Existing research has shown that
users find the onboarding assessment questions too long resulting in a 70% bounce rate during onboarding
Hueristics
of the main competitors’ onboarding
flows
Happify
is a mobile app uses daily activities & games
that helps people live a emotionally healthy life
Pros
-
Easy onboarding that compells the user to sign up at the end of assessment.
-
Big fonts, easy to read questions.
-
Games are bright fun.
Cons
-
Games are hard to find
Calm
is the #1 mobile App For Mental Fitness. Famous For Its Guided Meditations & Sleep Stories.
Pros
-
Offers limited features without signing up
-
Clear and easy to navigate interface
-
Language is simple
Cons
-
Doesn’t offer features other than auditory exercises
Headspace
has more than 20 million users in over 190 countries. Offers hundreds of guided meditations.
Pros
-
Engaging animation onboarding propels the user forward
Cons
-
Must sign up before doing any assessment
Main takeaways from heuristic assessment
Language
should
be consistent,
and clear
Games make
user tasks
feel fun
Users should
be rewarded
for completing onboarding
DISCOVERY (2)
Audit of existing Happy Being flow
From the landing page the user is prompted to start a personal assessment questionnaire measuring one of 8 traits of mental health, following this flow:
Painpoints
-
Titles are not consistent
ex: Personal Relations vs. Family and Friends Relations
-
English text is dense and difficult to understand
-
High bounce rate due to quiz fatigue: user must answer ten General Information questions before being prompted to take assessment quiz
-
User has no way to sign up after starting an assessment and no prompt to save their progress
-
Duplicate screens contain the same information
-
Visual design changes drastically at the end of the flow
-
Unclear where the user should go after the report
Takeaways
-
Homogenize track names so that they are consistent on every screen
-
Improve UX Writing: edit text to more bite-size consumption for the user
-
Offer only one “free” assessment track and report - lock other assessment tracks
- reducing choice making simplifying the experience and incentivizes sign up
-
Introduce gamification component – including a progress bar
during assessment and provide an incentive to finish assessment quiz
-
Streamline onboard process by removing duplicate screens
-
Reduce quiz fatigue by removing "general questions" section from onboarding
DESIGN PHASE (1)
Our team collaborated on a new onboarding flow.
My role was to design the screens (highlighted below)
Assessment
Menu
Assessment
questions
Key confirmation page
Assessment
Report
Assessment
description*
*This screen was eliminated in later iterations in order to improve the user flow
My role was also to add the gamification
component on this part of the flow
GAMIFICATION
I wanted to build off of Happy Being’s existing flower logo and design a simple game that would invoke growth.
The user builds their own garden
by earning flowers for each assessment they finish.
They nurture the garden as they nuture their own mental health-
a Wellbeing Garden.
The Concept
-
Users earn a unique flower for each assessment they complete
-
Once the flower is at its healthiest state the user chooses a place in their own Wellbeing Garden to plant your flower
-
Users keep their flower at its healthiest state (completing in app tasks) to attract butterflies to your flower
For complete game concept please go here
Edge Question:
What happens if the user does not keep the flower at its healthiest state?
Flowers can't "die", instead the flower moves backward in progression.
Presentation to Stakeholders
How?
I built a prototype incorporating the existing Happy Being sample questions a user need to answers
in order to reach the end of an assessment.
Result?
The stakeholders enthusiastically bought into the “garden” concept.
Next Steps
Create the Hi-fi designs for the gamification assets
Implement these assets into the assessment tracks
Implement the introduction to the redesigned flow screens
DESIGN PHASE (2)
Hi-Fi Screens and
Game assets
GAME ASSETS AND MENU SCREEN
The main goals in redesigning the menu screen were:
-
Introduce the gamification elements
-
Edit the language for clarity in the descriptions
-
Offer ONLY the “personal relationships” assessment for the “free” version of the app.
All other assessments are locked and the user would be prompted to sign up for access.
Menu Screen
GAME ASSETS
I created a unique flower icon and base color for each assessment
Then I created a “garden”, the stage where the user can plant finished assessment flowers
MENU SCREEN
The flower icons were placed and I edited the text description of each assessment for more clarification.
After
Before
ASSESSMENT QUESTION SCREENS
I re-wrote the introductory track questions for UX clarity, enlarged the text size and placed the Personal Relationships flower icon
Before
After
Question screens
ASSESSMENT completion confirmation SCREEN
A key screen where the user is introduced to the "game", can sign up and/or choose to read a report
on their assessment result
Before
After
Confirmation screen
ASSESSMENT REPORT SCREEN
The report had a drastic redesign in order to show easier readability for the user.
Before
After
Report screen
(assessment results)
NEXT STEPS
Incorporating all
of the flower icons for each level
Complete testing
of all the onboarding
Add gamification
element to the rest of the app