GingerRoot.io

iOS Native App concept

Team project

Background:

Ginger.io is an app commonly provided by employers to help users connect with health care professionals. It makes it easy for employees to get the support they need. The app offers on-demand emotional health coaching, teletherapy and guided self-care.  

 

The Opportunity:

Ginger.io had made considerable headway in the adult market, and they see a chance to expand their services to youth ages 11–18. Their business model would be extremely beneficial for a young demographic going through a delicate time in their lives. Unfortunately, many teens lack proper role models in their lives. This is where GingerRoot.io is hoping to help.

Objectives:

  • Find a way to get the targeted demographic motivated to engage in therapy

  • Design an interface that is welcoming but not intrusive

  • Rebrand the app so that it is appealing to  the targeted demographic

  • Get the targeted demographic to trust the care professionals and open up to them

  • Follow HIG (Human Interface Guidelines)



GingerRootMockups.jpg

Methods:

User Research

Competitive Analysis

Visual Design

Heuristic Evaluation

Usability Testing


Tools:

Sketch

InVision

Illustrator

My role:

Competitive analysis

Constructing Interview questions

Wireframes | UI design

Duration:

Two weeks

 
 
Gingerrootmock.jpg

The struggles

  • Finding a way to get teens on board

    • Ginger.io is commonly supplied through employers, the teen interface would have to be given to teens by their parents who are already members of Ginger.io

    • Figuring out a way to offer teens with a self help app in a manner that didn’t feel forced was our first challenge to overcome

  • Actually talking to teens

    • The last thing that this specific demographic wants is to feel abnormal, talking about such a taboo topic wasn’t going to be easy

  • Ginger.io does not follow iOS HIG

    • Part of our prompt was to create the app following either HIG or Material Guidelines

    • Had to make the UI feel like Ginger.io while following iOS standards

 

Research

 
affinity.jpg

Our first plan of action was competitive analysis, we wanted to take a deeper look into similar tools currently on the market. We checked out apps like Headspace and Calm. This gave us a good idea of what was working and what clearly wasn’t for teenagers interacting with self-help apps.

Next, we talked to actual teens. After a few interviews we found a common trend: teens  do not want to talk to their parents about their mental health. Therefore, having the parents being the only recourse for teens to access the app seemed like it may be a dead end.

After taking a deeper dive in to mental health stigmas amongst this demographic, something clicked, Schools could offer GingerRoot as an optional tool for teens to utilize it if they choose.

We canceled our interviews with parents, switching our focus to school guidance counselors.

Things to keep in mind:

  • Teens don’t want their parents involved in their mental health

  • Teens don’t want to feel abnormal about their feelings

  • Teens want to be able to customize their experience

  • Guidance counselors need a way to gain trust with teens

  • There is certain nuance to language we should use when communicating with teens

Journey map created by Colin Tackett

As a team, we decided to put Ginger.io in to a journey map to better understand how the existing app worked. This gave us a really good idea of how users were feeling while using the app.

From there we were able to find opportunities for how we could improve user satisfaction on our app. We found this exercise to be extremely helpful. It allowed us to figure out, step by step, what was working with Ginger.io and what was not.

By creating a journey map we realized that teens doubt privacy, and by driving app access through their parents threatens confidentiality and stigmatizes their experiences.

Teens value their developing autonomy, they must have control over initiating a chat so they can build trust in the app.

The in-app plan on Ginger.io is tailored to common adult stressors, bringing in content for teens will make planning more relatable.


 

Personas

Based on our takeaways we landed on two personas, the high risk and the low risk user.

Persona one: Low risk user:

  • Sixteen years old

  • Relocated to a new school

  • Typically confides in her friend

  • Feels lonely and sad

  • Wants to have privacy

  • Wants to feel like she is in control

  • Wants to be able to track her progress

Persona2.png

Persona two: High risk user:

  • Thirteen years old

  • Parents are going through a nasty divorce

  • Feels like he is caught in the middle of their arguments

  • Doesn’t feel like he can talk to either one of his parents about how he is feeling

  • Unsure of who to turn to

  • Not sleeping well at night

  • Doesn’t want to talk to his school counselor

 

Design

Adapting Ginger’s UI to iOS standards

As a team we decided we wanted to stay loyal to Ginger.io’s style guides. After studying the app we discovered that Ginger.io did not follow iOS standards or Material guidelines. In our interviews we found that most teens own iPhones so knew we should use HIG.It turns out, iOS has many, many rules to follow.

Some of the main features we adapted:

  • Shape and placement of buttons

  • Modal shape and functions

  • Sliders

  • Tool bars

  • Icon style

  • Typography

Keeping the color scheme and simple style throughout the app was easy to do.

 
 
 

Testing

We were lucky enough to go and test our product at the HomeAdvisor Research Lab. User testing was performed by HomeAdvisor’s UX team, while our team member Dayna stood behind a two-way mirror. She was able to observe first hand how the user interacted with our product and asked the testers questions about our version of GingerRoot following the demo.

The major takeaways we gathered during user testing and iterations we would make to during phase two were:

  • Tools button looks like a settings button:

    • Tools button is represented by a hammer and wrench

    • Users assumed this would take them to settings

    • Instead of calling the section “Tools” call it “Mood Booster” or “Improve Your Mood”

    • Change the icon to a smiley face to improve heuristics

  • Improve the task bar:

    • Users found that the task bar was confusing

    • Preferred that that task bar was in the same order as the “What would you like to do?” page

    • Another user recommended getting rid of the screen completely and replacing it with a “walk-through” feature explaining the task bar

  • Make tool kit customizable:

    • User suggested a save button for videos she watches that improve her mood

    • She wanted to be able to upload her own videos to her toolkit

    • From interviewing we found that teens want to feel in-control

One out of three teens interviewed where interested in tracking their moods.

Research showed that mood tracking was ineffective, we viewed it as an entry point into using the app and a way to gain trust with teens.

Our hope is that In an emergency situation teens would already be comfortable with using GingerRoot.io and could easily depend on the chat feature to seek help.

Trust was a huge point that teens valued in a mental health app and we knew that was something to be built over time. We decided to add the mood log so teens could see that the app was tracking how they were feeling on a daily basis. After a week of entries they could compare their moods day-by-day.

 
 

The final outcome