Volunteer Registration Website
This is a responsive website for a charity that struggles to recruit volunteers. The website helps users easily find and register for suitable volunteering.
What
A responsive website with a volunteer registration flow
Where
London, United Kingdom
When
August to September 2022
Role
Ideation and user research
Wireframing
User testing
Prototyping with Adobe XD
Volunteer Registration Flow
I designed the user experience and interface for a website as part of my Google UX Design Professional Certificate project. I was prompted to design a volunteer registration flow for a charity I support. I completed the design process right the way through, from empathising with the user to testing high-fidelity prototypes, and learned plenty along the way.
01
Competitor Audit
I started the project with a literature review to get a better understanding of the volunteer industry. The review highlighted the reasons why people volunteer and what is important for people to continue volunteering. I continued my primary research with a competitor audit to better understand how organisations currently register volunteers.
I audited national charity websites, particularly the volunteering registration process, to see what they are doing well and what can be improved.
National Trust
Positives
Clear headings, easy flow
Easy to read layout
Prominent testimonials
Engaging imagery
Negatives
Limited accessibility functions
The volunteer database is different to the rest of the website
Top image doesn’t resize to different screen sizes
Age UK
Positives
Clear headings, easy flow
On-brand colours and imagery
Clear descriptions of volunteer roles
Good keyboard navigation and alt text
Negatives
Top, drop-down menu very wordy
No search
Left-hand menu is off-putting
Scouts
Positives
Clear flow, focus on key message ‘Join the Scouts’
Good keyboard navigation and alt text
Clear options and how to sign up
Negatives
Slow to load
Form not consistent with rest of the website
Headings confusing
Royal British Legion
Positives
Simple and clear navigation
Topical imagery
Simple registration form
Continuity throughout
Negatives
No search
Missing alt text
Keyboard access; not clear what’s selected
Confusing descriptions of volunteer roles
02
User Research
My goal for my generative research was to better understand why people volunteer and what stops them from volunteering. I wanted to answer the questions:
What are the primary motivations for people to volunteer?
What barriers are stopping people from volunteering?
What functions on websites do people use to find volunteering?
As my aim was to explore the topic further, I moved forward with 1-1, remote interviews. This allowed me to complete several interviews in a short period of time as well as being able to dive deeper into topics that I hadn’t thought of.
The research was limited to attitudinal research due to restraints on time and budget. This meant that the research was reliant on the self-reporting of participants. If I had more resources I would’ve completed behavioural research to cross-reference the attitudinal research.
Before completing the interviews, I had assumed that the charity’s cause would be the top motivator for volunteering. I quickly realised that there was a range of reasons people volunteered and the charity’s cause was low on the list of priorities.
Using the findings from my research, I built out empathy maps to help me highlight the users’ pain points. Additional to the pain points below, I found that people are precious with their free time so any difficulty finding and registering for volunteering can put them off.
Pain Point One
Can’t find appropriate volunteering.
People would stop their search for volunteering if it took too long. The process of finding and applying should be quick and easy for the user.
Pain Point Two
No control over timings of volunteering.
This could mean the time of day but also how many hours the role requires the user to commit to. This should be prominent in the description of the role.
Pain Point Four
Descriptions of roles not clear.
People noted that they would not apply if descriptions were confusing. Descriptions should have a clear structure so the copy is easy to read.
Pain Point Three
Volunteer with people they know.
This could be colleagues or friends. People interviewed saw volunteering as a social event as well as an opportunity to give back. Information about who can attend the role should be accessible on the website.
“Weekends are precious...I fill my free time easily, I am quite a planner”
03
Personas
Guided by my research, I built personas to help get a solid understanding of the users of the website. The key point from the personas was the conflict between liking the idea of volunteering and committing to volunteering. The charity was not only competing against other charities for the volunteers’ time but also against their social life. Through the personas, problem statements and user journeys, I started to build a profile of the user and how I could make it easier for them to volunteer.
04
Wireframes
Now that I knew the most important aspects of volunteering for the user and that the website must have an easy user flow, I started to ideate. I started with paper wireframes, drafting several options for different screen sizes and consolidated the best features from each into a design for the different screen sizes. I then transferred the design to a digital format using Adobe XD.
Desktop Homepage
05
Prototypes
I wanted the UI to portray a friendly charity with a clean and simple-to-use volunteer registration flow. I used white to give a clean look to the website with a loud blue and bright orange to keep the design on brand. The images include happy people from different diverse backgrounds to highlight the friendly and welcoming nature of the charity.
I carried out several rounds of moderated usability tests intending to check whether users can easily find and sign up for suitable volunteer opportunities. The key performance indicators in each test were; time spent on task, navigation v search and system usability scale. The results of the studies helped guide each iteration of the design.
As shown below, subtle changes were made in response to the results of the usability tests.
Find Volunteering
I wanted users to easily find the volunteer roles best suited to them. The filter options were devised using my research and were well-received in the usability study.
I found that users will likely move between pages whilst they find the right role for them. The breadcrumb menu helps the users locate themselves on the website so they feel comfortable moving between the database and role descriptions.
5 out of 5 participants of a usability study found the ‘Find Volunteering Page’ overwhelming. To simplify the design, I took out the big link for the Volunteer Quiz as few participants used it to help their search for volunteering opportunities. I put the ‘map view’ button at the top of the function list as 5 out 5 participants found the map view useful but missed the link.
Homepage
I aimed to make people feel positive about volunteering on this page. I did this using volunteering stories as well as testimonials. I also included images of smiley volunteers which livened up the page.
In the usability tests, users liked the simplicity of the page and were clear about where they could click to find volunteering roles. There was confusion with the wording of the buttons under the hero image as they sounded similar. I changed them and added a link to the Volunteer Quiz which was lost on users on the ‘find volunteering’ page.
Application
The application is at the end of the process and needed to be quick and easy for the users to complete. I achieved this by asking only essential questions and limiting how many answers users had to type. I also included a description of the role so users can easily refer to the description whilst answering the questions.
The usability tests showed users found the application process very easy. They appreciated how quick and simple it was. The progress bar was also very well received as it highlighted that the application was short.
06
Accessibility Considerations
Contrast
Text and background have a luminosity ratio of at least 4.5 : 1 so people with low contrast sensitivity can interact with the website.
Iconography
All iconography is universal and at industry standard, so I am confident people with impaired sight know what actions they can take.
Labels
The website will be labelled to ensure assistive technology such as a screen reader can be used.
07
Impact
By using different search and filter functions, the design makes it easy for users to find appropriate volunteering. The application form is also simple and only asks for essential information, which makes it easy for users to apply to volunteer. In turn, the charity should get more volunteers and help them achieve their objectives.
“I felt like I was guided through the process…it was very easy”
08
Next Steps
Test Descriptions
Test volunteer role descriptions to check they have the information the user needs to know whether the role is correct for them.
Volunteer Quiz
Build out the Volunteer Quiz to make it a fun experience for the users to find new inspiration in volunteering.
Stakeholder Feedback
Give access to key stakeholders at the charity to see if the functionality would work for them.
What I Learnt
Throughout the project, I learnt that it’s important to keep designs simple. I also learnt that I need to pay extra attention to the language in my designs as users were often confused by terms that should aid their journey through the website.
Finally, I learned that I was carrying assumptions going into this project. As noted at the start, I assumed that people would volunteer because of the cause. In reality, people have lots of reasons for volunteering which needed to be included in the design.