The volunteer registration website enables users to find a volunteer opportunity, learn more information about it, and register for that opportunity.

Project Overview

The problem: It is confusing to find out what volunteer opportunities are available. Volunteers wanted a quick and easy way to search and register for opportunities.

The goal: To provide users with a simple way to register for a volunteer opportunity.

Project duration: June 2022 – December 2022

My role: Lead UX Designer

Responsibilities: User research, wireframing, and prototyping

Understanding the User

User Research

I conducted interviews to better understand the wants and needs of my end user. Through research and interviews, I identified a primary user group as retirees looking to spend their free time volunteering. Through this research, it was evident that a major form of frustration was learning what volunteer opportunities were available and finding out where on the website to register.

Pain Points

Filter: It is difficult to search and filter results for volunteer opportunities by topic.

Navigation: It is confusing to know how to navigate the website to view available volunteer opportunities.

Recurring registration: It is frustrating to not be able to register for multiple times/dates.

Past activities: It is sometimes not possible to view a list of past volunteer activities.

Starting the Design

Sitemap

I created a sitemap to organize my website. It was important to add a way to view volunteer opportunities as a top menu option.

Paper Wireframes

I created four different versions of my wireframe and chose the best parts of each one for my final version. For the homepage, I chose to have a hero image on top to capture the user’s attention and also included a section for volunteer opportunities sorted by focus area.

Paper Wireframe Screen Size Variations

For each of my paper wireframes, I created a screen size variation for a tablet and mobile phone.

Digital Wireframes

Points of frustration for those interviewed, was difficulty navigating the website to view available volunteer opportunities and not being able to search by volunteer opportunity by topic. I added “Get Involved” as the first menu option and a focus area section.

Another point of frustration for those interviewed was difficulty viewing and re registering for past volunteer opportunities. Through this account page, users can easily see what they previously volunteered for.

Digital Wireframes Screen Size Variation

Low-fidelity prototype

The goal of my low-fidelity prototype was for a user to find and register for a volunteer opportunity as quickly and effortlessly as possible. I tried to enable users to navigate in the least amount of clicks possible.

View the low-fidelity prototype

Usability Study

Study type: Moderated usability study

Location: United States, remote

Participants: 5 participants

Length: 20-30 minutes

I conducted a usability study to understand how users would interact with my final website. After the usability study, I edited my wireframes before creating the high-fidelity mockups.

Homepage Navigation: There needs to be an easier way to access the volunteer opportunities section, such as a button on the homepage.
Menu: The menu heading, Get Involved, is confusing.
Registration: The language about registering for multiple days was confusing.

Refining the Design

Mockups

The original version of this design had buttons for New and Returning Volunteers. During the usability study, users found this confusing. I replaced this with the button, Browse Volunteer Opportunities.

During the usability study, another thing that users found confusing was the button, Register Multiple. I changed this button to Register for multiple times.

Mockups: Screen Size Variations

I created mockups for a tablet and mobile phone since volunteers may use different devices to access the website.

High-Fidelity Prototype

The final high-fidelity prototype provides a simple and clear way for users to search for and register for volunteer opportunities.

View the low-fidelity prototype

Accessibility Considerations

I confirmed that the text color meets accessibility standards.
I included pictures with all volunteer opportunity options for those who have trouble reading in English.

Going Forward

Takeaways

Impact: This app now enables users to search for and register for volunteer opportunities quickly and easily.
What I learned: I learned how important it is to get feedback from peers and potential users through the process. Feedback gave me insights on how I could improve the user experience.

Next steps

Conduct another round of a usability study to see if there are any other edits that need to be made to the app.
Conduct additional user research to understand if there are any other user pain points this website can address.

Contact

Thank you for reviewing my work! I can be reached by email at candicejohnsonux@gmail.com.