How to design for people struggling with mental health

Image: iStock

We spoke to senior UX architect at Sigma, Francis Rowland, about what’s involved when designing a website for people with mental health issues and how these design principles can be used universally by any digital designer.

Earlier this year global user experience (UX) agency Sigma called for UK digital and tech companies to design websites and apps that are more inclusive and accessible. Sigma has moved on to tackle an entirely new website design for UK mental health charity, Mind

Sigma's first call to action was during London Tech Week, encouraging designers to include people who can be forgotten throughout the design process: including partially sighted people, people with neuro-diversity (such as dyslexia or the autistic spectrum), hearing loss, elderly people who suffer impairments, those with mobility or cognitive impairment (such as epilepsy), manual dexterity problems and those with learning disabilities.

We published an extensive guide on how to design websites for people with disabilities, and discovered that it’s important for every web designer to design for people with disabilities first, and everyone else will benefit subsequently.

Sigma’s now working to improve the website design for UK mental health charity, Mind. Mind provides information and support for people (or those around them) suffering from mental health problems such as depression and bipolar. The Mind website features information on types of mental health problems, drugs and treatments, tips, guides, legal rights, helplines and how to help someone else. It also publishes a blog with posts written by people dealing with mental and emotional distress.

Another huge aspect of the website is donation, fundraising and people joining localised events to raise awareness. Both of these aspects – reading information and making it easier to donate online – need to be improved by the Sigma team, who has been working collaboratively with Mind to create fresh visuals, information and navigation to create a reassuring, calm user experience for people struggling with mental health conditions. 

Here are Sigma's tips to building a website or app for people with mental health issues or concerns. 

Get out of the user's way

“Using visual hierarchy to make sure that the core content is made clear – that’s what the user needs – and don't get in the way with banners and other things providing choices and options,” says senior UX architect at Sigma, Francis Rowland.

“This can be very disruptive, from a cognitive perspective. In order for a page to be usable, the user needs to first be able to figure out if it’s useful.”

This approach should make it smoother when asking for donation, showing how donation helps and make it easier for supporters and fundraisers to find resources (to avoid unnecessary calls on the phone line).This also applies to the search results.

“We want to make it easier for the user to make a choice, so disambiguating the individual results has been key – grouping results is an important way to simplify them,” says Francis.

Design aesthetic choices such as typography, use of colour and images are important factors when it comes to accessibility.

“Something we’re very conscious of is who is using [the website], but also when and what situation, and what state they might be in. One of the key things for us and for Mind was to give people quick routes to the information they need to help them,” says Francis.

Sigma discusses the design process with the Mind Fundraising team

Language used to describe mental health

Sigma prioritises the clear use of language surrounding mental health when it comes to building a new website.

“Language, used around describing mental health, can sometimes be a bit opaque, a bit difficult for people to comprehend because it can to some extent be a little technical, or a little psychiatric, a little medical,” says Francis. Understanding what language people use themselves to talk about mental health conditions, and trying to reflect that back on the website, is crucial.

Sigma has worked with Mind to improve the website’s tagging system too, by using popular or more common search terms used by people visiting the website to tag different sectors of information.

For example, when someone searches for a mental health condition such as bipolar using the Mind website, they might be referring to depression instead without realising the exact term.

“Depression and bipolar disorder are related but not necessarily the same thing,” says Francis. “The user might need one thing, but search the wrong term, so we try to guide people toward the right thing in that way.

“So if some people tried to search for or clicked on something about depression, we’d give them some options, for example, ‘Here’s information about one thing but perhaps you were looking for this?’"

Another method to include everyday language around mental health illness is to embed quotes into different parts of the website from stories by people with different mental health conditions that Mind already had available.

“It gives the reader the chance to say, ‘Yeah I recognise that, that sounds like the way I would describe my own condition’. A more descriptive narrative piece of text can help people orientate themselves,” says Francis.

No more 'head clutchers' images

Mind are very careful and sensitive about the photography used on its website, making sure not to alienate or exaggerate what it means to suffer from a mental illness, especially ones we’ve seen all too often of sad people sitting alone in a corner.

Francis says the charity uses a term called ‘head clutches’.

“Those are people who are looking sad or depressed and are holding their head – they tried very hard not to use those kinds of pictures because they’re somewhat too cliched,” he says.

Image: iStock

“The point they try to make is that people with mental health conditions just look like, people. You don’t have to be looking particularly upset, lots of people are struggling with these conditions, and they just look like everybody else.”

Sigma is working with Mind’s existing photography and media library, and have made suggestions on the use of typefaces and colour to to make the website more legible, easier to digest and to scan quickly – particularly so people can identify if they’re in the right place, reading the right thing or not.

Reducing the cognitive load of the user by presenting things in a calm way makes it easier for people to understand the information that can be available to them, says Francis.

Sigma will produce a basic style guide for Mind staff to adhere to across the country. The style guide will cover how content is produced, tone of voice, and the presentation, some of which will be a template to help with consistency, says Francis.

“Mind has its headquarters in London but local Mind bases are regionally all over the country, so half of what we expect is keeping things consistent across the whole country, centrally and more localised bases.”

Create a wider sense of community

It can’t be ignored that on a practical level, it’s important for every charity to make it easy for people to donate, including Mind. That’s why Sigma is looking to make it easier for website users to make a one-off donation or set up a regular donation. This will be paired with the integration of local and national Mind bases so it becomes cohesive.

“If for example, my team and I were based in Cambridge, if I look at a Mind website, maybe I have an account or maybe I can use my location because I’m looking on my phone, it can say: ‘Here are some events happening near you’.

“That could have a big positive effect on developing a bigger sense of community. Mind is very close to fundraisers and beneficiaries as well so it feels more in reach so people can connect a bit more," says Francis.

Image: iStock

Provide reassurance 

Sigma are known for their expertise in creating UX design, and therefore websites, accessible for everyone – but how is designing a fresh website for Mind different to their other projects?

Technical accessibility remains the same, such as how a webpage is coded, however Sigma’s main concern for Mind is to reduce hyperlinks and buttons “calling for attention”. This diminishes the cognitive load on the user.

“Some websites present you with a lot of options and routes to things, adverts, you name it. There are lots of things trying to grab your attention,” says Francis. “In this case we need to have calm architecture, and calm presentation so that the key information or a transactional thing like a donation page is simply presented.”

The user needs to quickly make a decision on whether they have come to the right place for information, and whether they need to keep reading or interact with the website, or if they need to navigate to another website.

These are design principles that can benefit all websites, says Francis. It’s about making it clear to people what they’re looking at, and helping guide them to particular sources of information.

It’s also just as vital to provide a sense of reassurance, he says.

“Mind are experts in what they do, particularly with information provision, so they badge all of their information with an information standard, so a kind of stamp of quality, and that’s very important for people to know.

“That’s a big part of the reassurance, to bring to the fore that Mind are experts and they can help you so people will generally, we hope, feel more confident with what they’re reading.”

Image: iStock

Design principles for every website

When designing for any website, as Francis and his team are doing for Mind, it’s important to understand who your audience is, what have they come to your website for, what would they leave feeling satisfied with, what circumstances are they using your website in, both the devices they would use and also the state they’re in – for Mind it’s particularly being aware of users who may have chronic mental health conditions, but when designing a website for everyone, it could be if someone is rushed or stressed out.

“In those cases, considering how you reduce cognitive load is a good thing to think about,” says Francis.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...