Website overhaul

Key stages of the project

Understanding key user groups

Before any design or development work started we carried out in-depth research into existing users of the website and the charity's supporters. The charity had a vast about of information and knowledge about supporters, so we started by looking at this.

Reviewing data sources

Data from a variety of sources was collected, analysed and used to understand the different groups of website users. This included CRM, analytics, social media, Hitwise and YouGov.

Collecting extra quantitative data

Online surveys were used to gather useful information about how and why users interact with Christian Aid. Demographics were also collected so we could match together answers with the other data we had reviewed.

Grouping data

We drew out user groups by grouping similar behaviours and needs.

Internal workshops

We held sessions with staff who interacted directly with users, this included support and regional staff who work with church groups and campaigners. This allowed us to gather additional qualitative information. This helped give context to the survey data and gave colleagues the opportunity to share valuable information and to build consensus across the organisation.

Focus groups

These were held with each user group, to find out in-depth information about motivation and needs. They also helped to validate or dispel assumptions that were held internally.

---

Setting up foundations

Iterative approach

One of the key objectives of the project was to learn as we went. So we worked iteratively, taking the highest priority sections of the website first. These were the donation form and emergency appeal section, which are talked about in more detail below.

Design system

I paired with another designer to create a design system, which included grid, typography, colour, icons, form patterns, tables and various interaction components. The style was based on existing brand guidelines but with specific information for use on the website. This brought clarity and consistency to anyone working on the website, internal staff or external agencies.

Content audit

All pages of the existing website were reviewed and given an status of keep, review or delete. This was based on usage, age, last updated date and stakeholder input. This gave us a starting point for the information architecture.

---

Information architecture

Christian Aid is mainly a site where users are trying to complete a task, rather than browsing, so the focus for the information architecture was findability over discoverability.

Competitor review

We looked at patterns of competitor websites to see what language was used. Often people who support one charity will support others so using similar language would help with a users mental model and make it easier for them to find what they are looking for.

Data analysis

I assessed key journeys on the existing website. There were users yo-yoing between main sections of the site, which showed us there was confusion between the current labelling terms About us and What we do and Act now and Get involved. Information scent was low as terms that were too similar.

Open card sort and site map

Using the site content labels were created for the key pieces. User were asked to sort these into 4-6 groups and give each group a name. This tested understanding of the labels and helped define the site structure. From this I created a site map.

Tree test

Using the site map we set users tasks to find content from the top 10 user journeys. This highlighted the areas we needed to work on. Sometimes this was changing the label, moving the location or just ensuring we added links across the site to make it easy to find certain content.

Navigation system

A global navigation was added above the main navigation for subsites. A secondary menu was added below the main navigation in certain areas of the site where the deep content still needed to be easy to get to, for example on campaign sections where users would be moving around in that one section of the site. The footer also had navigation links as users often look there when they are lost.

Search

Search supports and extends navigation so it must be easy to find. It is placed in the top-right corner on desktop and with an empty box and magnifying glass as these elements all fit with a users mental model and what they scan for. On mobile it is within the hamburger menu as users expect this.

Filter

Most users won’t engage deep processing for this task, therefore they are using working or short term memory. The aim is to reduce cognitive load by using recognition of terms, rather than recall and needing to come up with a search query. Keeping the filter visible at all times means a shorter distance to reach the filter and tweak it whilst viewing the results

---

Emergency section

The aim was to increase donations during an appeal. The process shown below is how each section of the website was approached.

Research findings

One of the personas was an emergency donor, this was someone who was an infrequent visitor to the site and only supported Christian Aid during an emergency appeal. They had different needs to other very committed user groups.

We discovered that the existing emergency section had too much information and was not clear enough about the impact of donations of how money was being spent.

This section has a higher number of new visitors and mobile visitors and needed to be optimised for those users.

Stakeholder workshops

Sessions were held with stakeholders to understand the aims of different departments and the goals of the sections of the sites that were relevant to them. This helped uncover different user groups and understand what messaging and content was available.

Sketching ideas

I started by sketching out layouts on paper to see how the content could be laid out and to quickly throw away anything that didn't work.

Providing access to quick information

Research told is that users wanted to know how their donation is spent during an emergency. To meet this need simple visual icons were developed to reflect the services that Christian Aid provides. Icons were used because people are more likely to retain information if there is an image to support it. User testing confirmed the icons provided an accurate and visual reference at a glance.

Section structure

Analysis of the old section showed that many users were getting lost and the labels were unclear. Remote testing helped ensure that the proposed new structure and labels were intuitive.

Usability testing

Task-based remote usability testing was used to confirm if users could find what they were looking for and where they clicked to navigate. I designed tasks around the most common actions users take.

Clear calls to action

To meet the persona need of 'speed and ease of use' a clear call to donate was placed at the top of the page. Further down the page listed other ways to support the appeal.

Personal stories

Task-based remote usability testing was used to confirm if users could find what they were looking for and where they clicked to navigate. I designed tasks around the most common actions users take.

Impact of donations

To meet the persona needs of 'wants tangible impact' and 'wants to see how money is spent' on all emergncy pages there are now clear links to find out about how money is spent and the way Christian Aid works in an emergency, as well as links to read about past emergencies to find out the impact that donations have had.

Outcomes

During the peak of an appeal 31% of visitors were clicking on the main call to action on the appeal page. Around 70% of visitors were making it down to the next area of call to actions, which is halfway down the page.

---