Volunteer Crew Website
September 2022 - October 2022
Role and Responsibilities
Project Manager, Product Owner and UX Designer leading the app and responsive website design from conception to delivery including research, interviews, design, usability studies, accessibility considerations and prototyping.
Project Summary
Volunteer Crew is a fictional website that allows users to easily find and register for volunteer opportunities in their area. The website aims to match volunteers, individual and groups, to find a variety of events and charities to help out.
The Challenge
Many individuals would like to volunteer their time at organizations or events that align with their personal feelings toward a subject. However, it can be difficult to find opportunities and once they are found, someone may not be able to actually attend the event due to the timing or other circumstances
How might we help a potential volunteer easily find an event to volunteer at? I created a website to allow a user to search for events by type or charity organization and then learn more with the ultimate goal of registering for the opportunity – complete with the ability to select time slots that would be most appropriate.
User Research
I conducted interviews to understand the users I’m designing for and their desires. One group of users were professionals that volunteered in the past or currently do volunteer.
This user group gave insight into their pain points of finding volunteer opportunities and what options would be useful. Participants often cited time constraints and trouble finding opportunities they could attend.
Findings indicated users would like to volunteer more often, but have trouble finding opportunities that fit their schedule due to inability to attend or the event is too long. Interviewees also mentioned not enough space for volunteering as a group, such as attending as a team from work, language barriers and other obstacles that prevent them from volunteering.
Ideation
Paper Wireframes
Paper wireframing was used to determine the structure of the website, features and where to place elements for usability.
Digital Wireframes
The goal of the website is to allow users to find and register for volunteer events. Options for searching by charity and for searching by event are included for users to may value one option over the other.
Because users need to provide information to the charity organizations for volunteering, we’ve included a sign up page with relevant information and choices to help successfully register.
Low Fidelity Prototype
The low-fidelity prototype connected the primary user flow of finding a charity or event and successfully registering. The prototype was then utilized in a usability study.
Usability Study
I conducted two rounds of remote unmoderated usability studies with five participants to discover what features and pain points were beginning to emerge even during the prototype phase. The first study used wireframes and helped plan the direction of the app. The second study used a high-fidelity prototype to determine what challenges users are still experiencing as a result of changes from the first round.
Accessibility Considerations
A higher contrast UI to achieve a more friendly contrast ratio that worked on multiple screen sizes. Animations are short to prevent from delays and unresponsive feeling interactions. Icons include text to assist with screen readings and readability of elements.
Mockups
The original wireframes did not present enough information on a single page - I combined both the old event page and sign up page into one and then used gestalt principles to improve how information is presented. The two screens were condensed into one screen for better usability.
The second usability study revealed some users thought the pages were not friendly or inviting enough. I rounded the corners on input fields and chose bolder colors to separate information better.
High-fidelity Prototype
The final high-fidelity prototype featured changes found during the second usability tests. Better navigation was included to help users test.
Takeaways
The website helps place volunteers with relevant opportunities in a way that is easy to understand and offers the ability to register as groups, select times and find correct opportunities. I've learned that responsive websites need focused attention to detail to design an experience that is usable across a variety of platforms. Image placement, text size and navigation must be legible, intuitive and appropriate to each device.
More time would have allowed for mobile phone and tablet testing, but were unavailable due to time constraints and scope of the project. A third round of usability tests would be needed to gain feedback on any pain points that may arise during the creation of other screen sizes.