Project overview
The product:
Young Mind is a Tenderloin Community Organization focused on an individual healthy mind. The organization needs a tool that helps people learn about emotions and empathy that can have a profound impact on their life down the road. The organization’s primary target users include kids, teenagers, and adults, who are concerned with emotion and empathy and would like to learn more about what they can do to understand themselves.
Project duration: Nov 2021 - Dec 2021
The problem:
San Francisco Tenderloin is well-known for homelessness, drugs, and mental illness, so the mayor has declared a state of emergency. Mental illness considers being the foundation of the crisis in the Tenderloin neighborhood.
The goal:
Design an app that will educate teens and young adults about emotion, so they can manage their reactions and hopefully feel empathy for others.
My role:
UX designer leads the app and responsive website design from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
-------------------------------------------------
Understanding the user
User research: summary
I used information from the National Center on Safe Supportive Learning Environments on emotional safety to develop interview questions. Most interview participants reported being unaware of their feeling. Others are aware of them but have no idea how to express them or deal with them. The research shows that people are interested in learning more about emotions and empathy because they believe it is a foundation of a mental health crisis.
Persona: Zoey
Problem statement:
Zoey is a high school student who wants to express her feeling and emotions correctly. Therefore, she could communicate better and empathize with others.
Persona: Angela
Problem statement:
Angela is a new parent and full-time consultant at the City College of San Francisco. She wants to learn more about emotions and empathy to provide better consultant services to the students.
-------------------------------------------------
Starting the design
Competitive audit
An audit of a few competitors’ products provided direction on gaps and opportunities to address with the Young Mind app.
View competitive audit and competitive report
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on onboarding (getting users to understand their state of emotion) and emotions through stories and definitions.
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Young Mind app. These designs focus on getting users onboard and seeking feedback on the learning process.
Low-fidelity prototype
To prepare for the usability study, I created a low-fidelity prototype that connected the user flow of onboarding and learning about emotions.
View Young Mind low-fidelity prototype
Usability study: parameters
Usability study: findings
-------------------------------------------------
Refining the design
Mockups
Add a skip button so that users have options to share their emotions or feelings or not.
Mockups
Based on insights from the usability studies, I applied design changes like providing a mix of visual elements and texts to allow both visual and non-visual users.
Mockups
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View the Young high-fidelity prototype
Accessibility considerations
Responsive designs
Sitemap
With the app designs completed, I started designing the responsive website. I used the Young Mind sitemap to guide the organizational structure of each screen to ensure a cohesive and consistent experience across devices.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the design to fit the specific user needs of each device and screen size.
-------------------------------------------------
Going forward
Thank you!
