Together is an app that helps high school students journal, track their emotions, and communicate and schedule appointments with their counselors, all in one platform. The vision of the app is inspired by how we can heal together with the help of another person. The app is geared towards high school students who are struggling to manage their day-to-day and would like a convenient way to access mental health resources.

Role: UX/UI Designer, UX Researcher, Branding
Client: DesignLab
Duration: 80 Hours
Tools: Figma, Maze

End-to-end Mobile Application

Together

Context

According to CDC statistics released in March 2022, more than 1 in 3 high school students experienced poor mental health during the pandemic. Nearly half of students felt persistently sad or hopeless. Many students struggle with hunger, express difficulty in schoolwork, and experience emotional abuse in their home.

Problem

I found that high school students needed a way to treat and manage their mental health struggles, and faced issues, such as: the inability to express how they truly feel in their daily lives; lack of and scattered mental health education; inconsistent communication with faculty; and inconvenient counselor scheduling processes.

Solution

The app provides high school students the ability to journal, track their emotions, and communicate and schedule appointments with their counselors, all in one platform. In addition, the app provides resources where students and faculty can learn about various mental health topics.

Question

How might we help high school students get mental health treatment easily and effectively?

My Design Process

Research

There are many mental health apps currently available in the app store. The functions range from CBT-backed therapy, emotion trackers, journaling, meditation, and habit trackers. On the other hand, there are few apps that are targeted toward teens.

Goal

The goal is to understand the current struggles of high school students in their everyday lives and the value of mental health aid to their home and school life.

Questions

What are teens currently struggling with?
What do teens need to help them succeed at home, school, and in other aspects?
What limitations are preventing teens from seeking help?
How are institutions such as state and local governments, schools, and non-profit organizations helping to improve teen mental health? What are they lacking?

Methods

Secondary Research
Competitive Analysis
Provisional Personas
User Survey

Read full user research plan

Initial Research Results

Understanding Teen Mental Health

Secondary Research

I learned about the context of teen mental health today in the United States, including current government action, school efforts to support students and current issues students are facing in their daily lives. These insights are important to understand the current state of teen mental health and what work is currently being done to help students. I recognize that there is a real need for support for mental health for kids especially post-covid.

Competitive Analysis

I took a look at four mental health applications. I found these three important commonalities:

The ability to connect with AI or mental health expert
Provides an educational aid or improvement strategy
Provides a chat feature where the user able to communicate with counselors

Secondary Research

Competitive Analysis

User Survey Results

What I learned from students

I sent a Google survey to 4 current high school students all between the ages of 15-18 years old to answer my research questions stated above and here is what I found.

Recognizable Patterns

All students struggle with balancing completing college applications, academics, extracurriculars, and relationships
All students utilize and are aware of the mental health resources provided by the school and the internet, but they still struggle with their day-to-day lives
All students wish they had someone to help guide them when there is a problem
All students expressed interest in a daily check-in feature in a mental health platform they would use

What now?

Using my secondary research, competitive analysis, provisional personas, and user survey results, I was able to understand that students struggle to maintain a good balance in their lives. They also understand the importance of mental health and take action in improving that aspect. I learned that kids are aware of the resources but they do not know how to quickly access some. With the support of people, teachers, and institutions, and synthesizing all of this research, I have concluded that there is a real need for an app to bridge and support kids getting help.

Affinity Map from User Survey

Define

Many high school students are balancing multiple things at once which is not always easy to manage. They want to improve how they function in their daily lives and they want someone to talk with and to keep them accountable to achieve that.

Crafting a Persona

I developed Lia Jane, a high-achieving student persona, explaining her habits, needs, and motivations when it comes to her home and school life.

Product Roadmap

Taking into consideration user survey responses and the persona development of Lia Jane, I organized a tier list of features to include when I start wireframing the application.

Sitemap

I created a sitemap to organize information within the app. I referred to Telehealth and other mental health aid apps to map out the information.

Project Goals

Advocating for the student user

My research allowed me to recognize how I can measure success from an institutional perspective (government and schools).

User Goals

Easy appointment booking process
Centralized mental health resources
Instant-messaging between students and faculty
The ability to express their innermost thoughts and feelings

Business Goals

Increase awareness of mental health in schools
Increase usage of the app by faculty and students
Increase student and counselor appointment booking
Improvement in student performance through academics, athletics, and at home.

Technology Goals

Information is secure and confidential
Allows for accessibility
Includes appropriate and high-quality imagery, video, and other media
Includes digestible information so as to not overload the page

Interaction Design

I envisioned the app to have multiple functionalities, all helping the typical student in their mental health journey so that they have everything they need to feel supported.

User Flow

I first storyboarded the user journey. Lia Jane downloaded the app for the first time and is going through the onboarding process. She answers a series of questions to send an initial assessment for her counselor and to have a customized library of resources. She then schedules an appointment with her counselor.

Task Flow

I decided on 4 major functionalities of the application and went more in-depth on the pathways. This gave me clarity on how many screens to design and where each screen will navigate.

Wireframing

I started out my wireframes by looking at Telehealth and other mental health applications as inspiration. My main focus was to make sure each element was clean and clear like any other healthcare app for accessibility purposes. Overall, my first drafts helped me map out the paths without getting too much in detail.

wireframe screens visual - capstone 3.png

UI Design

Mood Board

I was drawn to cool pastel colors like lavender and muted natural colors. Purple evoked a calm yet comforting feeling. I liked the idea of softness in apps that played with gradients. Overall, I envisioned the app to be clean and light yet, easily accessible.

Logo Design

I wanted the logo to be simple. Since this app tracks emotions, I started out with a circle from a basic emoji. The results came to a circle with a smile or others can see it as a half-full cup to represent positivity.

Style Tile

Combining all of my inspiration, I created a style tile for the app using images that showed the colors I had in mind and that represented a calm and comforting feeling I envisioned the app to have. Purple became the primary color.

UI Kit

Testing & Iteration

Inserting the UI elements into my wireframes led to multiple iterations of my high-fidelity prototypes after a few feedback sessions with peers. Once I finalized the screens to the best of my ability, I set up a usability test.

Test

I conducted a usability test through Maze and gathered insights from 4 students who had completed the initial research survey. My goals were to test the ease of use in navigation, observe the clarity of user flow, gather feedback on the UI, and observe any area of confusion or hesitation.

Results

All students completed the tasks.

Pain Points

Here are possible pain points I had to consider:

Button states need more clarity
Confusing overlay screen interactions
The meaning of icons was unclear
Continuing to capture the attention of users as this application deals with heavy topics
Accessibility in colors, the use of voice recording, etc.

Success

The students had a lot of positive feedback:

Color scheme is aesthetic and calming
Flow is straightforward, simple, and user-friendly
The organization is clean and neat
The interface is professional-looking
Users were enthusiastic about the possibility of the application being used in real life

Changes

Overall, I was glad that the app was easy to use with a clear flow. Afterward, I made only minor cosmetic changes such as clarifying button styles, updating the weight of the icons for consistency, clarifying the interactions of the overlays, and adding written text to the lower navigation icons for accessibility purposes.

Onboarding

Sending a message

Daily Check-in

Scheduling an appointment

Conclusion

Overall, I felt satisfied with the results of my journey of creating Together. I was very intentional with the research and I believed that getting direct input from the students was very important to make this app successful.

Measuring Success

As I take a look back at my project goals, my hope for the app is to ultimately create a positive impact on the students and institutions by accomplishing the following:

Increase awareness of mental health in schools
Increase usage of the app by faculty and students
Increase student and counselor appointment bookings
Improvement in student performance through academics, athletics, and at home
Students give feedback that they feel supported and see improvements in their everyday life

What did I learn from Together?

This project was majorly research-driven. Speaking directly to current students allowed me to understand their real experiences which gave me context on how to create an app that will be relevant and usable for the current generation. Throughout user research and usability testing, students were really excited to have this resource. They clearly understood what this app meant for them and how it can help their peers.

On the other hand, It’s easy to get caught up in creating an app only for the user themselves. Having a discussion about how the app will impact businesses and institutions is just as important because I can see how succeeding from a business perspective will help drive the development of the app even forward as there will be more hands involved.

When it came to designing the interface, accessibility, and ease of use reigned above aesthetics because healthcare apps are out there for everyone to use. In the future, I want to understand more about healthcare technology and what designers can do to make sure all kinds of users can benefit from the product.

I wanted to make sure to make every interaction and flow as straightforward, digestible, and as easy as possible from a teenager’s perspective. In addition, I can see how micro-interactions can make the app more enjoyable to use. Since Together deals with heavy mental health topics, I hope that the interface can continue to create a calm and inviting vibe for the user.

My Design Process

End-to-End Mobile Application

Together

An app that aims to improve teen mental health, all in one platform.

Website Redesign

Mainstreet Art Center

A modernized look to improve the online class registration experience.

Adding a Feature

Spotify Mixtapes

A new a feature that brings out the nostalgia of the past

Responsive Web Design

Zeit Travel

Booking a new kind of travel experience