Public sector services and departments need their websites to display large amounts of information in an accessible way. Stakeholders are invested in function more than brand image, but this doesn’t mean public sector web design is boring!
Visual elements play a large part in accessible web design. This is design that makes a website usable by those with impaired vision, motor difficulties, neurodiverse traits, deafness or impaired hearing. For this project, accessible design was particularly important, as Hearwell is a group studying treatment options for hearing loss. Design features such as high colour contrast, strong focus indicators and animations can make it easier for disabled users to navigate the website.
Hearwell is a public sector research group working on military hearing loss treatment. It is a collaboration between the Ministry of Defence and NHS England which works to find treatment options for auditory trauma, tinnitus and sudden hearing loss.
We were approached by the group and asked to create a brand and a website to showcase their completed and ongoing research and to attract people who may benefit from their work. The website needed to be informative, engaging and accessible.
The brand imagery combines a line drawing of an ear with the letterform ‘h’ for a simple yet effective logo. This immediately illustrates the focus of the group and is used throughout the site, including in the loading animation.
Our colour palette reflects the medical field of research with white, teal and dark blue accents. Using high contrast between white and dark blue has helped to make this website accessible.
Brand messaging invites users to ‘rediscover the sounds that you love’, creating an emotional incentive to take part in research trials.
The design feature we are most proud of is the absolute wealth of animation on this website. Encouraging users to dive deeper into the content, the micro-interactions on each button and icon really bring this design to life. As users scroll down the page, headings and banners slide smoothly into view.
At the end of the home page, the brand logo appears line by line as though it is being sketched out in front of you. We also used this animation for a custom page loader, creating brand associations at every opportunity.
Our minimalist icons are also animated, inviting users to roll their mouse over each one & read about the different sections of the website.
When users click ‘Get in Touch’, a wave ripples out from the point of click to cover the button and washes over the contact form page as it loads. This consistency of animation ties the pages together, removing psychological barriers to making an enquiry.
To add a unique touch to the website, we used a custom cursor, replacing the standard ‘mouse arrow’ with a blue dot. The high contrast against the white background reduces chances of losing your mouse while on page. We introduce custom cursors in our designs to compliment the style of the website. They also give users a little novelty to play with.
Finally, when users reach the Call to Action section, our cursor dot transforms into a moveable ‘Contact’ button. This allows users to click anywhere in the final banner to reach the contact form. Interactivity like this helps users feel personally in control of the website and can create a really attention-grabbing CTA.
Our work with healthcare, public sector and educational institutions has taught us the importance of accessible design. Making websites that can be used by those who navigate with a keyboard or use a screen-reader is an important part of democratising the internet and ensuring we consider everyone.
In this design, we’ve used a high contrast between text and background, clearly labelled buttons and links and included alt text to enable automated screen-readers to describe images. In testing by Lighthouse, this website design received an accessibility rating of 100%.
We create the design system and global settings that will be used across the board before building any pages at all. By starting with the building blocks, we have dramatically reduced the number of edits and revisions required. This meant everything flowed smoothly and we finished this project in great time.
KIJO Creative are proud to share that our Hearwell Website has won 4 CSS Design Awards. These are Special Kudos, Best UX, Best UI, and Innovation. With this project, we’ve shown that our new development process produces excellent results.
Our Ministry of Defence clients are so pleased with our work that they have recommended us to other public sector bodies. As a result of this, and our previous success in public sector web design, we are now on the Approved Suppliers lists for the Ministry of DefenceoD and NHS Trust Birmingham.
If you operate a business or organisation in the public sector and are looking to work with an award winning design agency on your branding or website design, simply contact us today. – We’re happy to talk.
