Translating a new brand identity across an accessible, scalable website

As part of the recent redesign of Sue Ryder’s main site, we extended the brand’s new visual identity across their Online Bereavement Community and Grief Guide services.

Given Sue Ryder’s diverse audience, including individuals with various cognitive and physical disabilities, our designs needed to comply with the Web Content Accessibility Guidelines (WCAG) and exceed them, ensuring high usability.

Our strategic approach was to incorporate the exciting new branded assets, without any usability barriers for the audience.

Here's a look at the before and after.

Sue Ryderoffers palliative and end-of-life care as well as a range of bereavement support services. They report that they gave 4,700 hours of free online bereavement counselling and cared for over 8,700 people in their hospices in 2023. Almost 160,000 people visited their Online Bereavement Community.

Their services are available to the public, meaning the needs of their audience are diverse. Their audience includes people with cognitive, visual or physical impairments as well as neurodiverse users. We also had to consider that the average user's level of digital literacy may be low and we needed to try to design for that.

Many of the people coming to the site will be experiencing grief and trauma from losing a loved one. These feelings can have a significant effect on someone’s ability to concentrate and perform otherwise simple tasks.

When refreshing your brand identity it’s essential to consider digital. Colours need to have sufficient contrast, typefaces need to be easy to read, Any brand assets or design motifs need to be used in functional ways that enhance user experience, rather than just being decorative. Failure to do these things means you could end up with an inaccessible user interface, that people find hard to navigate and get the information they need.

Regardless of the specific brand you’re working with there’s a number of strategies that are always worth implementing to create a more accessible interface with a high level of usability. We’ll always consider the following:

• Effective use of macro white space to frame content on the page and direct people’s focus
• Effective use of micro white space to break up long blocks of content into sections, making it easier to scan for people
• Appropriate text size, line height and line length to improved readability
• Accessible colour combinations
• Legible typefaces
• And many more

As part of Sue Ryder’s larger rebranding activities, we supported them in their development of a new set of brand colours for use across digital channels.

We performed accessibility checks across the proposed new suite of colours and advised where they were not meeting colour contrast levels specified by the Web Content Accessibility Guidelines (WCAG). Although we proposed some changes we were conscious not to suggest anything that would fundamentally alter the new brand identity look and feel.

Once the core colours had been confirmed we created a systematic approach for how to use them across the site that would be WCAG compliant, easy to understand and act as a single source of truth to refer to during the design and build phases of the project. We planned to observe how people responded to these choices in user research and be ready to adapt the approach if necessary.

The new brand identity included a hand-drawn typeface. It’s often recommended to avoid decorative and unusual typefaces as they can be harder to read, so we had some usability concerns.

This typeface had a soft and friendly feel to it which supported the welcoming nature of the new brand identity but its thickness meant the spaces inside and around the letters, called “counters” were very small in places and this could impact legibility.

We advised that it should be used sparingly and just for larger headings. We then used their other more legible sans serif brand typeface across the majority of the site to provide an easier reading experience for users.

We used the hand-drawn typeface on selective other web components such as quote blocks or stats. Doing this delivered a strong brand presence in the upper area of most pages as well as when delivering impactful stat or testimonial content.

We knew it was essential to create a visually calm environment for Sue Ryder’s audience to support users who may be experiencing reduced cognition due to grief.

We balanced this alongside implementing Sue Ryder’s new brand design motif, a set of large organic shapes used in clusters.

These clusters of soft shapes reflected closeness, community and support and were a core part of the new identity. They work particularly well on outside advertising to grab attention, but a subtler use was needed on the new site design so we didn't create unnecessary distractions from the content.

We used these brand shapes in a functional manner across the user interface. One example of this is on the event pages where we supported the discovery of important event details by placing eye-catching brand shapes next to each point.

Our usability testing showed this was an effective way to draw people's attention to that part of the page.

We were able to be older in the use of brand assets on many other components and templates across the design such as hero banners, seen at the top of pages. These banners included a lot more colour and shape and so delivered a strong brand impression as soon as the audience landed on those pages.

With this varied application of brand assets, there’s a strong brand presence but also a focus on usability on every page.

These brand shapes were also used to frame key content, that was popular with audiences, such as a content block that presented people’s personal experiences with grief. I felt it was important to use these clusters on that component for several reasons:

• They draw attention to the valuable content because they’re large, bold and colourful
• The clusters visually emphasise the content’s themes of support and community because of the way they wrap around the content
• As people are engaging with the content and potentially experiencing a strong positive reaction of feeling understood there’s an equally strong brand visual that attaches itself to that feeling

At Torchbox, we practice human-centred design to focus on the needs of the user. We do this to build a stronger engagement between organisations and their audiences. Developing accessible and usable designs is part of that. This meant we were able to support Sue Ryder’s vision to ensure everyone at the end of life or living with grief can access the help they need.