The Product
Listening to several teachers and parents express frustration with the volunteer system at a local school I considered how a website could bring a solution. Volunteer Connection is a desktop website that simplifies signing up for volunteering for a child’s school. It targets parents who have varying schedules but want to contribute through volunteer opportunities that fit their schedule.
Project Timeline August-September 2022
*Update June 2023
Volunteer Connection is a desktop website that simplifies signing up for volunteering for a child’s school. It targets parents who have varying schedules but want to contribute through volunteer opportunities that fit their schedule.
Project Timeline
August-September 2022
The Problem
Based on interviews experienced volunteers struggle to track when and how they can volunteer at their child’s school. Busy schedules make it difficult to volunteer when it works for them.
The Goal
Create a responsive website that allows parents and guardians to schedule school volunteer sessions that work with their schedule.
The Problem
Based on interviews experienced volunteers struggle to track when and how they can volunteer at their child’s school. Busy schedules make it difficult to volunteer when it works for them.
The Goal
Create a responsive website that allows parents and guardians to schedule school volunteer sessions that work with their schedule.
Research
To better understand how teachers and volunteers communicate I interviewed teachers and volunteers on what would make the process better.
- Feedback surrounded problems with knowing what there was to do as well as who needed help.
- A website that teachers could use to post volunteer opportunities that parents could access would help both parties.
- The website must be accessible on desktops and mobile phones. It needs to be simple to understand and easy to use again and again.
- Often schools will ask for volunteers and it is unclear when or how this will happen unless you are in a committee.
This website will work to address the miscommunication that occurs. on interviews, I decided to include the following features:
- Ability to search for opportunities by skill, time, or need
- Remote volunteer opportunities
- Filter by time of day
Updated June 2023:
- Updated primary color to be AA passing in terms of contrast for accessibility.
- Designed above the fold to incorporate users’ goal to access information quickly.
- Streamlined user flow by combining sequential search into a single search engine results page with filters.
- Combined sign-up form and confirmation to reduce friction in the sign-up process for the user.
- Added the ability for users to further explore before completing sign-up.
MockUps
Original Home
This iteration of the home page is direct but limits the user from exploring further.
Updated Home
After reviewing and testing the original design to make improvements. This was done with a home page design that considers what information appears above the fold when arriving on the landing page. Additionally, I added multiple ways to reach various information on the website.
Original Search Page
Updated Search Page
- Rich Snippets: Additional information displayed in a visually enhanced format, such as star ratings, reviews, or event dates.
- Side filters to reduce users’ friction to get to their goal on the website by having to go through 2 filters.
- Cards maintain the established visual design from the homepage, aiding users in recognizing that they are still navigating within the same website.
Original Event Detail Page
Updated Event Detail Page
- The expanded listing provides parents with comprehensive information about the volunteering opportunity, ensuring they have access to detailed insights before making a decision to participate.
- It also suggests related opportunities. Users asked for the ability to further explore before committing and this update helps achieve this.
Original Listing Page
Updated Detailed Listing Page
- The expanded listing provides parents with comprehensive information about the volunteering opportunity, ensuring they have access to detailed insights before making a decision to participate.
- It also suggests related opportunities. Users asked for the ability to further explore before committing and this update helps achieve this.
Original Sign Up Confirmation
Detailed Sign-Up Confirmation
- The expanded listing provides parents with comprehensive information about the volunteering opportunity, ensuring they have access to detailed insights before making a decision to participate.
- It also suggests related opportunities. Users asked for the ability to further explore before committing and this update helps achieve this.
Research
To better understand how teachers and volunteers communicate I interviewed teachers and volunteers on what would make the process better. Feedback surrounded problems with knowing what there was to do as well as who needed help. A website that teachers could use to post volunteer opportunities that parents could access would help both parties. The website must be accessible on desktops and mobile phones. It needs to be simple to understand and easy to use again and again. Often schools will ask for volunteers and it is unclear when or how this will happen unless you are in a committee. This website will work to address the miscommunication that occurs. on interviews, I decided to include the following features:
- Ability to search for opportunities by skill, time, or need
- Remote volunteer opportunities
- Filter by time of day
Updated Mock-Ups
Original Home Page
Updated Home Page
This iteration of the home page is direct but limits the user from exploring further.
After reviewing and testing the original design to make improvements. This was done with a home page design that considers what information appears above the fold when arriving on the landing page. Additionally, I added multiple ways to reach various information on the website.
Original Search Page
Updated Search Engine Result Page
- Rich Snippets: Additional information displayed in a visually enhanced format, such as star ratings, reviews, or event dates.
- Side filters to reduce users’ friction to get to their goal on the website by having to go through 2 filters.
- Cards maintain the established visual design from the homepage, aiding users in recognizing that they are still navigating within the same website.
Results Detail Page
Updated Detailed Listing Page
- The expanded listing provides parents with comprehensive information about the volunteering opportunity, ensuring they have access to detailed insights before making a decision to participate.
- It also suggests related opportunities. Users asked for the ability to further explore before committing and this update helps achieve this.
Sign Up Confirmation
- The expanded listing provides parents with comprehensive information about the volunteering opportunity, ensuring they have access to detailed insights before making a decision to participate.
- It also suggests related opportunities. Users asked for the ability to further explore before committing and this update helps achieve this.
Persona
Jack
Jack is a 37-year-old parent who works nights. He likes to be involved with his daughter’s learning and volunteers to read books to her class occasionally.
Goals:
Schedule his volunteer times from work at night.
See how he can help his daughter’s class.
Volunteer in the morning.
Frustrations:
- He tracks volunteering via a notebook or planner that he cannot always access.
- It is hard to know where he can help the list is long.
- I can’t volunteer ahead of time because there is no easily
- accessible calendar
Age: 37
Education: Bachelor’s Degree
Hometown: East Coast D.C.
Family: Single
Occupation: Early career in design
Persona
Jack
Jack is a 37-year-old parent who works nights. He likes to be involved with his daughter’s learning and volunteers to read books to her class occasionally.
Goals:
Schedule his volunteer times from work at night.
See how he can help his daughter’s class.
Volunteer in the morning.
Frustrations:
- He tracks volunteering via a notebook or planner that he cannot always access.
- It is hard to know where he can help the list is long.
- I can’t volunteer ahead of time because there is no easily
- accessible calendar
Age: 37
Education: Bachelor’s Degree
Hometown: East Coast D.C.
Family: Single
Occupation: Early career in design
Survey Pain Points
Pain 1
Users are too busy to search multiple sites to find art gallery events
Pain 2
Users want the ability to search based on low or high crowd volume which is not currently supported on apps
Pain 3
Users want access to multiple locations and genres to find events that fit their personal taste
Pain Points
Pain 1
Users are too busy to search multiple sites to find art gallery events
Pain 2
Users want the ability to search based on low or high crowd volume which is not currently supported on apps
Pain 3
Users want access to multiple locations and genres to find events that fit their personal taste
Original Volunteer Sign-Up Flow
Home
The Home page features contrasting colors and the use of negative space to create focus. There are 3 cards with icons that allow users to immediately search for opportunities.
Filter 1
Filter selection allows the user to select search via an icon button and will show results filtered by skill, time, or by the need of the school.
Filter 2
Filter two allows the user to select the time to volunteer by morning, noon, or night.
Search Engine Result Page
The SERP shows filtered results by date and features a calendar. Users can input customize a range to see all available opportunities or they can simply choose a day. The results appear as events.
The Event Details
The event detail page further describes the volunteer session in detail. At this point, the user can still access different dates. The user fills out a small form to submit their request for volunteering.
Confirmation Page
The confirmation page tints the background and displays a large square with directions for the user to check their email and the option to return home.
Home
The Home page features contrasting colors and the use of negative space to create focus. There are 3 cards with icons that allow users to immediately search for opportunities.
Filter 1
Filter selection allows the user to select search via an icon button and will show results filtered by skill, time, or by the need of the school.
Filter 2
Filter two allows the user to select the time to volunteer by morning, noon, or night.
SERP
The SERP shows filtered results by date and features a calendar. Users can input customize a range to see all available opportunities or they can simply choose a day. The results appear as events.
The Event Details
The event detail page further describes the volunteer session in detail. At this point, the user can still access different dates. The user fills out a small form to submit their request for volunteering.
Confirmation
The confirmation page tints the background and displays a large square with directions for the user to check their email and the option to return home.
Usability Study Findings
After creating and completing a usability test for a low-fidelity prototype and testing a high-fidelity prototype I made updates to reflect the user’s experience.
Usability Study Findings
After creating and completing a usability test for a low-fidelity prototype and testing a high-fidelity prototype I made updates to reflect the user’s experience.
- It was difficult to find the “next” button when purchasing
- Users were unsure when they completed the ticket purchase flow
- Finding the events section was easy
- It was difficult to find the “next” button when purchasing
- Users were unsure when they completed the ticket purchase flow
- Finding the events section was easy
Accessibility
- Organized headers to make them accessible for screen readers
- Voice-to-text search function
- Add alt text to images
- Consider edge cases
Findings & Improvements
While the design was easy to navigate feedback suggested more explore options were desired outside of volunteer sign-up. I recently updated the mock-ups with a design solution that prioritizes this user need.
- Investigate the use of animation to impact the UX.
- Add a page explaining how the volunteer sign-up works.
- Test responsive mobile website prototype.
Additional Findings Based on Research
While the design was easy to navigate feedback suggested more explore options were desired outside of volunteer sign-up. I recently updated the mock-ups with a design solution that prioritizes this user need.
Future Improvements
- Add the ability to search without having to sign up
- Add a page explaining how the volunteer sign-up works
- Test responsive website prototype for mobile
- Add the ability to search without having to sign up
- Add a page explaining how the volunteer sign-up works
- Test responsive website prototype for mobile