top of page

Together

A daily wellness app that helps high school students manage their mental health.

My role: UI/UX Designer, UX Researcher, Branding Design

🤔 What is the problem?

High school students need a way to treat and manage their mental health struggles. They face issues, such as the inability to express their feelings in their daily lives; lack of and scattered mental health education; inconsistent communication with faculty; and inconvenient counselor scheduling processes.

Context

🤝 The Solution

My solution was to create Together, an app that provides high school students with tools to regulate their emotions through mood tracking and journaling, ease of communication with counselors, and ease of scheduling counselor appointments, all in one platform. In addition, the app provides resources where students and faculty can learn about various mental health topics.

✨ Tailor your needs

Securely sign in and go through an onboarding questionnaire that includes a daily check-in. The responses will be given to your counselor and will customize your resources tab.

✨ Track your mood

Privately record your thoughts as a journal entry and indicate your emotions. You have the option to share your responses with your counselor.

✨ Communicate

Send a message to your counselor or other faculty members.

✨ Schedule

Make an appointment to see your counselor virtually or in-person.

Click through the prototype below👇🏻

🏁 Where it all began

Mental health is a topic that is important to me and I wanted to build something that can help people improve this aspect of their life that tends to be overlooked. High school students became my focus for this project. Time has passed since my high school days, so I did some research to learn more about the current state of mental health in teens. Here’s what I found:

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 homes.

In brainstorming possible solutions, I asked myself this question:

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

🧐 Conducting Research

Going into the user research study, I knew that 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. I wanted to make my app tailored to students and their problems.

My goal was 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.

And so I throughout my research, I asked the following 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?

Research

RESEARCH FINDINGS

💻 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.

RESEARCH FINDINGS

🏇 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

RESEARCH FINDINGS

👩🏻‍🎓 User Surveys: Understanding 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.

🧐 After research, 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.

I had a clearer picture of the kind of student I will be designing for.

🥗 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. Many high school students like Lia Jane are balancing multiple things at once which is not always easy to manage. They want to improve how they function in their daily lives. They want someone to talk with and to keep them accountable to achieve that.

Define

📱 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

By this moment of my process, I had an idea of what features to build. It was time to organize the information by creating a sitemap. I referred to Telehealth and other mental health aid apps to map out the information.

TAKING A STEP BACK

🎯 Identifying Projects Goals

Before I could continue onto create my user flows, I took a step back to recognize how I can build and measure success while considering the stakeholders and institutions (governments and schools) involved in delivery.

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 student

  • 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

🙋🏻‍♀️ User Flow

Okay, now back to designing... 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.

Interaction

✔️ Task Flow

Okay, now back to designing... 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.

capstone 3 task flow.png

🏗️ 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.

🎨 Creating the UI Design

I started off by creating the 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.

UI Design

As for the logo, I aimed for simplicity. 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.

capstone 3 logo.png

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.

In my process of creating my high-fidelity designs using my style guide, I was able to also put together my UI Design Kit at the same time.

In the end, I was able to create simple, clean, and quite purple high-fidelity screens.

🧪 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 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.

As a result, all students completed the tasks!

Testing & Iteration

🤕 Pain Points

Here are possible pain points I had to consider:

​

  • Button states need more clarity

  • Overlay screens interactions were confusing

  • 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.

🎉 Successes

The students had a lot of positive feedback:

 

  • The 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. Afterwards, 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.

In the end, this came to fruition👇🏻

🛬 Conclusion 

Overall, I felt satisfied with the results from my journey of creating Together. I was very intentional with the research and I believed that getting direct input from the students were very important to making 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?

1. Let the research lead the design. Speaking directly to current students allowed me to understand their real experiences which gave me context on how to create an app that wil 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.

2. 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.

3. 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 the product.

bottom of page