CAF homepage redesign
Shortlisted at the UX UK Awards 2018 for Best User Experience and Best Effect On Business Goals

We were shortlisted at the UX UK Awards 2018 in the categories Best User Experience and Best Effect On Business Goals, which is about impact on business as a result of improved user experience. Read more in my blog post

Sep 1 2017 – Aug 31 2018
compare to Sep 1 2015 – Aug 31 2016

88% more mobile traffic in the last two years
25% increase in new visitors in the last two years
16% increase in returning visitors in the last two years
21% increase in organic search in the last two years
26% faster average page load time in the last two years (40% in Chrome)

The challenge

CAF required an update to their homepage to complete the new look and responsive site we’ve been working towards during 2017/18. This work involved UX design, information architecture and thorough user testing of all new elements.

Together with UX agency, Webcredible, I designed and tested how the new homepage should look whilst keeping in mind the key business objectives the page should fulfil, which were:

1. Brand story – help convey CAF as a brand, a story and a service
2. Navigate visitors to relevant areas of the site** whether it’s products, campaigns, CAF Bank, news etc.

The objective was to ensure stakeholders felt included in progress and decision making as well as completing and testing the final design deliverable ready for development.

Key objectives 🎯

  • Increase New Unique Page Visits of the homepage by 10%
  • Reduce bounce rate of mobile device visits to the homepage by 50%
  • Depending on the chosen solution either increase or decrease the time spent on the homepage. If the solution focuses more on navigating users to other areas we’ll look to reduce the time spent on the homepage. Whereas if the style focuses more heavily on storytelling we would look to make people dwell on this content longer
  • Depending on the chosen solution we will look to increase or decrease the Next Page Rate

Deliverables

  • High fidelity prototype ready to hand over to my development team
  • Design documentation and interactive/responsive behaviour notes as required by my development team to aid the build process
  • Final presentation to CAF stakeholders
  • High level testing report including recommendations around how to improve the design based on testing feedback

Approach

  • Initial research and stakeholder workshop to define design direction and aims from the stakeholder team

  • Created low-fidelity initial page concepts based on the workshop outputs
  • Identified content and innovative features to enable full scoping of designs and build phase
  • Incorporated feedback from the business on the initial wireframes
  • The designs were tested using remote, first-click testing with a sample of CAF users across different user types
  • We then continued into visual design and designed the responsive behaviour of the page

Prioritisation workshop: based on £100 exercise

In this method of prioritisation, participants assigned relative value to a list of items by spending an imaginary £100 together. By using the concept of cash, the exercise captures more attention and keeps participants more engaged than an arbitrary point or ranking system.

Prioritisation workshop: Description diagram

I found it easier to prioritise features and get increased buy-in from project team members using a description diagram. This allowed us to focus on the goals and priorities a bit more.

Initial wireframe ideas

CAF’s Mission and Campaign module

  • Customers need to understand at a glance who CAF are and what they do.
  • We should have dynamic content that we can use to surface important events or provide value and interest for returning visitors.

  • Option 1: provides a consistent company mission for all visitors when they arrive. There is also a space that can be used for campaigns, important news or case studies that the business would like to push.
  • Option 2: provides the ability to have many campaigns or important content at a glancefor users. On first a first time visit, all customers should see the mission statement first, however, we can personalise this on repeat visits based on their browsing to show them instead content that is more valuable to them.
  • The draw of this approach is that users cannot see both a main campaign and the mission at the same time.

Services segmentation module

Who are CAF module

Users should be able to discover who CAF are, what they stand for and able to trust CAF’s authenticity. Users want to know that CAF is reputable and has experience in the sector.

News and thought leadership module

Users should be informed of the latest news about CAF, the charity sector and any appeals or urgent causes.

Visual design

User testing

Users should be able to discover who CAF are, what they stand for and able to trust CAF’s authenticity. Users want to know that CAF is reputable and has experience in the sector.

  • We ran remote, unmonitored online first-click testing of the homepage with different audiences to validate:
  • The story: What are people’s first impressions of CAF’s mission and messaging
  • The navigation: Whether people understand which option to select on the homepage to proceed with key tasks that are essential to CAF revenue streams
  • We recruited 100 members of the general public (who will likely not be aware of CAF) and asked them to take the survey. We also sent the survey to 500 of our individual customers and 250 charity customers
  • Questions like “Where would you go to find more information about donating to a charity”, “You want to find out more about CAF, where would you go” and “Where would you click to find how CAF have helped people in the past” were asked.

  • Thorough analysis of testing results & recommended homepage updates
  • After testing, we discussed, prioritised and recommended amendments to the homepage. Examples were giving headers more context, ensuring the carousel always has a case study element and always have a clear path to contacting CAF in About us and logged in pages.