How do you create an engaging and interactive website whilst still sticking to strict public sector brand guidelines? This was the task we faced when creating the brand new website for Hearwell, a joint project between the Ministry of Defence (MOD) and the NHS.
This new venture would provide research and treatment opportunities to improve hearing health across the MOD landscape and they tasked KIJO with creating the overarching branding and website for the project.
So what did they need?
As a first of its kind project, Hearwell required a website that would reflect the uniqueness of the venture. It needed to be striking and grab attention but it was essential that the brand and website were kept in line with existing MOD design guidelines.
Hearwell was a standalone project therefore it needed its own identity online that was tailored towards military personnel.
The website had to portray the underlying personal and inspiring message of the venture whilst showcasing a high-level of professionalism. We needed to strike the right balance between being informative and keeping users engaged.
It was decided that the website would depict three key brand pillars that we were able to use throughout the design:
What did we do?
We knew we needed to create a website that would stand out and offer an unrivalled user experience but that was still sympathetic to the existing MOD branding. We therefore:
Implemented cursor effects – Every button on the website has a wave effect when clicked which mimicked a sound wave. Just like in the real world, when a button on the website is clicked it would move sound.
This feature helped to add an interactive element to the website that directly linked to the theme of the venture. The custom cursor effects were the ideal way to subtly add personality to the website without distracting from the key messaging.
Created unique animated icons – The unique animated icons were activated when a user hovered over them. Each icon depicted one of Hearwell’s core services. The subtle animation helped to make the page more dynamic and worked to further explain Hearwell’s offering.
The Hearwell website had a lot of information to present to users therefore small animations and engaging features such as these icons broke up streams of content and made the page a more interesting and interactive experience.
Subtle animations keep users engaged and encourage them to explore deeper into the Hearwell website and brand.
Devised a snappy page loader – We created a snappy page loader which draws an outline of the Hearwell brand as the page loads, keeping users attention as they navigate around the website.
Small and subtle features such as this help to elevate the overall user experience of the website and create an online environment that people will remember long after they’ve left.
Added engaging call to actions – Engaging call to actions (CTA’s) at the bottom of every page ensured that users were retained within the Hearwell landscape for as long as possible. Each CTA animated when hovered over and created a unique cursor.
These unique cursors aligned with the wave effect that was implemented across the website, further linking each feature to the idea of sound and vibrations and Hearwell’s key service offering. They allowed users to feel confident in the Hearwell brand, an essential aim of the website, by creating an easy to navigate online experience.
The final result
The final result was a website that was in keeping with existing MOD branding but that still pushed boundaries and offered users a unique experience, mirroring the ethos of Hearwell.
It was crucial that the final website was something that Hearwell could continue to contribute to long into the future which is why we created an easy-to-use content management system in the backend of the website.
This website was a long-term investment for Hearwell and the team needed to feel confident adding their own content to the platform. A simple category and navigation system helped to achieve this.
The finished website has received high praise from numerous stakeholders across both the MOD and the NHS, particularly for the visual clarity and clear communication of the brand’s clinical values.