Homepage redesign

After the website rebrand, the next objective was to redesign the homepage that would better reflect the new strategy.

My role

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

Homepage requirements

  • 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.

Best practice

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. 

Version 1

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.

Version 2

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.

Version 3

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?

Research findings

  • 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.

Recommended design

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.