MindHaven

The design

After usability testing we took user feedback seriously and created our final design.

Overview

MindHaven is a web application that strives to help individuals find stress relief and mental health aid.

Project Details

  • Role

    UX Designer

    Sept 2023 - Dec 2023

  • Team

    Alice Sun

    Alisha Tran

    Nuzhat Jahan

    Olivia Wen

  • Tools

    Figma

    Canva

    Axure RP Pro

    Zoom

    Google Suites

There are many barriers individuals face in seeking Mental Health Aid. Costs are too high, the accessibility is low digitally, there’s stigma, and much more.

Task

How can we create an innovative website designed to offer college students and young professionals resources to understand and manage their stress and mental health?

EARLY STAGES

Objective

Our objective was to combine educational content with access to professional mental health support, creating a supportive community for navigating the unique challenges of academic and early career pressures. 

Target population

Our target population:

College Students and Young Professionals

Navigating users

When visualizing the application we wanted to present, we realized there could be various target populations.

However, as we were all college students we wanted to create a compelling application for individuals who had similar backgrounds to us. Therefore, while creating assumptive personas we decided to make one profile for a college student and another profile for a full-time working professional.

We felt the stressors of providing for one self were evident in our college climate and so we wanted to see how we could provide relief for those stressors.

Information Architecture

We were tasked to create at least 24 pages in our web application. Because of the extensive amount of pages, we created an information architecture map to visualize the design layout and user flow better.

User Flow

After mapping out the entire information architecture map, we wanted to specifically focus on the Discover page and Community page. These two pages would give users a significant amount of freedom to choose content they wanted to view and utilize.

The user flow of the Discover page below allows the user to view various resources such as therapies and techniques, mental health assessments, and more.

Usability Testing

With a clear layout, we began designing low and medium-fidelity wireframes in Figma. We created a medium-fidelity prototype to begin usability testing.

Design justification

Our final design was made through strategic choices.

Removing distracting elements: When we first began designing there was a lot of content we wanted to involve. This results in longer paragraphs and more sections to have to read through and view. This was a critique from almost all of our users from usability testing saying that this was too overwhelming. So we decided to dial down the content and stack the content less overwhelmingly.

Breadcrumb Navigation: Because our application has so many pages we decided to instill Breadcrumb Navigation to reduce cognitive load for users allowing them to know their application location at all times.

Impact

As designers embarking on one of our first fully functional prototypes, we wanted our product to have a positive impact. We wanted to showcase to others that it's possible to have a digital space dedicated to mental health and make it accessible. Our primary message to convey through this product was that the barriers to receiving mental health aid could be lifted.