Case Study Template

A Volunteer Management Platform
for Abound Food Care

Project Type

Non-Profit Client Project

Role

UI/UX Designer

Duration

6 months (Oct. 2021 - Mar. 2022)

The Team

6 Designers, 15 Developers,
2 Project Leads
Team formed @ Commit the Change

Tools Used

Figma, Zoom, Slack, Google Drive

Methods

User Research, Visual Design, Interaction Design, Prototyping, User Testing

Overview

Abound Food Care (AFC) is a non-profit organization that works to reduce food waste and food insecurity by helping organizations provide excess food to communities in need. They rely on volunteers to prepare and transport food, connect with organizations and provide support in administrative tasks.

AFC’s current system uses email interest forms on their website and Chowmatch, a software technology that helps connect untouched surplus food from donors to agencies and organizations. Volunteers can complete training tests and get matched with volunteer opportunities directly on ChowMatch. However, AFC's current system does not allow them to have a cohesive volunteer and event database, making it difficult to schedule events, organize information, and communicate with their volunteers. They are looking for a solution to help them keep track of all their volunteers and events.
‍
During this past school year, I joined Commit the Change at UCI, a student-run organization at UC Irvine that delivers software for non-profit organizations in need. I was placed on the AFC design team with five other designers to create a volunteer management web system for Abound Food Care!

1. Research & Plan

Understanding Our Users

We started by meeting with AFC to understand who we were designing for. From learning about their current system and expectations, we established two key users who would be involved in the experience.

User Personas

Analyzing Competitors

Next, we deep-dived into various volunteer management systems to analyze their structure and features. We focused primarily on testing four different software from different price points to compare their pros and cons. Testing out each platform allowed us to view volunteer systems from a user’s perspective to understand how we could address the needs of our client and target users.

Competitive Analysis Chart

PRD & Timeline

After the meeting and research on competitors, our team created a Product Requirements Document (PRD) which was super helpful in listing out the critical use cases and features. Our amazing project leads also created a Sprint Timeline to keep the team on track with our goals.

Competitive Analysis Chart

2. Ideate & Design

Mapping the User's Journey

To understand the journey the admin and the volunteer would experience, we mapped out user flows based on the PRD. The user flows were a great way to understand the navigation of our application, and we were able to pinpoint specific areas that needed tweaking before moving into the ideation/sketch phase.

Admin User Flow

Volunteer User Flow

Sketches

Our team decided to sketch on our own time and then meet together on Zoom to explain our creations. Presenting our sketches to one another allowed us to practice explaining our ideas and receive immediate feedback. Afterward, we noted the similarities among our sketches that we wanted to include and test in our low-fidelity wireframes.

Shown below is a glimpse of some sketches created by each designer.

my sketches!

Low-Fidelity Wireframes

After discussing our ideas as a team, it was time to start designing!

Since both perspectives will have similar features but with different functionalities, we decided it would be best to begin drafting the screens from the admin perspective before designing the volunteer perspective to ensure consistency. The team designed the dashboard together before splitting up into pairs to work on different features. For this sprint, my partner and I worked on "Create New Event" and "Post Event Recap" features.

Applying the Style Guide

AFC requested that we use their preexisting color palette from their current organizational website. We decided to mainly use 2-3 of the colors to avoid clashing on our application.Our team also utilized the Ant Design System to create consistent components.

To prepare for user testing and our first demo to AFC, we worked on applying the style guide and prototyping the screens.

Style Guide

3. Test & Iterate

Time to
Get Feedback!

We set up user testing sessions to help us identify any pain points we may be missing. Each of us ran two different testing sessions with volunteers and admins. Attached below is a screenshot of our script.

User Testing Script

We took the feedback from user testing and began revising our wireframes into high-fidelity. The screens below showcase the two administrative features that I focused on iterating:

Test #1: Viewing Volunteers in the Database

Test #2: Approving & Declining Volunteer Hours

4. The "Finished" Designs

Hi-Fidelity Prototype

After finishing iterations, we began prototyping the high fidelity screens and the Abound Food Care Volunteer Management System was born! 🤩
‍
During this past month, we received full approval on the web platform from AFC. It is currently being developed by our development team and aims to be up and running by the end of June.
‍
✨ The following snippets of the final prototype will only be shown from the administrative perspective. You can view the full prototype here if you are interested to see what the application looks like from a volunteer’s perspective!

Dashboard & Viewing Events

We created a dashboard for admins to conveniently view and access their most recent events or important information. On this dashboard, they are able to view their upcoming events, past events, and notifications.
‍
Within the upcoming events page, the admin will be able to view their volunteers and email them directly if they have any important information to send.

Sending Messages for Past Events

One problem that AFC struggled with was being able to communicate with their volunteers. Aside from adding an email function within the upcoming events page, we also wanted to allow AFC admins to contact employees after an event. This can be to send information about the volunteer’s impact, or provide personalized thank you notes!

Accessing Volunteer Information

The Volunteer Database allows admins to access any volunteer information that they need! This helps them view if volunteers have required forms and training completed and any volunteer hours that need to be completed.

Viewing Volunteer Availabilities

Another problem that AFC struggled with was knowing when their volunteers were available. Aside from allowing volunteers to input their availability, we also designed an availability heat map to show admins when volunteers are free. This will help admins know when they should schedule an event.

My Takeaways

What I Learned

Joining Commit the Change (CTC) during my last year of college was a rewarding experience! CTC has allowed me to meet other students within the design community at UC Irvine.
‍
This project was my first time working with a team of designers, and it was insightful to learn from others as I got to work in pairs with different people. Although we all had different design techniques and strengths, our team was able to find the perfect balance by emphasizing communication and transparency! With weekly update meetings, comment critiques on Figma, and rotational pairs, our design team quickly became comfortable with each other, which led to designing more efficiently.
‍
A challenge I encountered was being in a different time zone from the rest of my team during the last half of the project. Being abroad meant that I couldn't attend a lot of their scheduled meetings and discussions. In the beginning, I struggled to balance the project while adapting to my new lifestyle, which led me to lose out on updates for the project. However, after reaching out to my design lead to request recorded meetings and specific tasks that I could work on when everyone is offline, I learned how to remain helpful and communicative despite the distance!

Next Steps...

The next steps for this project will be beta launching our web product and creating a mobile application for users to access on the go :)

Mobile Screens In the Making