Mental Health Resources App
and Responsive Website
Dhirendra Paudel
The product:
Mental Health Resources is a digital platform focused
on mental health well being. The platform needs a
tool that helps people learn about and manage their
mental health. Mental Health Resources’ primary
target users include students and adults who are
concerned with the mental health and would like to
learn more about what they can do to improve
mental health well being.
Project overview
Project duration:
March 2023 to April 2023
The problem:
Access to mental health resources is an
important issue that affects many communities
around the world. Mental health is essential
for overall wellbeing, and it can have a
significant impact on a person's quality of life.
Unfortunately, many people face barriers to
accessing mental health resources, such as
stigma, cost, and lack of information.
Project overview
The goal:
Design a digital platform that will ensure that
everyone has access to mental health
resources.
My role:
UX designer leading the app and responsive
website design from conception to delivery
Project overview
Responsibilities:
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, iterating on designs, determining
information architecture, and responsive
design.
Understanding
the user
User research
Personas
Problem statements
Competitive audit
Ideation
User research: summary
In my research study for designing a way for communities to ensure access to mental health
resources, I conducted user interviews based on a set of questions developed using the personas
and goals defined earlier in the design process. Participants reported a strong desire for easy
access to mental health resources and information, particularly in areas with limited resources.
Many expressed frustration with the difficulty of finding and accessing resources, and a desire for
more centralized and streamlined options. The feedback from the research indicated a need for a
user-friendly platform that could help connect users with resources and provide guidance on
navigating the mental health system.
Persona 1: Purna Shova
Problem statement:
Purna Shova is a mental health
counselor who needs a
platform that allows people to
easily find and connect with
mental health professionals in
their area, regardless of their
location or financial situation,
because limited resources are
available for mental health care
in her community and many of
her clients struggle to afford or
find a good fit for counseling
services.
Persona 2: Durga Prasad
Problem statement:
Durga Prasad is a factory
worker who needs affordable
and accessible mental health
resources in his community
because he struggles with
anxiety and depression, but is
unable to afford the high cost
of counseling services and faces
stigma associated with seeking
mental health care in his
community.
Competitive audit
An audit of a few
competitor’s
products provided
direction on gaps
and opportunities
to address with the
Mental Health
Resources digital
platform.
Ideation
I did a quick ideation
exercise to come up with
ideas for how to address
gaps identified in the
competitive audit. My focus
was specifically on
providing access to
mental health resources.
Digital wireframes
Low-fidelity prototype
Usability studies
Starting
the design
Digital wireframes
After ideating and drafting
some paper wireframes, I
created the initial designs
for the Mental Health
Resources app. These
designs focused on
delivering access to mental
health resources for
wellbeing.
Top half of home
screen acts like a
coach by providing
personalized
recommendations
and search for
users
Easy access to
app features
from global
navigation
Low-fidelity prototype
To prepare for usability testing, I
created a low-fidelity prototype
that connected the user flow of
viewing skills required for self
help to improve mental health
wellbeing.
View Mental Health Resources
low-fidelity prototype
Usability study: parameters
Study type:
Unmoderated usability study
Location:
Nepal, in-person/remote
Participants:
7 participants
Length:
30-60 minutes
Usability study: findings
These were the main findings uncovered by the usability study:
People had difficulty
returning to homepage
and confused with add
button in homepage.
Homepage Search
People want to have
search function added to
the app.
Skills Categories
People preferred different
categories as service
provider and service users
for the skill sets.
1 2 3
Mockups
High-fidelity prototype
Accessibility
Refining
the design
Mockups
Based on the insights from
the usability studies, I
applied design changes like
providing a clear search
section in the home screen
to browse the catalog of
mental health resources
available”.
Mockup 1
before
Mockup 1
after
Before usability study After usability study
Mockups
Additional design changes
included adding categories
to “Skills” Section and
providing service providers
and service users their
desired options.
Mockup 2
before
Mockup 2
after
Before usability study After usability study
Mockups
High-fidelity prototype
The high-fidelity prototype
followed the same user flow as
the low-fidelity prototype,
including design changes made
after the usability study.
View Mental Health Resources
high-fidelity prototype
Accessibility considerations
1
Clear labels for interactive
elements that can be read
by screen readers.
2
Initial focus of the home
screen on personalized
recommendations help
define the primary task or
action for the user.
Information architecture
Responsive design
Responsive Design
Sitemap
With the app designs
completed, I started work
on designing the responsive
website. I used the Mental
Health Resources (MHR)
sitemap to guide the
organizational structure of
each screen’s design to
ensure a cohesive and
consistent experience
across devices.
Responsive designs
The designs for screen
size variation included
mobile, tablet, and
desktop. I optimized
the designs to fit
specific user needs of
each device and
screen size.
Mobile website Tablet Desktop
Takeaways
Next steps
Going forward
Takeaways
Impact:
Users shared that the app made mental health
resources seem like something they could
actually help improve their mental health
wellbeing. One quote from peer feedback was
that “ensuring equitable access to mental
health resources, communities can promote
mental health and wellbeing for all members.”
What I learned:
I learned that even though the problem I was
trying to solve was a big one, diligently going
through each step of the design process and
aligning with specific user needs helped me
come up with solutions that were both feasible
and useful.
Next steps
1
Conduct research on how
successful the app is in
reaching the goal to
ensure that everyone has
access to mental health
resources.
2
Add more educational
resources for users to
learn about mental
health.
3
Provide a way for service
users and service
providers to connect so
that everyone can have
access to mental health
services in addition to
resources.
Let’s connect!
Thank you for your time reviewing my work on the Mental Health Resources (MHR) app! If you’d
like to see more or would like to get in touch, my contact information is provided below.
Email: dhirendra@doctor.com
Website: https://paudeldhirendra.github.io/