Mind Over Matter.

Creating a safe and secure student wellness resource platform to foster & improve mental health  

My Role 

    UX Designer

    UX Researcher

    Information Architect

Tools 

    Figma

    Sketch

    InVision

Team 

    1 UX Designer

    1 UI Designer

   

 

Platform 

    Responsive Web

   

 

PROJECT SCOPE

Who is Mind Over Matter?

Mind over Matter (MoM) is a non-profit organization that provides mental health resources for students seeking information and support. MoM is designed with students in mind and encourages young adults to seek out professionals and campus services.

 

Project Goals

 

  • Create a safe and inviting space for students searching for wellness resources.

  • Make everything as easy as possible to access the information they're looking for

  • Creating a platform that puts students' needs first.

THE CHALLENGE

Bridging technology with student wellness

The rise in mental health among students has significantly increased and become exceedingly common. Students' stress and anxiety levels are attributed to school workload, sleep deprivation, and their environment.

Currently available platforms have a staggering low retention rate due to its bold claims that don't measure up. Users expressed concerns citing its credibility in misguided information and the underwhelming platforms after the initial visit. How might we find a way to support students in need while sustaining engagement? 

Design Process

Empathize 

    Exploratory Research

    Competitive Analysis

    User Interviews

    Survey

 

Define 

    Affinity Diagram

    Problem Statement

    Persona

    Journey Map

   Context Scenario

Ideate 

    Brainstorming

    6-8-5 Sketches

   

Prototype 

    Low-Fi Wireframes

    Mid-Fi Wireframes

Test 

    Usability Test

    Card Sort

    Heuristic Evaluation

Handoff 

    Mid-Fi Wireframes

    Annotated Wireframes

    Prototype

UNDERSTANDING THE USERS

Connecting with students

I visited 3 campuses and spoke with 6 students to understand their headspace as well as thoughts and opinions towards wellness platforms. I found it vital to be in an environment that's familiar to students in order to connect about talk about a personal subject like mental health. 


From the interview, key takeaways were:

  • All students occasionally experience stress

  • Mental health resources should be free, especially for students 

  • Mental health platforms are too tedious and time-consuming

  • Strong preference over direct health resources vs. gimmicky mood trackers or habit quizzes

 

While the interviews were informative, I realized that most students were reserved in their answers. This was going to be hard topic and I had to find another way to learn more about our users.

How do students cope with stress?

In order to dive deeper and connect with our users, I sent out surveys online hoping this method would be more welcoming than the in-person approach. I filtered students who have experienced stress in the last 6 months to gauge their mental state and their thoughts on mental health. 

98%

59 respondents

Didn't have a clear understanding of where to look for help

51.7%

59 respondents

Experience stress daily, BUT 54.2% allocate less than once a month researching or using wellness resources

47.3%

59 respondents

Believe that the current health and wellness options are NOT easily accessible.

Affinity Diagram.  

 

The results made it clear that not everyone who struggles will seek help and knows how or where to. Equipped with the insights gathered so far, I knew I had to address providing information and resources to students while making it easily accessible for first-time users who might not normally seek out for help. 

Needed resources YESTERDAY

Direct resources only

Tired of tedious tasks

Handled by professionals ONLY 

Students don't know where to look for help

Student often experience stress

Free and easily accessible resources

DEFINING OUR USERS

Meet Our Students! 

2 personas emerged from our research: Susan and Thomas. Both personas have varying degrees of stress but believe that mental health is important. Susan has used wellness platforms before but wants direct resources, finding current options too intimidating while Thomas who doesn't know what resources is available to him wants free and easily accessible resources if need be. 

Primary Persona
Primary Persona

press to zoom
Secondary Persona
Secondary Persona

press to zoom
Primary Persona
Primary Persona

press to zoom
1/2

Primary & Secondary Persona

Mapping out an intuitive experience 

 

I dove deeper to understand what our primary persona, Susan would go through during a typical day in order to better cater to her needs when I start ideating some potential solutions. I also created some user flows for both personas so that I could map out and assess the efficiency of the interface I'll be building later. 

DEFINING THE PROBLEM

Problem Statement

“Students are stressed and overwhelmed with school workload. They need an outlet for mental health resources so they can be able to manage their well-being and have a better quality of life.”

EXPLORING SOLUTIONS

Sketch it out!

With so much insight from the user research, I did some rapid sketching to quickly ideate and brainstorm some ideas I had. This way I could better access what would be viable solutions which would be helpful for users like Susan and Thomas. 

Sketch 1 - News

Sketch #1:  Feed/News. Students can have access to the most updated resources  

Sketch #3:  Support feature to contact professionals and book appointments. 

Sketch #2:  Browse through different types of conditions. No fluff, just information. 

Sketch 4 - Communities

Sketch #4:  Find communities and events nearby to attend and relieve stress.   

We are NOT our users!

I discussed the concepts with my UI designer and we gravitated towards sketch #4 community and events. We thought this would be a great solution to help students relieve stress if they're surrounded by a supportive and likeminded group.

 

However, something felt off. We realized we jumped the gun and subconsciously made the decision based on our own rationale. This direction clearly did not fit either personas or personal statement from the user research. 

We were also aware that this was a taboo topic (as seen through interviews) to talk about and we’re not really sure if the product would really scale if need be. People would prefer to have a place to find out about mental health and have direct resources rather than all the fluff that was seen in current competitors and apps that users are currently using as seen in the interviews. 

Finding our way back to the user...

LOW-FI WIREFRAMES

Pen to paper


I revisited the research and concepts which directed me back to users' main concerns. I realized my earlier concepts aligned with users' needs and followed that path focusing on a resource-based platform that provides mental health information and support to students in need. 

Since this would be a content-heavy site, I stuck to a minimal design. I also scaled back on additional features as this would lose credibility and make our platform seem too scattered, distracting users from the main purpose of the site - which is not what we want. 

TESTING

How did students perceive the design?

Overall, participants thought the paper prototype was a great resource for end-users. However, participants also voiced a few iterations that might improve the site. These suggestions include: 

  • In the homepage, the site should feature contacting the wellness center for ease of use for students 

  • In the hamburger menu, the title of “Find Help” sounds very alarming and loud. 

  • What was the need for the sign in and sign option? Why are users signing up?  

MID-FI WIREFRAMES

Making the designs digital and tangible 

 

At this point, my UI designer had created a logo that embodied a very personal symbol of community, support, and love. I digitalized my lo-fi wireframes along with the logo in order to capture the true essence of our resource site before heading off to conduct usability testing. 

 

During my mid-fidelity wireframing, I also stuck to a clean and easy to digest layout because this site is content-heavy I didn’t want to overwhelm the user with anything too crazy. The goal behind this is not to be super flashy as it’s marketed as a resource center that provides information and connects students in need with professionals. We also wanted to make everything as easy as possible to access the information and support they’re looking for. Keeping the main focus as a resource data-driven site, I also took out the sign up/in feature as I found it unnecessary and wanted to eliminate the concern surrounding student privacy and allow students to remain ambitious.  

TESTING

We still have work to do

With usability testing, the objective was to access how users will interact and navigate through each task, what their pain points are, and their ability to complete each task. 

 

Key usability test insights: 

  • All participants thought it was a campus wellness center and not a student resource site 

  • Participants were overwhelmed with all the content, lots of endless scrolling

  • Felt conditions in the navbar weighed more importance than articles

My UI designer partner also conducted a 5-second and 1st click test. Results showed that...

  • 5-second: The homepage didn't convey the intention and purpose of MoM.

  • 1st click: hero image took up most of the average fold and viewport. Participants missed the next section of the screen and didn't scroll further to view content. 

ITERATIONS

Refining the student experience

Based on our participants’ feedback and usability test results, our key iterations consist of...

Changed homepage: can now see the name of our site with a description and what the site is about

Added top of page button. For users to easily go back to the top of the page

Menu is revised. Conditions is now swapped with articles

Overiew & accordion menu. Allows for easier overview and lets users jump to their preferred section

FINAL DELIVERABLE

Prototype

Shoutout to the UI Designer: John Castle

Group 14.png

LESSONS LEARNED

Design advocacy: as the only UX designer in the team, I became the spokesperson of the platform and made every decision based on the best interest of the user. It's essential to put users at the forefront behind every decision and extremely crucial when tackling a delicate topic like mental health amongst students. In order to help users, one must first empathize with them.