Gingerroot.io

iOS Native App concept Design for Teen mental Health

 

My team of 4 was tasked with designing a version of Ginger.io for teens. Ginger.io is a native app that allows users to connect to emotional health professionals and offers support through coaching, teletherapy, telepsychiatry, and guided self care. The service that Ginger provides has the potential to be a helpful tool for teens. They are at a pivotal period in their lives, and don't always have someone to confide in.

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


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.

 
 

Empathizing With Teenagers

Research

METHODS

  • User Interviews

  • Competitive Research

  • Affinity Mapping

We started with researching the current market and competitors. We then set up user interviews with teens and their parents. It became clear in our first interviews with teens that they did not want to talk to their parents about their mental health and valued a sense of privacy from their parents.

After researching mental health stigmas amongst teens, a lightbulb went off. Why not offer GingerRoots through the school and eliminate parent involvement altogether?

With this idea in mind, we added school counselors and therapists to our list of interviewees. This also allowed us to get a better feel for how to communicate with a population that struggled to speak with us about this stigmatized subject.

Insights from Teens

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

Our Users

 

Design

METHODS

  • iOS Human Interface Guidelines

  • Heuristic Analysis

  • Design Studios

After exploring Ginger.io features and identifying the ones that could also work for teens, our team did a 20-minute design studio, in which all members sketched out a user flow for each of our personas.

To our surprise, our sketches came out very similar. We chose the best features of each sketch, and then began wireframing each of the flows.

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

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.

 

The Prototype

 
 
 

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.

 

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.

Want to see more?