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
Mentor
Tools
Figma
Maze
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
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 anytime.
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:
What are the main challenges that teens are facing right now?
What support do teens need to thrive at home, in school, and in other areas of their lives?
What barriers prevent teens from seeking help for their mental health?
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.
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?
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.
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
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
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:
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.