HIN Website Refresh

Health Innovation Network is the Academic Health Science Network (AHSN) for south London, one of 15 AHSNs across England. As the only bodies that connect NHS and academic organisations, local authorities, the third sector and industry, they are uniquely placed to increase the spread and adoption of innovation across large populations, at pace and scale.

HIN had recently undertook extensive work on the vision, values, member offer and business plan, and as a result found themselves better equipped to communicate more clearly about the organisation. It was therefore the ideal time to refresh their web presence to present their work and the organisation online, taking greater advantage of the Health Innovation Network website as this was the organisation’s largest online asset with an average of 9000 monthly page views.

Following receipt of the web refresh brief, Cynergy understood that the site was hosted in WordPress and there was a need for some external expertise to support the organisation to reassess the user experience and journey of the existing site, as well as refresh the overall look to align with the updated vision, values and member offer that had recently been developed, whilst still be in line with current organisational branding.

Several areas were outlined to to achieve this, including:

  • Update of navigation to improve user journey and therefore encourage longer visits and more engagement
  • Ability to embed more automated functionality to reduce the number of manual updates required to keep the site up to date
  • Fully responsive website across desktop and mobile devices to support all browsing
  • Refreshed design with simple, clean, modern, and bright feel
  • Creation of a suite of templates that can be updated internally.
     

 

Improving the user journey

Based on feedback from user research already undertaken, it was clear that there was an issue regarding length of stay on the site and also a lack of page and content views, as well as language and keyword search terms seemingly being a barrier to users accessing content. We therefore suggested some further investigation on the theme pages to understand why this was happening via a UX Review to make a full and informed decision regarding next steps. We also looked to implement a series of user tests, to help us to further understand why this was happening.

This included:

  • A review of all content on the website and creation of an accurate sitemap to fully understand the website navigation and structure, and identify where content actually sat to build a full and accurate picture
  • Installing Hotjar on the website to gather data e.g. page heat maps, polls, general feedback
  • Sending a survey to key stakeholder groups to gather more detailed feedback
  • Creation and implementation of navigation and usability tests on website with the internal team and wider stakeholders, such as:

 

Tree testing - a usability technique for evaluating the findability of topics on a website. This was done on a simplified text version of the site structure without the influence of navigation aids and visual design - which helped to prove the site structure worked before getting into design.

Card sorting - a quick and easy way to design an information architecture, workflow, menu structure or website navigation paths. Card sorting was used to find out how people thought content should be organised and get the user insights needed to make informed information architecture decisions.

First Click Testing - reveals first impressions of designs and screenshots. This helps to increase customer engagement and task-oriented success rates by getting quick feedback on designs before we implemented or updated them. First click testing of screenshots and visual designs ensured that their users could get started on the right foot when they landed on the website.

Following the collection of data from the above tests, we then interpreted the findings and produced a UX Report which identified what the challenges were on the site, why they were happening and what solutions we would implement to address them in the new navigation and site structure and design.

 

Update navigation

Following the review above, Cynergy then pulled together an updated navigation and structure for the site by creating an updated and refreshed sitemap. We then tested the proposed changes with stakeholders to ensure that it effectively met their needs and resolved the issues that were at play. This meant we could be confident that we had the right solution before implementation, which ultimately saves costs and time in the long run.

To test the proposed new changes, we developed a new sitemap and created a tree test to assess the site structure as well as generate a set of wireframes of the key templates to test the new navigation.

 

Homepage and general site refresh

As the homepage is the first impression that users get of a website and is the main signposting page across the entire website, it is imperative that it is impactful, engaging and encourages users to explore further across the site.

We therefore looked to refresh this page, highlighting key content and latest information from across the website here to increase visibility and encourage further engagement with wider content. Here look to pull through information such as latest news, resources, case studies and events. Not only will this keep the website content new and fresh, it also aimed to reduce demand for the team to keep the homepage up to date, as we worked to ensure that the functionality of the site was able to pull the information through from various other pages, updating automatically.

Feedback from previous user research also suggested that the homepage did not make clear what HIN do. It was therefore necessary to showcase HINs work on the homepage too by featuring content such as their latest Annual Review, project case studies, fresh video content, news updates and more.

With regards to the overall look of this page, we focused on making the overall design and layout much more engaging and impactful by ‘cleaning up’ the content that previously sat on the homepage, allowing for more white space. This creates a brighter and less cluttered feel which helps users to focus more clearly on the content.

To further enhance the design, we also made much more use of illustration and iconography as provided in the brand guidelines, to bring the content to life and help the flow of the user journey as they are able to scan the page much more easily and navigate to where they need to go. The use of iconography also helps to create familiarity and consistency across the site; therefore, users are able to recognise icons and what they signify quickly and easily, meaning that they can process the information presented to them much more efficiently. We also included relevant social media feeds on the homepage, e.g. Twitter, to also showcase latest activity and conversations.

Regarding some more general site updates to improve the usability across devices, we also implemented a maximum width on the website design, so content does not scale as large. An example of this on the previous site was the video on the homepage, as this pushed a lot of the other content down the page, below the line. Implementing a maximum width on the content helped to fit this within the page design much more effectively and make the content easier to read.

Based on the refresh of the homepage design, we also flowed this across all other pages and templates to create consistency throughout, so all pages align visually.

Summary

Cynergy’s thorough understanding and experience with WordPress, web design, and UX testing and design meant that we were well-equipped to support HIN in their refresh and restructure of their website. This will not only improve the user journey and make it a much more intuitive resource but will also look and feel fresher whilst retaining the brand and identity that users and members know. Internally it will also support the HIN team to keep the site up to date with new content in a consistent and professional way via a new set of templates.