UX Case Study: PND charity volunteer application flow
Project Overview
Project ● Duration ● Problem statements ● Goals ● Roles and responsibilities
The project:
The aim of the project is to design a new volunteer registration flow for a Perinatal Depression Charity, increasing the overall user experience for prospective volunteers.
Project duration:
December 2022-January 2023
The problem:
The existing registration process put off potential volunteers who found it confusing, long and frustrating.
The goal:
The project hopes to create a streamlined, simplified and safe volunteering process.
My role:
UX researcher and designer
Responsibilities:
Recruited participants, ran interviews and usability studies, analysed and summarised findings.
Created the site map, the user journey, wireframes, prototypes and mock-ups.
Understanding the user
User research ● Personas ● Problem statements ● User journey maps
User research: summary
The initial user research involved talking to team leaders and existing volunteers to understand the issues they faced when undertaking their volunteer application.
I surveyed volunteers in order to try and understand the breadth of the issue and then carried out interviews, initial usability tests of the existing system and a competitive audit of other charities, finally creating empathy maps.
I discovered that potential volunteers although initially invigorated and excited about their potential to contribute became impatient, worried and disappointed by the slow response, lack of security when sending personal data and lack of ways to get in touch with the team.
User research: pain points
User research: personas, user journey mapping
Problem statement:
Flora is a prospective volunteer who needs a clear and streamlined application process because she struggles with the number of emails and lack of clarity in the current system.
User journey map:
I created a user journey map for Flora using the site to identify potential pain points and opportunities to add value and improvements.
Problem statement:
Gina is a prospective volunteer who needs an informative and secure application process. She wants to be in control of her application, to stay ahead of potential issues and to feel supported professionally.
User journey map:
I created a user journey map for Gina using the site to identify potential pain points and opportunities to add value and improvements
Starting the design
● Ideate ● Sitemap ● Paper wireframes ● Digital wireframes ● Low-fidelity prototype ● Usability studies
Ideate
With a deeper understanding of the user and their needs it was time to start developing potential solutions. This process was conducted using several methods: How Might We - Break the point of view into pieces, explore the opposite and change the status quo alongside Crazy Eights.
Sitemap
The user journey is highlighted.
It was important to make the user journey clear but it was essential that the primary user journey remains the most prominent, providing immediate help for PND sufferers.
Paper wireframes
The paper wireframes were sketched out, selecting the layout and design for individual pages following the user flow and inputting elements from the ideation stage.
Paper wireframe screen size variation
The flow should be accessible through multiple screen options, several designs were re-engineered for different screen sizes.
Digital wireframes
User pain points were addressed through the redesign of the flow with some elements altered in the homepage (pictured) and more elements altered in the rest of the journey with increased clarity, a secure integrated form and additional information and/or help
Digital wireframe screen size variation
It was important that the flow could be accessed on multiple screens, so several designs were re-engineered for different screen sizes.
Low-fidelity prototype
To create a low-fidelity prototype I connected all screens involved in the primary user flow of applying to become a volunteer. I had received feedback from several team members and interested parties that I applied to the flow in order to address existing pain points.
Some of the screens designed were not used in the intended flow and so are not connected in the prototype.
Available here.
Usability study: parameters
Study type: Unmoderated usability study
Location: UK, remote
Participants: 4
Length: 30 minutes
Usability study: findings
Several themes were found when carrying out the usability study. These were analysed, reordered and actions were suggested for each with the most important findings called out below.
Full list of findings available here.
Refining the design
● Mockups ● High-fidelity prototypes ● Accessibility
Mockups
Based on the insights from the usability study several improvements were made to the volunteer flow.
Volunteer was interspersed across several short videos rather than one 45 minute lecture.
Enquire now called out in the top bar above the fold.
Donation removed from below the enquire button.
Visuals added to Our current volunteers improving the consumption of info by users.
Mockups
Based on the insights from the usability study several improvements were made to the volunteer flow.
Removal of donation at the end of the enquiry.
Inclusion of help button, email for follow-up and reference number to maintain control of application.
Home button allows completion of user journey, returning to homepage.
Mockups: Original screen size
Mockups: Screen size variation
High-fidelity prototype
The hi-fi prototype follows the same user flow as my initial prototype with amendments based on the usability study and suggestions from the team.
View the PND prototype here.
Accessibility considerations
Going forward
● Impact ● What I learned ● Next steps
Impact:
Target users expressed their preference at the amendments made to the user flow, the modern feel of the site and how much more clear information was provided in the new web format.
What I learned:
Increased understanding of the target user, making sure to refer back to all collected data during every stage.
I was surprised how much the iteration exercises provided different creative solutions to the problem and goal.
Next steps:
