After the website rebrand, the next objective was to redesign the homepage that would better reflect the new strategy.
To redesign a homepage, that would meet business objectives, user needs and based on homepage best practices by:
Looking at analytics
Gather inspiration from competitors and comparators
Mock up different propositions
Identify what we want to find out in research
Iterate on designs based on research outcomes
Reflect the new strategy and three pillars, Community, Campaign and Research.
Allow other stakeholders to feature content and display more than one message on the homepage.
Include more stories and pictures to make the page livelier and show how we help people.
About the old homepage
The old homepage was designed based on the site structure. The key areas of the navigation was information and support, getting involved, our research and about us. However, It had grown organically over time and started to lose its hierarchy.
Some of the key Homepage best practice was taken from the NNGroup. The recommendations was the following:
Include a one sentence tagline
To group all corporate information in one distinct area
Emphasize the site's top high-priority tasks
Show examples of real site content
As recommended by the NNG, we looked at the analytics to identify the users highest priority tasks. This was achieved by looking at the most clicked links.
What we tested
We tested 3 static versions of the homepage. Each propositions has their disntinct features to compare against in research.
Similar the old homepage, this version was structured based on the site's information architecture with promoted content within each section and used the hero component or hero banner for brand messaging. Stories was implemented at the bottom of the page.
This version was structured based on our new strategy and used the hero component to promote content (face coverings). Areas of the business could promote content in the form of stories.
An iteration of version 1 with a larger hero component with image. Half width cards was added to feature content as opposed to full width. One card was used to feature content and the other to feature related stories in the relevant section. The cards were colour coded differentiate the two content types.
What we wanted to find out
Planned with the researcher to identify the following research objectives:
Do our users undertstand what our organisation does? What we offer?
Is our mission statement communicated well?
Do they know what they can do on the website?
Does the homepage help users perform the task they set out to do?
How easy and clear is this experience for them?
Including brand messaging at the start of the homepage helped explain our purpose.
Structuring the homepage based on how people group content helped them complete tasks more efficiently.
Overlap between content affected task completion more than positioning on the homepage.
People preferred the version of the homepage they were more familiar with.
The hero component should be used for brand messaging with a relevant call to action.
The new hero banner was set to have a maximum width of 1200px to not take the main benefits of a larger display, which is to be able to see more content without scrolling.
This section of the page was based on how people group content. Each with a heading and links based on top tasks.
Overlap between items or similar links should be avoided where possible.
This was solved by removing items or making them less prominent through the use of color.
Content can be featured within the relevant section, keeping the page’s hierarchy.
The three areas of the organization strategy was highlighted in the About us section to better communicate what we do. The addition of iconography helped users differentiates the different areas.