Web Design, Thought Leaders

How to Design for Users Struggling with Mental Health

April 8, 2019

by Cassy Gibson

UX Designer, Sidebench

Mental health is often an overlooked element of website user experience and presents unique design challenges. Designers can minimize these challenges by reducing website complexity and choosing appropriate imagery and language.

Updated May 18, 2022

Digital mental health tools are becoming more popular and effective, allowing designers to create virtual spaces that are comfortable for all users. 

Mental disorders (MDs) or mental illnesses affect almost 1 in 4 adults at some point during their lifetime. Mental disorders, coupled with substance use disorders, account for the fifth leading cause of disability-adjusted life years worldwide

Users with mental disorders browse the web often in search of services/information related to their mental health. Online mental health communities and treatment delivery methods act as an important factor in encouraging people with mental disorders (PwMD) to seek professional help

Although the web seems to be a promising site of mental illness resources, the usability of digital products is not always designed to thoughtfully serve users with mental illness. 

Use this website redesign checklist to focus on accessibility for web users. 

Studies have shown that PwMD encounter barriers on the web, making their access to resources more limited than people might think. The graphic below depicts the results of a study conducted on patients of psychiatry at a university hospital. 

 Most people (58%) look for information about mental disorders online.

 This study indicated that more than half of the patients (58%) search online for various mental health resources. Nearly 71% of the participating patients had already used the internet to access mental health resources. 

Sidebench, an app and software development company, recently partnered with the WITH Foundation to help designers, developers, and founders think about how designing with disabilities in mind can actually improve the user experience for all users. 

When we think about what makes technology or a website accessible, we consider things like color contrast and keyboard accessibility as checkboxes. However, given the diversity of persona spectrums, web design agencies need to realize there are more nuanced matters to consider. 

Co-design and inclusive research practices lead to the most universally friendly, intuitive, and pleasant experiences for users. To help you start practicing empathetic design for users with mental illness, there are a few basic things to consider. 

Designing for Mental Health Awareness

Minimize Complexity

Take a moment to consider the state of mind of the user as they access your product. 

Organize your website so that it’s intuitive and easy for users to find resources they need without feeling lost or expending too much energy.

It’s important to use color and imagery to enhance the user’s experience, but to do so thoughtfully to avoid cognitive overload

Additional Reading: "The Eight Golden Rules of Interface Design"

Display Realistic Images

We’ve all seen stock photos of people clutching their heads in frustration/sadness. Although those photos might seem like an obvious way to represent stress or despair, they tend to be a bit over-dramatic and support the idea that mental illness looks a certain way for everyone. 

These “sad person in the corner” images are cliché, and they can increase negative feelings for users as they access your product. Each user expends cognitive effort to process images, and negative images are not valuable for users seeking mental health resources.

Similarly, exaggerated happy photos can be jarring and “fake” to users and should also be evaluated with caution. 

Sometimes, the best picture for a mental health product is one of the actual users like used by Talkspace or more neutral illustrations

Graphics such as the ones used by Youper are an excellent example of neutral, non-exaggerated illustrations.
Youper uses neutral, non-exaggerated illustrations to portray emotions.

Youper’s illustrations are warm without being too representative of any specific type of person or feeling. 

By using a more neutral approach to graphic design, you acknowledge that mental health challenges may look different depending on the individual. 

Be Careful How You Talk About Mental Health

It’s always a good idea to prioritize clarity over clinical accuracy. 

The language around mental health is sometimes confusing and vague, especially for users who are less familiar with the medical context of symptoms and conditions.  

Work with users to understand the language they use to describe their experiences and structure information around those terms rather than the terms listed in DSM-5

For example, depression and anxiety are related, but not exactly the same. A user not familiar with how they are different might search the wrong term.  

Thoughtful design can guide that user back to the resources they need by connecting those dots for them and using recognizable, relatable terms. 

Create a Sense of Community

If your company or product has a team across the globe, showcase them. If your users are diverse and wide-spread, let new potential users know how current users have benefited so far. 

Online communities can combat feelings of loneliness and isolation. Building trust and familiarity can increase the benefits users gain from your design even if a forum or chat group isn’t part of your digital product.

Universal Design Aims to Create a Positive Experience for All Users 

Minimizing complexity, choosing images and words wisely, and creating a sense of community around your mental health services or products are all ways you can begin designing with mental health inclusivity in mind. 

However, testing and interacting with users are the only ways to measure your design’s accessibility to a diverse user pool with varied mental states.  

Understanding and accommodating the fluctuating mental states of your user base will help ensure that your products are valuable to all of your users all of the time.

Hire a trusted web designer to create a website that enhances the experience for your users.

Additional Reading:

About the Author

Cassy Gibson HeadshotCassy Gibson is a leading UX designer for Sidebench, a Rice University alum, and a Texan transplant surviving in Los Angeles. Her interests include environmental justice, vegan cooking, discovering great podcasts, and petting dogs.

Related Articles More

How to Create a Budget for Custom Graphic Design [With Template]
How to Create a Budget for a Website Redesign [with Template]
Top 6 Website Features People Value