Together

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

Role

UI/UX Designer
UX Researcher
Brand Designer

Timeline

Jan. 2023 - March 2023

Tools

Figma
Maze

motivation

Here is the reality…

According to CDC statistics released in March 2022…

More than 1 in 3

high school students experienced poor mental health during the pandemic.

Nearly 1/2

of students felt persistently sad or hopeless for much of their time.

Many students struggle

with hunger, schoolwork, and experience emotional abuse in their homes.

The problem

Schools and educational institution don't provide an effective way for high school students 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.

The solution

Together is an app that provides high school students with tools to improve their mental health.

They can regulate their emotions through mood tracking and journaling, ease of communication with counselors through instant messaging, 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. This app directly integrates itself with the student's academic and personal life.

The Product
  1. 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.

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

  1. Communicate

Send a message to your counselor or other faculty members anytime.

  1. Schedule

Make an appointment to see your counselor virtually or in-person whenever it is convenient.

Discovery

Setting the Scene

Imagine being a high school student today. My goal was to dive into the challenges they face in their daily lives and understand the importance of mental health support in their home and school environments.

During my research, I explored the following questions:

  1. What are the main challenges that teens are facing right now?

  2. What support do teens need to thrive at home, in school, and in other areas of their lives?

  3. What barriers prevent teens from seeking help for their mental health?

  4. How are institutions like state and local governments, schools, and non-profit organizations contributing to the improvement of teen mental health, and what gaps exist in their efforts?


Taking a Deep Dive

To validate my initial hypothesis and explore their pain points, I distributed a survey to four high school students. In addition, I conducted secondary research on mental health in high schools students today post-COVID and a comparative analysis on current apps on the market.

What students say…

Based on user research surveys, this is what I found.

πŸ™‹πŸ»β€β™€οΈ

The top three things I believe high school students struggle with right now is…

"mental health, pressure to succeed, time management."

πŸ™‹πŸ»

If I'm struggling with something…

"I tend to listen to music and just vibe. I also enjoy baking as a coping mechanism, especially late at night when no one can bother me. I’ve found that writing/typing out my emotions help too"

πŸ™‹πŸ½β€β™€οΈ

Honestly, to help me succeed in my life…

"sometimes I just need a long hug or just comforting words."

πŸ™‹πŸΌβ€β™‚οΈ

Something my school can do to improve is to…

"lower expectations. Be more understanding of outside issues that impact may our learning - household relationships, work, etc."

πŸ™‹πŸΌ

Schools can use technology to improve the wellness of students by…

"providing online resources available to calming spaces and text/call crisis centers. They should have links to websites explaining different topics like mental health, mental illness, coping strategies, etc."

πŸ™‹πŸΏβ€β™€οΈ

Schools should take more responsibility for students’ mental health because…

"students spend a majority of their time at school. A lot of energy goes into their education and they should feel supported by an institution that contributes to a lot of their stress"

Current apps lack targeting

I went hunting for apps on the market that were recommended for high school students to help them deal with their mental health. Overall, these apps are all successful in their own function but I found that these apps don't tailor to the high school student experience.

Betterhelp

🟒 Pro

  • Integrated calendar for ease of scheduling

  • Journaling function and ability to share entries

  • Emergency services

  • Messaging

πŸ”΄ Con

  • Not easily accessible for teens

  • Difficult to find an appropriate therapist

  • Paid service

Bubble

🟒 Pro

  • Onboarding process

  • Connect with a parent or guardian as an accountability buddy

  • Games & activities

  • Resources for both parent and the teens

πŸ”΄ Con

  • Unknown app

  • Only for IOS users

  • No teen resources

  • No direct access to a mental health professional

Headspace

🟒 Pro

  • Specializes in meditation

  • Easy to use for people who are new to meditation

  • Includes mediations for all age groups

  • Continues to be a top rated mental health app

πŸ”΄ Con

  • Application is purely for meditation

  • No direct contact with a licensed professional

Youper

🟒 Pro

  • Daily routine of activities to check in and set goals

  • Recommended activities

  • AI chatbot with user

  • Anxiety, depression, PTSD, etc. quiz and bimonthly check-in

πŸ”΄ Con

  • No direct contact with a licensced health professional

  • Requires a bit more of self-awareness

  • Paid, $75 a year, not affordable for teens

The common challenges for students

After putting together all of my research, I grouped my insights together and identified patterns that are important to recognize.

β€”> Read my in-depth research process (coming soon)

1.

Students struggle to juggle college entry, academic endeavors, extracurricular activities, and social interactions.

2.

In-school mental health facilities and online resources still fall short of their demands.


3.

Students long for a guide to assist them anytime there's a problem.


4.

Students displayed keen interest in a standard health check-in on a mental wellness platform that they would use.

The deep-rooted insight is

schools should be actively involved in helping high school students manage their mental health because it is a primary cause of their emotional distress.

In order for me to visualize this statement more deeply and the following steps in my design thinking, I developed Lia Jane.

identify & synthesize

The Life of Lia Jane

Lia Jane is a 17-year-old high school student. She is feeling very overwhelmed with balancing college applications, getting involved in school, keeping up with her grades, and staying in touch with friends. She wants to reach out to a school counselor for some guidance.

"[I worry about] getting into college, filling out college applications on time… Grades and keeping up with classes keeps me stressed because I can't allow myself to get a B… I also worry about the state of some of my friendships… A lot of them battle things like anxiety and depression so there's a lot on their plates."

🧠 Fears, frustrations and worries

  • Having too much on their plate and not having enough time to do everything they want to do

  • Feeling overwhelmed and confused with trying to balance their schoolwork, social life, and planning out their future

  • Feeling the pressure of people around them to succeed

  • Don't know how to manage their thoughts and emotions

  • Can't get in touch with my counselor easily with their busy schedule

✨ Wants, needs, and hopes

  • Wants to get accepted into a good college

  • Wants to keep up with grades in classes along with juggling sports, clubs and family affairs

  • Wants to be close to their group of friends

  • Wants to feel happy and fulfilled in their lives

  • Wants an easy way to contact their counselors

  • Want people to understand their experiences

How Might We

provide schools with a platform to help high school students get mental health treatment easily and effectively?

IDEATION

The opportunity

Based on research and synthesizing them as Lia Jane's pains and needs, I created a set of core experiences that will help guide the direction of features so that the product stays focused on the problems I need to solve. With my solutions, Lia Jane will…

1/ Gain better control of thoughts and emotions

Provide a scientifically proven method to regulating thoughts and emotions

2/ Contact counselors quickly and with ease

Provide a robust messaging and scheduling platform

3/ Find targeted and relateable resources

Provide a rich library of resources tailored for student experiences

Possible features

Based on the 3 core experiences, I compiled a list of features that will help bring it alive. I sorted them into a tier list to determine their importance for the MVP.

β€”> Detailed feature mapping (coming soon)

🟒 Must-have

  • Onboarding quiz

  • Daily check in

  • Mood tracker

  • Messenger/chat

  • Dashboard

  • Resource library

  • Video call with counselor

🟑 Nice to have

  • Journaling guide

  • Emergency services

  • Habit tracker

  • Access through desktop

  • Informal depression and anxiety assessment

🟠 Surprise, Delightful

  • Shareable worksheets

  • Meditation guide

  • Breathing exercise guide

  • Games and activities to stimulate brain

🟣 Can come later

  • Parent/guardian mental health materials

  • Parent/guardian view

  • Ability to chat with teachers

  • Integrated class calendar

Information Architecture

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.

execution

Mapping interactions

After clarifying my feature ideas and narrowing down to the must-have features for the MVP, I mapped out Lia Jane's paths and possible interactions for those features.

Wireframing

Early designs

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. Scroll to the right to view the wireframes.

UI Design

Bringing it to life

Testing & Iteration

Completion & satisfaction = A+

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!

πŸ€• Pain points

  • 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

  • Color scheme is aesthetic, 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.

Feedback highlight

I asked a participant from my preliminary user research questionnaire to participate in the usability test, and this was her response. It's an incredible affirmation that my efforts are indeed on the correct path and that they can genuinely bring about change. My little brother helped me gather users at his high school and this is a screenshot he sent me of his conversation with that student.

Interactive Prototype
reflections

Conclusion

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:

  1. Increase awareness of mental health in schools

  2. Increase usage of the app by faculty and students

  3. Increase student and counselor appointment bookings

  4. Improvement in student performance through academics, athletics, and at home

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

Say "Hello!"

joneiljescobar@gmail.com

|

Β© 2024 Joneil Escobar

Say "Hello!"

joneiljescobar@gmail.com

Β© 2024 Joneil Escobar