Screen Shot 2021-03-15 at 1.10.53 PM.png

Case study
for the mental health app Happy Being

 

​​


 

Screen Shot 2021-03-15 at 1.11.47 PM.png

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

Screen Shot 2021-03-15 at 4.05.52 PM.png

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

Screen Shot 2021-03-15 at 4.32.15 PM.png

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

Screen Shot 2021-03-15 at 4.32.48 PM.png

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)
 

2.png

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

Screen Shot 2021-03-16 at 5.06.52 PM.png
  • 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.

game.png

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

2.png

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

Screen Shot 2021-03-17 at 2.09.02 PM.png

GAME ASSETS
I created a unique flower icon and base color for each assessment

flower.jpg

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.

Happy being menu  old


After

Screen Shot 2021-04-12 at 1.59.16 PM.png


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

Screen Shot 2021-04-12 at 2.24.38 PM.png


After

Screen Shot 2021-04-12 at 2.25.10 PM.png
2.png

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

Screen Shot 2021-04-12 at 3.21.49 PM.png


After

Screen Shot 2021-04-12 at 3.22.04 PM.png
2.png

Confirmation screen

ASSESSMENT REPORT SCREEN

The report had a drastic redesign in order to show easier readability for the user.


Before

Screen Shot 2021-04-12 at 3.41.35 PM.png


After

Screen Shot 2021-04-12 at 3.41.55 PM.png
2.png

Report screen

(assessment results)

Screen Shot 2021-04-12 at 1.59.16 PM.png

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