Jason Nguyen

  • UX3DAbout

Cultivating educator well-being by building a community-centric mental health app with a buddy system and access to mental health resources.

Mobile App Name: Homeroom

Project Summary

Educators are the foundational leaders of knowledge in our country. Though they deserve to feel celebrated, many are feeling overwhelmed, unappreciated, and burnt out. Our team felt compelled to help with some of the issues.

We believe a mobile app that enables educators to build community will help create an environment of support, mitigate feelings of isolation, and positively impact their overall well-being.

My Responsibilities

  • User Research
  • Experience Design
  • Prototype (Mobile)
  • Usability Testing
  • Animation

Timeline & Team

4 weeks from start to finish, with a UX team of 6.

Defining The Problem

What's The Problem?

Educators are overwhelmed and burnt out, and are often left searching for mental health resources and support.

The Goal

A mobile app that enables educators to build community will help create an environment of support, mitigate feelings of isolation, and positively impact their overall well-being.

Insights From 67 Survey Participants

"Do you feel your mental health has been impacted by your profession?"

Survey graphic displaying results of the question: "Do you feel your mental health has been impacted by your profession?" 95.5% of participants said YES, while the other 4.5% said NO.

95.5% of 67 participants voted YES – they're mental health has been impacted by their profession.

"Do you feel that you have access to quality mental health resources?"

53.7% of 67 participants voted NO – they do not feel they have access to quality mental healt resources.

Interviews

Input From Educators Across the U.S.

We reached out to educators who were willing to talk about their experience dealing with mental health. Their testimonies were very humbling and eye-opening:

“Teaching is hard, and there’s never an opportunity to process things. I feel like I have no one to talk to, and that can be very isolating.”

“I’ve developed such bad anxiety, sometimes it feels like I can’t breathe.”

“I’m a person who needs help and support. I just can’t do it all, alone. It’s too heavy.”

Brainstorming & The Competition

What Features To Include?

A graphics displaying the brainstorming tools used, including: Crazy 8's, I Like I Wish What If, and Moscow Matrix.

Prioritized App Features:

Buddy Matching

Daily Affirmations

Buddy Chat

Mental Health Resources & Activities

What Were Competitors Missing?
And what could we learn from them?

Logos of potential competitors of the Homeroom app. Including Teachers Connect, Headspace, and BumbleBFF.

NO BUDDY SYSTEM
The competition had no buddy system for creating community and improving mental health amongst educators.

But, they did have these:

  • Daily Affirmations
  • Personalized/Curated Content
  • Education Resources
  • Membership Fees

User Persona

Who Is the Target User?

A profile picture of a teacher standing crossed arms in front of a chalkboard.

Tara Belle
“How can I support my students when I can’t even support myself?”
‍
Age: 32
Occupation: 3rd Grade Teacher
Location: San Francisco, CA
Traits: Ambitious, Organized, Empathetic, Perfectionist, Anxious, Active

Needs

Community to make her feel supported and less alone.

Coping strategies for exhaustion, burnout, and stress.

Virtual mental health resources that are easily accessible.

Goals

Find curated mental health resources.

Create connections with educators online.

Make time for mental and physical health.

Pain Points

Lack of support from administration.

Wish they had more connection with educators.

Demanding schedule restricts time to find resources.

Potential Solutions

Virtual platform for educators to connect.

Reminders for physical health.

Mental health resource library.

User Journey

SCENARIO
Tara is a 32-year old third grade teacher who has taught at the same school site for nine years. She is feeling overwhelmed by the responsibilities of her job, and is looking for a way to connect with other educators in a meaningful way that eliminates the feeling of isolation.

EXPECTATIONS
- A virtual platform that enables her to connect with empathetic, like-minded - educators.
- Personalized and curated mental health resources.
- Easy to use and simple to manage and navigate.

A graphic representing the user's journey from steps 1-8. Each step has a different emoji displaying different emotions. They start off sad and end up happy.

AWARENESS
1. She realizes the new pressures and responsibilities at work have increased her anxiety.

2. Decides she wants to find resources and support for her mental well-being.

DISCOVERY
3. Does a google search for mental health resources and feels overwhelmed by the amount of options. Discouraged, she quits her online search.

4. Hears about the Homeroom app from a teammate, and is intrigued by idea of building a community online.

EXPLORATION
5. Downloads the mobile app and fills out her buddy-matching preferences.

6. Gets matched with a buddy and begins using the app. After messaging with her buddy, she feels less isolated and alone.

RETENTION
7. Checks in every day to log mood and search for teaching-specific resources.

8. Looks forward to connecting with her buddy to share experiences from their days teaching.

User Flow

This user flow was introduced including the prioritized features to ensure an intuitive experience.

User flow chart displaying all the options the Homeroom app has stemming from the main 4 features: Resources, Buddies, Messages, and Profile.

Designing A Solution

Iteration from Low Fidelity to Mid Fidelity wireframes and translating design concepts into tangible and testable artifacts.

Low fidelity wireframes of the Homeroom App as displayed on a mobile device. It shows the Home, Messages, and Profile screens.
Mid fidelity wireframes of the Homeroom App as seen on a mobile device. It shows the buddies, messages, and resources screens.

Testing

I conducted usability tests on low and mid-fi prototypes to understand how users interact with the design and what changes to implement based on results.

Wireframe of the Homeroom app as displayed on a mobile device. It shows the Home screen and highlighted in red is the Dailies feature.
Wireframe of the Homeroom app as displayed on a mobile device. It shows the Profile screen and highlighted in red is the Mood Tracker feature.

High Priority Changes

Remove mood tracking button.

Make emoji buttons clickable in the mood tracker.

"Quick Reply" option for new connections.

Mid Priority Changes

Add whitespace on homepage and resources tab.

Remove "Dailies" from homescreen.

Low Priority Changes

Consider keeping tab bar on resources pages.

High Fidelity Mock-ups

For High Fidelity, revisions were implemented from usability testing results and a soothing color palette is applied.

High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows the login screen starting with the Homeroom logo and related input fields.
High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows the landing page for a user. It highlights the Daily Affirmation, Mood Tracker, Your Feed features.
High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows the user's profile with My Goals and Completed Activities features.
High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows the Buddy Tree feature with all buddies that are available to reach out to.
High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows the Find Buddies feature where users can connect with potential buddies based on their location and job title.
High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows the chat feature and on-screen keyboard.
High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows the Teaching Specific Resources tab with Classroom Management as the category with links to related articles.
High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows an article titled, Your Worried Brain. There are buttons to share or like the article.

Accessibility Focused Design

As an advocate for accessibility, I want to make sure my designs meet WCAG standards, with AA compliance as the goal. Websites with 100% accessibility isn't realistic, but I do what I can to ensure that those who use assistive technologies do not encounter frustrating experiences. These assistive technologies need to be able to read, understand, and operate the pages.

Target Sizes

Homeroom App with accessible dimensions for touchpoints.

I don't want the user to have to hunt when attempting to click on buttons or other call-to-action elements, so we make these target sizes at least 44x44px.

Contrast Checking

Homeroom color palette with contrast checking.

Checking the legibility of colors placed in and around each other is vital. This applies to not only text, but icons and other input elements.

Animations

The two animations I tackled for this project were for Homeroom’s splash screen and Buddy Tree interactive visual. Both created in Figma.

Homeroom Splash Screen Animation

High fidelity mock-up displaying the Homeroom splash screen. IT shows the word Homeroom and a plant growing from the first letter o. And then the sign-in and register buttons slide in from the buttom.

Homeroom Buddy Tree Animation

High fidelity mock-up of the Buddy Tree animation that I created. It shows the Buddy Tree growing from a seed to a flourishing tree with buddies occupying the space where fruits would hang.

Prototype and Result

The final product of the project is our clickable High Fidelity Prototype. It shows how we listened to educators, prioritized their needs, and delivered a product we believe in.

Interactive High Fidelity Prototye

High fidelity mock-up of the Homeroom app as displayed on a mobile device. It shows the login screen starting with the Homeroom logo and related input fields. There is is a play button overlaying the screen indicating it links to the mobile prototype.
View APP Prototype

Recap of the Process

Graphic listing the steps of the process from left to right: Empathize, Define, Ideate, Prototype, Test, and Iterate.

What Did I Do?

The overall project involved, but not limited to, the following:

  • conducting surveys and interviews with educators around the US.
  • developing low to high fidelity designs.
  • creating on brand animations and micro-interactions.
  • usability testing with real users.

Final Thoughts

High fidelity mock-up of the Homeroom App as displayed on a mobile device. It shows the login, home, buddies, chat, and resources screens.

Takeaways

When we began this project, we were moved by the overwhelming number of educators who were struggling with their mental health as a result of their work. We wanted to change that.

Throughout the design process, we went on a journey with our user persona, Tara Belle.  From uncovering her pain points during the user research phase, to final rounds of usability testing using a high-fidelity prototype, we believe we successfully met the needs of Tara Belle by creating an impactful, user-centered product.

Our final product, Homeroom, enables educators to build meaningful connections and offers curated mental health resources all in one place. Our goal was to help educators like Tara Belle, who are the foundational leaders of our country, by providing the utmost accessible forms of care and support.

We are excited to see how Homeroom can positively impact the future of mental wellness amongst the educational community. We hope we can help build a world where support and community come first.

Like what you see?

Go to next >
see all ux work >
see all 3d Work >

Let's create something together.

jnguyen3d@gmail.com
© 2024 Jason Nguyen. All rights reserved.
HomeUX3DABOUT