for the mental health app Happy Being
Improve the conversion sign
up rate and reduce the bounce rate during onboarding
4 UX Designers
and Dev team
UX site audit
deliverables need to be initially designed for a desktop website, users are directed from there
to download the
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
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?
Existing research has shown that
users find the onboarding assessment questions too long resulting in a 70% bounce rate during onboarding
of the main competitors’ onboarding
is a mobile app uses daily activities & games
that helps people live a emotionally healthy life
Easy onboarding that compells the user to sign up at the end of assessment.
Big fonts, easy to read questions.
Games are bright fun.
Games are hard to find
is the #1 mobile App For Mental Fitness. Famous For Its Guided Meditations & Sleep Stories.
Offers limited features without signing up
Clear and easy to navigate interface
Language is simple
Doesn’t offer features other than auditory exercises
has more than 20 million users in over 190 countries. Offers hundreds of guided meditations.
Engaging animation onboarding propels the user forward
Must sign up before doing any assessment
Main takeaways from heuristic assessment
for completing onboarding
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:
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
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)
Key confirmation page
*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
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 nutrue their own mental health-
a Wellbeing Garden.
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
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
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.
The stakeholders enthusiastically bought into the “garden” concept.
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 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.
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
The flower icons were placed and I edited the text description of each assessment for more clarification.
ASSESSMENT QUESTION SCREENS
I re-wrote the introductory track questions for UX clarity, enlarged the text size and placed the Personal Relationships flower icon
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
ASSESSMENT REPORT SCREEN
The report had a drastic redesign in order to show easier readability for the user.
of the flower icons for each level
of all the onboarding
element to the rest of the app