• Role: UX Designer

A UX case study into a website redesign for a humanitarian organisation.

The Brief

Slave Free Trade wish to be the go-to-source for news and the latest information regarding slave free trade and the elimination of slavery in supply chains. As a relatively new NGO, Slave Free Trade were seeking to improve awareness of and engagement with the Slave Free Trade organisation.

As the current primary marketing channel, of particular focus for Slave Free Trade was enhancing perceptions towards its existing website through a redesign. Whilst existing features would remain, the redesign would allow users to more easily find the information they require, find gifts, and make donations. The key objectives for the Slave Free Trade website are increased newsletter signups and donations.

Current Pain Points

Through analysis of existing research, I determined engagement with NGOs and charities to be primarily via donations, followed by buying an ethical product, and volunteering. Whilst younger audiences are more likely to volunteer or sign a petition, engagement from older audiences is more likely to be in the form of a donation.

For the Slave Free Trade website, critical tasks are:
  • ► Access to news and information
  • ► Newsletter Signups
  • ► Donations

Industry research informed three proto-personas with varying pain points.

Reconciling these pain points against the Slave Free Trade critical user tasks, I identified some areas where the current design was falling short. Combined with a heuristic markup of the existing site and usability testing, I identified three key problems to be addressed through this redesign.

Problem 1

Accessing specific news and information is a time-consuming and confusing process

From our proto-personas and usability testing it can be seen that users such as students or those wishing to stay up to date desire efficiency and clarity when tracking down specific information published by Slave Free Trade. This will avoid confusion and reinforce Slave Free Trade as a useful information resource. As an easy to use and efficient resource, this will drive further engagement with the website and the organisation more broadly.

Problem 2

The donation experience is bothersome and lacks context to motivate users to donate

During usability testing, users were bothered by the donation modal appearing upon landing on the home page. Furthermore, users queried what happened to their donation as there was no details regarding how donations were used. As Slave Free Trade is a relatively new NGO, users are likely unfamiliar with the Slave Free Trade mission and how their donations help.

Problem 3

Newsletter signup involves confusing steps and has unexpected outcomes

When searching for the newsletter signup on the homepage, users were confused if they had found the newsletter signup with the current call to action stating, “Be a part of the movement”. Is this the newsletter or something else? Furthermore, there is no confirmation or user feedback after entering an email address and clicking on the call to action. There is no indication if the signup has been successful or not. This lack of confirmation exists for the additional newsletter signup field further down the page with the call to action, “Subscribe!”.

> “I think it happened, I think I did it. I don't know, I don't see any messages that I'm subscribed or not. OK so kind of confusing…”

The Design

The design solution needed to meet the Slave Free Trade website objectives of greater engagement with news and information, and an increase in newsletter signups and donations. The most evident changes to be made were:
  • ► Greater differentiation for call to action buttons that involve a critical task
  • ► Simple steps that satisfy the mental model users have with regard to completing common tasks such as a newsletter signup
  • ► Enhanced filtering of news and information found in blog postings, to create frustration-free access to relevant information, driving return visits and increasing engagement with the Slave Free Trade website and brand more broadly

The target users

The target users have busy lives and need simplified processes to access information and complete tasks. They want to feel confident they can easily find information they require and that they can trust the Slave Free Trade website should they make donations. This sense of confidence and trust can be established through simplification of existing processes on the website (e.g. finding news) and ensuring logical steps in these processes meet expectations and build trust in Slave Free Trade as an organisation.

Strategy and tone

We want users of Slave Free Trade to feel informed and up-to-date, having spent time on the website, users should feel Slave Free Trade as an insightful source, that is trustworthy, and a proactive organisation. The tone should be: engaged, proactive, reliable, trustworthy, encouraging, and inspiring.

Initial Sketches

Solution to Problem 1

Currently the blog section, containing the latest posts and news, lacks organisation around key topics. Through wireframes I explored the use of keyword tagging or key topics that could then be selected by users, thereby isolating subjects of particular interest to improve the ease and efficiency with which they find news and information.

Solution to Problem 2

A more established NGO could perhaps use a donation modal in exceptional circumstances, such as emergency relief assistance, but generally a prominent call to action would suffice and overcome the bothersome effect on first visiting the site.

To reinforce the inspiring and trustworthy tone of Slave Free Trade, also offer users details as to what their donations are used for or link to a separate page describing how donations help Slave Free Trade’s mission.

Solution to Problem 3

Have clearly understood phrases for call to actions, generally verbs such as “Subscribe”. As a critical task, that can be prompted at any time based on the content a user is reading, include newsletter signup within the main navigation as a prominent call to action.

Final Mockup