Client Work Sense UK

Sense is a charitable organisation supporting and campaigning on behalf of people who are deafblind, or have a hearing or vision impairment with another disability.

The old Sense website was built with a proprietary CMS which had become tired and difficult to maintain. The aim for the new site was for it to become a platform which would allow greater flexibility for future campaigns and integrations.

The new Sense website was redesigned and built with accessibility at its heart. Research and testing with visually impaired users before, during, and after the design and build phase, made sure the site would be easy to use and worked well with screen readers.

Since the site was launched:

  • Organic traffic has increased by 25%
  • Donations up 33%
  • Service enquiries up 15%


A set of workshops were run online, with group collaboration using shared online tools.

Engagement workshops

We conducted a series of group video calls to understand the types of engagement the website needed to support, who would be engaging, and why. These sessions ensured stakeholders across Sense could be involved in the process, helping to garner support for the project across the organisation.

Visual design workshops

We held design workshops with key people from the Sense Marketing team. We ran through the Sense brand, key brand assets, reviewed inspirational and competitor sites, and showed a set of initial mood-board ideas we had prepared.

A moodboard experimenting with various brand assets.

Wireframing workshops

We ran collaborative sessions focused on wireframing. During these sessions we worked on creating a new site structure using card-sorting and key page analysis.

These processes allowed us to start sketching mobile wireframes to ensure important page content was prioritised before any layout work began.

Live mobile wireframing resulted in priorities being considered right from the beginning.

Interactive wireframe prototype

Taking the mobile wireframes as a basis, we put together an interactive wireframe built on WordPress. The prototype was used to flesh out layouts and journeys through the site. It also allowed Sense content editors to start considering and creating content.

Particular emphasis was given to navigation. Flyout menus were used (with a strong focus on keeping them accessible) enabling users to get directly to important content from every page of the site.

This prototype was sufficiently developed to allow task based user testing.

Initial design work

Initial design ideas.

Based on the inputs from the wireframing and design workshops we worked on some initial page ideas. We worked on ensuring a good balance between white space and brand colours, as well as achieving the right balance between Sense’s primary and secondary palette colours (purple and orange).

Final page designs ready for build.

Design system

We built a design system for Sense that provides a a library of the components that make up the site and code examples for any future developers working with the online digital brand.

A design system was created for Sense detailing all aspect of the website.

Custom WordPress Blocks

A key requirement of Sense’s content editors was the ability to have control over page elements to provide dynamic and highly visual pages.

The split banner block allows a lot of customisation whilst retaining brand aesthetics.

Scalable vector graphics

The nature of the brand, together with the requirement for fast, efficient downloading steered us quickly to working with vector graphic elements. Many of the graphics supplied in pdf and illustrator formats needed to be simplified to keep file sizes down.

Redrawn and simplified illustrated elements that retain the same graphical feel.

Documentation and help videos

We provided a set of documentation built right into the WordPress admin interface. These included video walkthroughs to help use the block editor, default blocks and the new custom blocks built.

Narrated videos walk content editors through use of the editor.

Sign language tool

We also built a tool for the site to allow people to learn how to sign their own names using British Sign Language. Simply enter your name and you are shown instructions with a visual to spell out each letter.

The sign language tool allows your name to be spelt out with British Sign Language, with visual instructions.