Gingerroot.io

iOS Native App concept Design

01. Overview

The Problem

Teens need a better way to connect to mental health professionals who they can trust won’t make them feel like an outsider.

The Solution

GingerRoot.io would be designed to appeal to a younger audience and will ensure teens that all information that they share remains confidential.


Tools

  • Sketch

  • Adobe Illustrator

  • InVision

My Role

  • Competitive Analysis

  • Personas | Journey Map

  • Wireframes

  • UI Design

 
 

2. Research

METHODS

  • User Interviews

  • Competitive Research

  • Affinity Mapping

We found out quickly that talking to teenagers is a lot harder than you’d think - especially when it comes to a stigmatized subject like mental health. While Ginger.io is offered to employees through their employer, we figured that offering GingerRoot.io through the school would be better received by teens.

Insights from Teens

I want to know that what I’m feeling is normal
I want privacy from my parents
I want to be able to customize my experience

3. Challenges

ELIMINATING A PARENT INTERFACE

Ginger.io is currently offered to employees and paid for by their employer. The interface for teens would be offered through their parents who are registered for Ginger.io. In our interviews with teens, we quickly discovered that they don’t want their parents involved in their mental health.

CONNECTING WITH TEENS

Teens want to feel and be perceived as normal. Trying to connect with them over a stigmatized subject proved to be difficult. We were able to connect with teens on the subject, but found that teen girls were more open to speaking with us than teen boys.

 

4. Structuring a solution

MEthods:

  • Journey Mapping

  • App Mapping

  • User Personas & Flows

  • Design Studios

  • Wireframing

To figure out the best way to structure our app so that it still resembled Ginger.io for adults, but appealed to a new demographic of teens, we created a journey map and app map for current Ginger.io users.

Once we had a good understanding of the user’s journey and the current flow of screens in Ginger.io, we tweaked a few things that wouldn’t appeal to teens, like financial workshops, and added in features for teens to feel safe, heard, and confident in their mental health app.

 

5. Design

METHODS

  • iOS Human Interface Guidelines

  • High-Fidelity Mockups

  • Heuristic Analysis

Tools

  • Sketch | InVision

  • Adobe Illustrator

We decided to design GingerRoot using iOS HIG (Human Interface Guidelines) since we found that most of our users had iPhones rather than Android devices.

Ginger.io has its own design, not following iOS or Material design guidelines. We made a few tweaks to input fields, buttons, and our taskbar to make GingerRoots an iOS app.

Ginger.io current design > First Iteration Wireframe > Second Iteration HIG Mockup

 

6. Prototype

Lula’s flow - onboarding, mood tracking, improve your mood toolkit

 
User Persona.Lula.png
 

7. User Testing

 

We had the privilege of testing our final mockup at HomeAdvisor’s Usability lab. Dayna represented the team in this process. She watched the user test our prototype from behind a one-way mirror. Following the test, she was able to speak with the user and the HomeAdvisor UX Team and helped us to get ideas for the next design iteration.

 

8. Next Steps

Update the toolkit icon

Feedback from user testing showed that the toolkit icon looked more like a settings icon. To improve heuristics, we would change the icon to something to tell the user that they were entering into the “improve your mood” part of the app.

Improve the learnability of the tab bar

Testing showed that users preferred the options in the taskbar displayed in the same order as the “What would you like to do?” screen. The UX team from HomeAdvisor suggested removing the screen altogether and replacing it with a tutorial feature, highlighting and explaining each of the options on the tab bar.

Build your own toolkit

In our interviews, we found that teens wanted to be able to customize their experience. Rather than asking the users if the task they completed made them feel better, we would introduce a “save” feature allowing the user to save that exercise to their personalized toolkit. We would also include an option to upload photos or videos into the toolkit.