Fairtrade Website Redesign — A UX Case Study – UX Collective

Working in a team of 4x UX designers in a 2.5 week design sprint my colleagues and I were tasked by General Assembly with the opportunity to work directly with Fairtrade Australia & New Zealand (Fairtrade ANZ).

Our brief was to provide Fairtrade ANZ with recommendations and suggestions on how they could improve the overall UX of their current website and create a positive user journey that aligns with their existing marketing strategy.

Key Deliverables:

  • User research, user flows & user journey refinement
  • UX strategy improvements & recommendations
  • Persona review & suggestions
  • Digital wireframe suggestions (mid-fi)
  • Presentation (30min)

Methodology

Using the Double Diamond design process and Agile methodologies we applied a SCRUM framework to the 2.5 week sprint.

Early into the project I took on the role as Product Manager & communicated daily with our clients to ensure they were kept up to date with project developments. Scheduling meetings via skype/ face to face as well as recording and supplying all meeting minutes meant that any ideas discussed were well documented for future reference.

Trello — Used as primary project management tool within the team. Here I created, prioritised and delegated the project Backlog tasks (a list of task and requirements to execute project deliverables) at every stage of the process.

The Fairtrade Trello Board I managed showcasing – Project Backlog tasks, due dates and task owners.

Daily Stand Ups – held for 10 mins each morning where teammates delivered progress updates on the tasks they were completing. Here Backlog tasks from trello were heavily referenced and daily goals outlined and time boxed.

Weekly Retrospects – held at the end of every week (3 total) to ensure team members kept on the same page and communication was open and fluid.

About Fairtrade ANZ

Fairtrade is an active member of the global Fairtrade system and undertakes activities in the following key areas:

  • Growing the demand for Fairtrade certified products such as coffee, chocolate, tea and cotton
  • Raising awareness of the Fairtrade Mark
  • Supporting producer organisations in Paupa New Guinea, Timor leste and the Pacific Islands
  • Providing independent certifications for products and licensing

/ Phase 1: Discover

User Interview Research

In order to build a better understanding of how the Fairtrade ecosystem and determine whether users already had an existing understanding of Fairtrade’s certification we conducted 4x 1on1 user interviews.

Key Findings:

  • Supporting local farmers is the main reason cited for buying Fairtrade.
  • Coffee is the primary product that comes to mind when thinking about Fairtrade, many people are unaware of Fairtrade products beyond coffee and chocolate.
  • One interviewee had been purchasing Fairtrade coffee for years after seeing a thought provoking documentary.

“You are doing something good by buying Fairtrade and you feel good. It’s not so much about the price but more about the quality. You’re doing an act of kindness and feel good about that.”

Summary

The decision to buy Fairtrade products occurs in the supermarket when the consumer is engaged in the buying process. If no brand loyalty exists, this is the best time to engage them.

Competitor Analysis

An extensive competitor analysis was conducted with both organisations directly related to Fairtrade’s business model as well as indirect competitors, we audited information structure, layout, tone and navigation.

Key findings:

Kokako

  • Kokako’s tone of voice is friendly and direct throughout the website, which provides users with a strong sense trust
  • ‘Our Commitments’ button in the global navigation is a powerful

Rainforest Alliance

  • Rainforest Alliance separates consumer and business information by using a tab system in the navigation bar.
  • Blog filtering system makes it easy to navigate stories by issue, region or content type (article, white paper)

Thank You

  • Highly innovative company with unique marketing campaigns
  • Marketing strategy skillfully leverages mainstream media exposure
  • ‘Track your impact’ social technology to engage supporters over a long period of time

Charity Water

  • Charity Water was the most visually exciting website, the website only utilises global navigation (no secondary navigation)
  • Navigation bar is ‘sticky’ when a user scrolls the page but hides all top navigation except for the ‘DONATE’ call to action
  • Very sharp copywriting — for example “Bring impact to your inbox”

Fashion Revolution

  • A very strong social media presence in demonstrated through campaign archives and imagery used throughout the website (i.e “I made your clothes” campaign).
  • Fashion Revolution utilises a navigation bar with two tiers and provides a way for the user to self identify (i.e. I am a… “Citizen”)

Usability Testing — Current Site

We collected data on the challenges and opportunities of the current Fairtrade website which involved usability testing conducted in lab conditions; covering key navigation elements, page flow and functionality.

We asked users to perform a number of specific tasks, based on different user scenarios.

  1. An unaware user, not familiar with the Fairtrade brand/concept
  2. A business employee seeking Fairtrade stock for their workplace
  3. A business owner seeking Fairtrade accreditation for their product
Fairtrade Current Site Pages

Key findings:

Page: What is Fairtrade?

  • Users were surprised with the amount of text they were required to read in the subsequent categories. This text density prevented the users from ‘skimming’ the text and finding the information relevant to them.
  • Users were unable to tell when they had successfully discovered enough about ‘What is Fairtrade’ to satisfy their goal. Navigation required going back to the top nav after reading each page, to move on to the next topic.

Page: Fairtrade Products

  • Many users were unaware of the breadth of Fairtrade products available to them and were surprised to see Fairtrade gold under ‘everyday items’
  • Users discovered broken outbound links when selecting some brand logos.

Page: For Business

  • Users were unclear on the process for becoming a licensee.
  • Users did not feel like the website was accommodating for a business audience.

// Phase 2: Define & Ideation

Following the UX design process, activities towards forming the solution included the following tasks:

Affinity mapping

Inputs for the Affinity Map include:

  • User Interviews
  • Usability Tests on the current website
  • Stakeholder interviews

Problem Statement

“How might we make the Fairtrade website more engaging for current users and easier to navigate.”

UX Team working to synthesise our research findings

Feature Prioritisation

We developed potential features using a ‘Mental Model’ technique and mapped out their possible value using a Feature Prioritisation, including:

  1. High vs Low impact
  2. Expected vs Unexpected

Solution Statement

“Streamline the website to raise awareness of the Fairtrade brand and help educate consumers.”

Mental Model & Feature Prioritisation Charts

///Phase 3: Develop

Information Architecture

We used a user-centric approach to defining and testing the IA for the reimagined Fairtrade website.

User testing — Conducted 13 user tests to understand how users interact with the website, identifying potential problems with the current navigation.

Card sort — Informed how we could re-group the current website IA and make it more cohesive and was key to forming the new Navigation System

Content audit — We did a full review of the fairtrade.com.au website, with focus on copy under all pages in What is Fairtrade and Global Issues.

We found that IA on the current site was a significant shortcoming for users.

Content Strategy

Our research identified the importance of copy and content as a key component of a successful site.

In order to deliver a high fidelity site we brought in a content strategist to host a workshop which allowed us to better understand the 3 core categories of online users to consider while designing.

  • Skimmers want to find the information they need and get out as quickly as possible.
  • Swimmers will go a little deeper and browse more of your site.
  • Divers want to take it all in and spend time exploring.

Delivering to the following user groups; Skimmer (Unconscious/ first time visitor) and Divers (Conscious/ Return user) would enable us to deliver a website that meets a high percentage of Fairtrade’s needs.

Content strategy in action — catering to the Skimmer, Swimmer, Diver

Prototyping & Usability Testing

Several rounds of usability testing were undertaken at three different stages of the design process including.

  1. Paper prototype which moved through a number of iterations.
  2. Low-fidelity digital prototype that allowed us to take on board significant feedback.
  3. High-fidelity digital prototype incorporating the desired imagery, typography and TOV.
Three Phase Iteration of Fairtrade Landing Page — Paper Prototype, Low Fidelity and High Fidelity Screens

Key Findings:

Paper Prototype:

  • Users had very little trouble finding additional information about Fairtrade due to the clarity of its existing navigation.
  • The ‘Fairtrade products’ page is the first place a user searches when prompted to find a way to stock Fairtrade in their office.
  • Users can correctly find global issues from the home page.

Low Fidelity Digital Prototype:

  • Users do not access business information through the ‘Business’ tab in the top level navigation, instead feeling comfortable using additional prompts and call to action buttons.
  • Users feel comfortable scanning the headlines of the website’s content and continuing to scroll if the information is not deemed relevant.
  • Terminology around Fairtrade providers exposed issues. The label “Stockists” was tried and ultimately abandoned due to lack of clarity.

//// Phase 4: Deliver

Interactive Prototype

Click here to view the project `Fairtrade website – UX redesign`
This prototype brought to you by InVisionAppprojects.invisionapp.com

Future Steps

A detailed road map was outlined in the in depth Client Report we delivered on presentation day and broke down future targets into 3, 6 and 12 month blocks. We suggested that immediate focus be placed on bringing a Content Strategist on board as well as gathering psychographic data on their current/ future persona’s.

Author: Rachel Kelly

Collect by: uxfree.com

Comment

Top