Together
Designing a daily wellness app that helps high school students manage their mental health.
Overview
During my work with the Soma Reality team, I worked on designing new features for their mobile product, Halfgram, as well as internal tools to improve workflow efficiency.
Halfgram is a social media platform that encourages sharing real, everyday personal stories through text and audio-based storytelling.
This case study discusses one of my projects, where I was tasked with redesigning our internal moderation system used to track activities that fail to adhere to community guidelines.
As the Halfgram user base continues to expand, our team recognized the need to create a safe and open community, and the admin console plays a crucial role in achieving that goal.
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 struggle
with hunger, schoolwork, and experience emotional abuse in their homes.
The Challenge
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.
I conducted user interviews with high school students and I asked 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."
🙋🏽♀️
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."
🙋🏻
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"
🙋🏼
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. View the apps below…
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.
Students struggle to juggle college entry, academic endeavors, extracurricular activities, and social interactions.
In-school mental health facilities and online resources still fall short of their demands.
Students long for a guide to assist them anytime there's a problem.
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."
🧠 Worries
Having too much on their plate and not having enough time to do what they want
Feeling overwhelmed and confused with trying to balance their schoolwork, social life, and planning out their future
Feeling the pressure 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
✨ Needs
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
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…
Gain better control of emotions
Provide a scientifically proven method to regulating emotions
Contact counselors quickly and easily
Provide a robust messaging and scheduling platform
Find targeted and relatable 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.
🟢 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.
User flows & interaction design
Streamlined review process
To understand the current system's shortcomings, I conducted user interviews with the lead engineer, and fellow designers. They highlighted that the current design was outdated, unintuitive, and missing key information that helps moderators do their job. Additionally, new community features required additional functionality in the moderation system.
Understanding the typical moderator
Collaborating closely with the development team was essential to ensure alignment and feasibility. I held bi-weekly meetings with our lead developer, Jeffrey Li, to stay aligned with our goals and understand the technical constraints across all functions of the design. I also proposed solutions to potential roadblocks.
How might we help moderators make informed decisions and improve their work efficiency when monitoring user submitted reports?
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.