MindMatters: A Mental Health Resources App


The mobile application and website aim to provide convenient and comprehensive access to mental health resources for residents. This tool will be targeted towards individuals living in cities who may be seeking support, guidance, or information related to mental well-being. 

Project Duration

August 2023 - October 2023

My Role

Lead UI/UX Designer, UX Researcher


User research, paper and digital wireframing,
low and high-fidelity prototyping, conducting
usability studies.


Many individuals in urban areas face challenges accessing mental health resources due to various reasons, including stigma, lack of awareness, and difficulty finding appropriate services. 


This project seeks to address these challenges by creating a user-friendly mobile and website that offer a wide range of mental health resources, including information, self-help tools, online therapy options, and connections to local mental health professionals.

The user research conducted indicates that the Mental Health Resource Tool offers a generally positive user experience. Users appreciate its user-friendliness, appointment booking process, and the availability of mental health resources. The provided feedback offers valuable insights for enhancing the tool's usability and user satisfaction, ensuring it continues to provide effective mental health support.


Maya is a Social Media Manager at a prominent advertising agency that demands creativity, adaptability, and constant engagement with digital trends. She wants to try a discreet online therapy to accommodate her busy schedule, so that it can help manage her stress from work more effectively.

James is a High school teacher, a husband and father of 2 kids. He wants tips on managing stress, balancing work and family, and accessing quick mental health support during high-stress periods so that he doesn’t burden his family with his stress.


To address the gaps identified in the competitive audit, I conducted an ideation exercise at a rapid pace to generate potential solutions. The focus was the appointment scheduling

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the MindMatters app. These designs focuses on booking an appointment with a licensed practitioner.

Digital Wireframes: screen size variation (Website)

Designing the website to be responsive ensures that it adapts to different screen sizes, making it usable on a variety of devices, including smartphones and tablets.

Low-fidelity Prototype

This show the flow of navigating through the app including addressing the pain point about Appointment Scheduling.

Low-fidelity Prototype (Website)

This show the flow of Appointment Scheduling through the website

Usability Study: Parameters

Study Type

Unmoderated usability study


5 Participants


Philippines, remote


20-30 minutes

Usability Study: Findings

Forgot Password

Include a forgot password link on the login page

Mark as Read

A button and indicator once an article has been read.


Categorization of communities for easier search.

"I found the community forums to be my safe space where I could share my experiences and learn from others."

- Maya, Teacher


Based on the insights from the usability studies, I added the “Forgot Password” link on the sign-in page

High-fidelity Prototype

Flow of the high-fidelity prototype followed the same flow as the lo-fi prototype, results from the usability study was put into consideration while designing the prototype.

Accessibility Considerations

Compliance with Accessibility Standards

Ensure that the website complies with relevant accessibility standards and guidelines, such as the Web Content Accessibility Guidelines

Responsive Design

Ensure the website is responsive, adapting to different screen sizes and orientations, including mobile devices and tablets.

Color Contrast

Maintain sufficient color contrast between text and background to make content readable for individuals with low vision or color blindness.


Difficulty with website navigation was one of the primary pain point for users thus creation of a sitemap is essential. Having a strategic information architecture for the overall navigation of this website will be improved. The goal was to make the navigation easy for each users.

Responsive Designs

The designs for screen size variation included mobile, tablet, and desktop. Designs were optimized to fit specific user needs of each device and screen size.



  1. Increased Accessibility: Ensuring that individuals with diverse abilities can access mental health resources and support.
  2. Reduced Stigma: By providing a discreet and confidential platform, the tool has helped reduce the stigma associated with seeking mental health assistance, encouraging more individuals to seek help openly.
  3. Improved User Experience: User-centered design and usability testing have led to a more user-friendly experience, making it easier for individuals to find and access the support they need.
  4. Community Building: The inclusion of community forums and support groups has facilitated connections among users, creating a supportive environment where people can share their experiences and provide emotional support.
  5. Awareness and Advocacy: The tool has played a role in increasing mental health awareness and advocacy, equipping users with knowledge and resources to support awareness campaigns.

What I learned

  1. Accessibility is Essential: Prioritizing accessibility ensures that the tool can serve a broader user base, promoting inclusivity and usability for all.
  2. User-Centered Design Matters: Involving users throughout the design process and listening to their feedback is critical for creating a tool that genuinely meets their needs.
  3. Community Support is Valuable: Building a sense of community through forums and support groups can provide essential emotional support for users dealing with mental health challenges.
  4. Advocacy is Part of the Solution: Providing resources for mental health awareness and advocacy can contribute to destigmatization and broader societal change.
  5. Continuous Improvement: The case study highlights the need for ongoing evaluation and improvement of the tool to adapt to evolving user needs and technologies.
  6. Collaboration is Key: Collaborating with mental health professionals, advocates, and users themselves can enrich the tool's content and services, making it more effective in providing support.

Next Steps

To identify any additional areas of need and ideate on new features.

Conduct a follow-up usability testing.

Thank you for your time reviewing my work on MindMatters!
If you’d like to see more or get in touch, my contact information is provided below.

Email: hello@charmerazo.design