How to take the stress out of online design

For National Stress Awareness Day, MERó co-founder Andy Culbert talks about de-stressing the UX experience through design.

Digital stress is now ‘a thing’ according to health specialists; and technology’s relationship with stress is this year’s key theme for National Stress Awareness Day (today November 7th), highlighting how consumer’s digital experiences could actually be stressing them out.

And we’ve all been there – trying to get on with our daily lives with the constant ‘ping’ of notifications because we’re always connected. Or given up in a huff saying ‘oh forget it’ as a website fails to give us the information or products we want in our busy time-stretched lives.

But what about brands and businesses where customers are already at a heightened level of stress because they’re unwell and need to get help or want to log a complaint. Can a website or mobile app’s design help to create calm and alleviate the pressure felt by its users?  

Me and the team from digital-first design agency MERó tackled this very issue when designing a new customer portal and app for one of the world’s biggest private healthcare companies,; here are the key ways brands can relax and reassure their users through digital design techniques.

Style and stress

A new study in 2018 (the largest known study of stress levels in the UK) revealed that 74% of respondents had experienced ‘overwhelming stress’ in the past year. For me this highlights that catering for stressed out customers is something most digital designers now need to build into their work; considering how stress influences the end user (both mentally and physically) during the design process is more important than ever.

Stress can lead to extreme changes in personality, limiting a person’s ability to cope with processes they would usually find normal or easy. For example, a person experiencing stress is likely to be impatient, indecisive and distracted – they’ll have less tolerance with site errors or confusing design elements.

Tasked with the design of a full-service portal and app for a private healthcare brand, where users can do anything from renew their policy to book a hospital appointment, we knew that some people would be interacting with the app at a very stressful point in their lives. They could be mid-diagnosis, managing an existing medical condition or attempting to communicate with a medical professional. How this heightened state of anxiety would influence their responses, therefore, had to be a major consideration in every design choice. 

In-depth research showed us that the designs had to be reassuring; guiding users and providing answers or information in a clear, easy, digestible and informative way. 

And in the same way a person may alter their tone of voice and vocabulary when trying to calm a person in distress, there were some clear tactics we could apply to mitigate negative responses.

From this research three key take-outs formed our creative approach.

Adopting calming colourways


Perhaps the most obvious design element, but vitally important, colour is one of the best ways that designers can regulate the emotional response of users.

In Western colour psychology, blue is widely proven to provoke feelings of tranquillity and serenity. It’s non-threatening and reassuring, a colour that conveys trust.

Blue already featured heavily within the brand colours, and we selected shades of it with extremely high accessibility levels to form the background to the healthcare app design.  Aside from these principal colourways, we used colour sparingly, limiting any distractions. 

Where we wanted to highlight an important action (based on detailed persona analysis of who was using the app and why), we applied white space – providing a clear signpost to functionality that would help users along their journey. Additional colours were introduced for alerts. But, while these colours were chosen from the same part of the spectrum as recognisable ‘alert’ signifiers (usually red or orange), we muted them and made them harmonious in comparison to if they had been applied in their true form.

In testing, users responded well to the soothing colours of the design. They liked that there weren't any bright or clashing colours. 

High levels of accessibility ensured the design was consistent across platforms – a way to further reassure users and guaranteeing a good user experience regardless of the device or location they were accessing it from.

Design that directs and supports

A guiding principle that we referred to throughout the project was ‘cognitive overload’, a term rooted in psychotherapy describing when a person’s brain has too much information to process thus limiting their ability to perform tasks properly. We knew customers arriving at the app or portal might already be ‘overloaded’ mentally and that this would negatively impact their working memory – the part of the brain that is used to complete a task at a given time. 

When working memory is compromised people are easily distracted, unable to make decisions and find simple processes difficult to complete. The design had to fulfil the function of guiding them through their journey, as well as being simple itself.

Within the app and portal, content and important information is given space to breathe, allowing users to take in each piece of information at a time. Content is easy to read with a high standard of legibility. Simple design elements were used so as not to compete with one another for the brain’s attention. Bespoke iconography as opposed to 'off the shelf' iconography was created to be very straightforward and easy to understand, limiting confusion or the need for trial and error deciphering their purpose. We also created custom illustrations that served as visual aids to lead users through the content, whilst also adding personality to what could appear cold and unwelcoming.

Another way we eased cognitive overload through design was through limiting the decisions a person had to make. We restricted options with only essential information displayed at any given time. Content was reorganised into smaller chunks to help users navigate, process and remember it better. Data was grouped to make it memorable.

Within testing we trialled many variations of the colour, size, positioning and prominence of buttons to ensure users were sure of their next course of action. The winning layouts were ones that made very obvious what users needed to do to take the next step. We also worked with in-house teams to remove unnecessary steps within the UX. 

Movement within the design was an effective way of serving up content at just the right time. It needed to be well considered though, enhancing the user experience and prompting key content rather than distracting users. When well executed, the speed and smoothness of moving elements have a really calming effect on the overall experience.

Creating an authoritative identity

While the overarching brand identity within the app had to be supportive, it also needed to project authority. This was achieved through tone of voice and attention to detail. We wanted users to have faith that they would end up in the right place, feeling the same level of trust and reassurance online as they would when meeting a doctor or member of staff in the real world.

An authoritative voice can be achieved by consistency. Design cues along with tone of voice should be consistent throughout. Mistakes of any kind, especially broken links, typos and grammatical errors serve to distract and undermine. Never dropping attention to detail throughout the project is a must for lowering stress levels and increasing trust.

We guaranteed consistency across the app and portal by building a fully-responsive style guide that built the pages and component features. This was a vital step in the process. It consolidated the link between design and build. Development teams had insight, so they could see how each page was laid out and were able to build pages quickly and efficiently as well as being able to gain access to the code – saving both time and resource. 

So as the UK’s – and the world's – stress levels continue to rise, digital design can find ways to deliver a counter balancing experience that at least won’t create more stress or frustration. The bigger picture, and something we must take into consideration, is how to stop people feeling pressure from too many emails, huge consumption of social media and discussions on online forums.

Read next: How to design for people struggling with mental health

Comments

Elsewhere on IDG sites

Read Next...