Final Oxfam Contact Us page design

Oxfam

UX Research & Design
Project Overview
The key objectives of this project were to improve supporter experience, retention and engagement on the Contact Us pages of the Oxfam website.
In the project kick off meeting Oxfam's representative explained they wanted Supporters to engage in digital communication first.
They wanted to create a welcoming and supportive online environment that mirrored a real world customer service interaction.
Scope
The scope of this project included the Oxfam Contact Us pages, an interactive communication function, the MyOxfam Portal login and account creation pages and the MyOxfam Portal information architecture.

The Oxfam Website

The current Oxfam Contact Us pages grew organically as additional information was added to the site. This resulted in long lists of information with few visual cues to importance or frequency of use and a failure to direct people to self-service on the MyOxfam Portal.

Original Oxfam Contact Us pageOriginal Oxfam Locations page
Original Oxfam FAQ page

Research Objectives

Understand the reasons why users visit the Oxfam Contact Us and FAQ pages
Identify existing barriers to users finding the information they are seeking
Determine preferred communication methods and potential pain points
Understand users’ prior experiences with chat functionality on other websites
Determine if users have a preconceived bias for online chat
Identify barriers preventing users from supporting Oxfam
Identify reasons a user may consider cancelling their support
Understand user motivation for supporting Oxfam

Research Plan & Interviews

A research plan was devised to target individuals who regularly donated to Oxfam or other charities. Using the research objectives as a framework for interviews it was found:
Zoom Interview Image of Interviewer and Participant
  • Regular supporters commonly only interacted with the Contact Us pages of the Oxfam website when they wanted to update their details, for example a credit card, or when then wanted to cancel their regular donations.
  • Users were open to using a chat function, however, wanted it to be clearly communicated whether they were chatting to a human or bot and have a clear expectation of when to expect a response.
  • Supporters preferred contact by email. They were very irritated by unsolicited phone calls asking for additional donations.
  • Supporters wanted transparency of where their donation dollars were being spent.

Affinity Diagrams of Interview Findings

Miro was used to conduct an online affinity diagramming workshop. Research findings were added to virtual post-it notes for each interview question and then grouped to find common themes and yield research insights.

Affinity Diagram mapping largest motivation to support Oxfam
Affinity Diagram mapping influences that triggered donations to Oxfam
Affinity Diagram mapping attitudes toward chat features
Affinity Diagram mapping influences that may trigger cancellation of donations

User Persona

Research findings were collated into a user persona to help clarify the expectations, pain points and motivations of Oxfam Supporters. This persona was then used throughout the project to direct and focus research and design decisions.

User persona. Chris believes if every Aussie paid $20 a month that would be a lot of money raised.

Customer Journey Map

A customer journey map was created to visualise a typical path a user might take to become a regular Oxfam supporter.

Customer journey map shows Chris' journey from being triggered by a natural disaster through to interaction with the Oxfam website.

Low-fidelity Wireframes

Low-fidelity wireframe sketches on paper quickly helped visualise possible solutions for the Contact Us page of the Oxfam website. Once the outlined a possible new structure it was translated to a low-fidelity design in Figma. Low-fidelity concepts were also created for Get In Touch, FAQ and MyOxfam Portal Registration pages.

A sketch of a proposed design solution for the Oxfam Contact Us page.
A low-fidelity wireframe of the proposed design for the Contact Us page of the Oxfam website.
A low-fidelity wireframe of the Get In touch page
A low fidelity wireframe of the FAQ page
A low fidelity wireframe of the MyOxfam Portal registration page.

High-fidelity Wireframes

The first round of high-fidelity wireframes were created with Figma. They included friendly page greetings, clear MyOxfam registration call to action, large tiles to access additional information, a clear map of locations, a contact form, impact stories, other communication methods and more.

A high-fidelity wireframe of the Contact Us page of the My Oxfam website.
A high fidelity wireframe of the Get In Touch page of the Oxfam website.
A high-fidelity wireframe of the Donations FAQ page.

Usability Testing

Users were recruited from Askable to take part in usability testing. First click testing was set up in Chalkmark by Optimal Workshop and testing was conducted and recorded via Zoom. Participants were asked to verbalise the question and explain their thought process as they clicked through the tasks.

A screenshot of one-click testing of the Oxfam Contact Us page.

Final Wireframes & Recommendations

Findings from the usability testing were incorporated into the final high-fidelity wireframe designs.

Final Oxfam Contact Us page design with recommendations
Final Get In Touch page design with recommendations.
Final FAQ page design with recommendations.
Final MyOxfam Portal registration page with recommendations.

MyOxfam Portal Registration Form

First page of existing MyOxfam Portal registration form.
Second page of the existing MyOxfam Portal registration form.

The current MyOxfam Portal registration form consists of two pages of fields. Issues with the current design include:

  • Form length
  • Lengthy value proposition
  • Inconsistent data validation
  • No progress indicators
  • No cancel or clear option
  • T&Cs in dialogue box
  • No link to the privacy policy on the first page an unlinked on the second page
  • No back button
  • No help information on the second page
  • No tooltips

Low-fidelity Wireframes

The first iteration of the wireframes for this form kept the layout consistent with the existing form. The focus was on simplifying the layout and capturing the same data.

First page of the low-fidelity wireframe of the MyOxfam registration form
Second page of the low-fidelity wireframe of the MyOxfam Portal registration form.

High Fidelity Wireframe

In the final iteration of the MyOxfam Portal Registration Form it underwent a much larger design change. There is now a clear login button for existing users, a clear and brief value proposition and it has been trimmed to only include essential fields.

Final MyOxfam Portal registration form design with recommendations.

MyOxfam Portal Information Architecture

Existing MyOxfam Portal design and information architecture.
Optimal Sort was used to undertake card sorting analysis to see if there was a more intuitive information architecture for the MyOxfam Portal.
Common tasks were added to the tool and users were asked to group them by function.
Four common menu names emerged from the testing:
  • Details
  • Donations
  • Fundraising
  • Communication
Dendrogram of card sorting analysis results.

Information Architecture Testing & Results

Treejack testing of the proposed MyOxfam Portal menu.

The menu items identified in the card sorting analysis were usability tested with excellent results.

All users were able to swiftly locate the menu item that should use to complete a task or locate information.

Outcome

First slide from the Oxfam Presentation

The findings of this project were delivered to the Oxfam Digital Marketing team in an online presentation in early September 2022.

Feedback from the Oxfam team was very positive and they were impressed with the quality of work. They were very engaged and asked insightful questions about the research.

All research and assets have been made available to Oxfam for use in their ongoing web and portal redevelopment project.

Copyright Demelza Sutherland 2022