How to Design for Users Struggling with Mental Health

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.

5 min

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.

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.
MH Related Online Use bar graph, showing the percentage of all internet users who search for different categories online. 57.8% search for information on mental disorders. 43.7% searched for information on mental health medication. 38.8% searched for information on mental health institutions and professionals. 19.8% searched for platforms with other patients. 17.2% searched for platforms with mental health professionals. And 3% searched for other (e.g. history of medicine).

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.

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.

Display Realistic Images

We’ve all seen stock photos of people clutching their head 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 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 website screenshot. The illustrations here show diverse people in a natural habitat. There aren't exaggerated images of people crying in the rain or other tropes of "mental health" imagery.

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.

This blog post originally appeared on