Mind & Me: Designing for effective mental health management

Over half (56%) of the adult population with a mental illness go untreated.

We aimed to find a way to revolutionize mental health management through the creation of a holistic, user-centered digital product.

Role: UX Designer/UX Researcher

Team members: Karan Vora, Priyanka Jain, Tharani Prabu, Yeatasmin Shiropa

Methods: Persona creation, Screening questionnaire, User interviews, Affinity mapping, Journey mapping, Competitive analysis, Moderated user testing, Wireframing, Prototyping

Tools: Figma, Zoom, Google Workspace

Time frame: 16 weeks

Here’s a quick overview of our process

We conducted extensive research to understand the problem and identify core requirements.

Surveys and Interviews >

We started with some surveys about mental health, from which we identified people to interview.

26

Survey Respondents

8

Interviews

Participants who encountered situations where they felt their mental health was not at it’s best

Participants who are currently seeking mental health support

Surveys and Interviews

Through affinity mapping, we identified some major themes to help guide the design of our solution.

Surveys and Interviews

Persona >

From the themes identified through affinity mapping, we created a persona named Sarah to represent the needs and requirements of potential users.

Requirements

Pain points

Surveys and Interviews

Next, we created a hypothetical journey map to envision what a typical experience for Sarah might look like currently.

Sarah tries to find an app to help with her anxiety, but runs into pain points like inaccurate information, ineffectiveness, paywalls, and struggling to find an affordable therapist, and overall wants something more streamlined where she can incorporate mindful practices.

Surveys and Interviews

How might we provide a streamlined experience for Sarah to improve and keep track of her mental well-being?

Next, we started exploring solutions to the problem.

Competitive analysis

We then narrowed down ideas to form our final solution.

Competitive analysis >

Through competitive analysis, we identified traits to incorporate into our app’s personality.

Competitive analysis

Competitive analysis

Some of my sketches of possible features

We brainstormed ideas to figure out what we could implement that could feature the all-in-one aspect, but not be too overwhelming for a user to navigate.

Competitive analysis

After prioritizing ideas we thought might work, we started visualizing what those ideas could look through pen and paper sketches.

The aim is to make it easier to discover and access available resources, find the right help catered to each individual and keep track of the help being received.

Our solution - a one stop platform for all things mental health, with all features needed to effectively manage mental health in a single spot.

After all the talking and thinking, we actually built the product!

Testing goals >

Testing results

Making changes to the system

Once we had built our UI kit, we had the opportunity to test how other designers might use it.

Aspects that were tested

Testing goals

Testing results >

Making changes to the system

We tested the UI kit with three designers, with mostly positive results.

A participant during user testing

Testing goals

Testing results

Making changes to the system >

Based on issues uncovered during testing, we made some changes to the UI kit.

Once we had modified the UI kit, we started documenting our design system.

Writing the documentation >

We chose zeroheight to publish our documentation.

This was the final step to creating an all round design system that can be used the way it was intended to be.

Here’s the structure of our documentation:

Finally, we pitched our design system to our prospective users!

In our pitch, we highlighted the reasons why our system should be used, receiving a largely positive response.

When we say experiences, we mean on both sides of the website. Whether you’re someone who works behind the scenes to bring the website to life, or you’re someone who uses the website to learn more about art, the Mosaic Design System was built for you.

  • A common base with all the building blocks for designing, making collaboration more inclusive, and easing the incorporation of everyone’s input.

  • Ready made elements reduce time and effort, and are easy to modify according to adapting requirements.

  • Skip the initial back-and-forth about basic features like color and fonts, since those decisions have been made.

  • When designs need to be revised, modify components or use another one altogether - without all the extra hassle.

  • All components of the system closely adhere to accessibility guidelines, creating a digital product that is accessible for everyone.

  • The system reduces confusion and enhances experiences for visitors by facilitating consistent visual language across the website.

  • The design of components show a clear reference to the museum’s mission and values, translating into the final product as well.

  • Additional guidance on what colors combinations to use is provided, making the creation of accessible experiences easier.

  • Component designs are unique to the museum’s values and branding, making it easy to imbibe context into designs.

  • The systems extends collaboration beyond the organization, by inviting suggestions and feedback from the design community at large.

Pitching our system to the rest of the class received an overall positive response and some constructive criticism.

This was my first experience with design systems, and I thoroughly enjoyed the entire process while also learning about how design systems are not just UI kits as I’d believed for so long, they are culture changes in disguise. (taken from a quote Professor MacDonald reiterated many times in his lectures). My team was wonderful to work with as well, and I am very proud of the results we produced together. I look forward to taking this experience forward in my professional career, and being part of the change in design processes in the industry.