Oxfam Australia
User Experience Research and Design Apprenticeship
Client -
Role -
Oxfam Australia
UX Research and Design
Location -
Melbourne, Australia
Redesigned a set of website pages and information architecture to improve the user experience within their support system and restructure the MyOxfam portal. Conducted user research, created wireframes, and implemented a new visual design. Improved and created new information architecture, conducted usability testing, improved upon the proposed design, and presented it to the shareholders.
Brief -
About -
Oxfam Australia is an Australian based charity that helps the indigenous and impoverished populations in Australia and the surrounding countries.
Oxfam Support Redesign
Shareholder Brief -
Identify the Issue -
Proposed Solution -
They want to create a more welcoming support page and improve the usability of their website's support service.
There are five lines of text on a blank canvas, each line of text has a "here" hyperlink
Some of the webpages aren't consistent with the main site
Take user feedback and create a service that fits their needs while maintaining an easy-to-navigate website
Create a design complete with information architecture and navigation
MyOxfam Portal sign-up and home page redesign would be ideal for creating a better experience for users.
Problem Overview
User Interviews -
User Personas -
Card Sorting -
I conducted individual interviews with a variety of costumers and collected qualitative data. Through this I was able to identify pain points and propose solutions.
The user personas were used to understand the user I'm trying to research. They helped me understand the needs of a user when it comes to the support section of Oxfam.
We gave the users prompts and set categories to place the prompts under. By gathering this data I was able to understand which submenus belong under which category.
Background -
First we asked about their personal background:
Age
Gender
General Location
Marital Status
Job
General Impression -
We asked users what their opinions about Oxfam:
How did they hear about Oxfam?
Do you like Oxfam?
Have you used Oxfam?
What other charities do you support?
Detailed Questions -
We asked specific questions about their experience with Oxfam:
Chat bot experience
Why they support Oxfam
Do you use MyOxfam Portal?
Influences to donate
Barriers to donate
Here are some examples of the prompts given:
A list of donations you have made in the past
Update your address and phone details
Find other fundraisers
Reset your password
Sign up to make a regular gift
A list of events where you can help raise money for Oxfam
Research Approach
Wireframes-
Information Architecture -
For my wireframe, I started with a simple layout approach by laying out the sections then detailing them.
Giving the user access to the entire personal network of IA from the MyOxfam Portal was key.
Using subpages for each section helps break up the information to make it easier to digest and organize.
My design process was influenced by my research of the users and other competitors.
Design Decisions
Low Fidelity Prototype -
Design Format -
My low fidelity iteration helped me design the base of the my final design through design coaching.
I designed more pages of the proposed design and added interaction to some of the pages.
Using the company's colors and understanding the typography were key for proposing realistic iterations.
Font -
MyOxfam Portal sign-up and home page were the main focus of my low fidelity design.
They use TStar Bold for their titles, 44px and 34px, and Roboto for their paragraph font, 24px and 18px.
Roboto Regular
ABCDEFGHIJKLMONPQRSTUVWXYZabcdefghijklmonpqrstuvwxyz 01234567890@:;.,?! & +()-_/
Color -
Oxfam has a gradient style color palette, using different shades of their "Oxfam Green" to add depth to their webpage. Their neutral colors are black and white.
Dark Oxfam Green
Oxfam Green
Light Oxfam Green
#548141
#639347
#76a860
Design Iteration
Usability Testing -
This helped me understand how to touch up my high fidelity prototype through user feedback. There were four sections of the survey; Background, IA, Wireframe, and Design.
IA Testing -
Design Testing -
Wireframe Testing -
I used Optimal Workshop to run a tree-jack on my version of the information architecture of the MyOxfam portal.
To be able to conduct the wireframe test we had participants click on the page where they would think the correct path is.
This was a simple survey at the end that asked the user their thoughts on the design and Oxfam themselves.
The questions were:
Is the design appealing?
Does it look professional?
Do you like Oxfam?
Does this support section makes you think Oxfam values their user?
Testing Insights
I made modifications based on the research I had done and edited my designs based on the user testing. This is how I decided to design the layout:
High Fidelity Prototype -
Results
If you would like a closer look at the User Persona, Wireframes, or High Fidelity Prototype please click the Figma icon below:
