Streamlining volunteer management by reducing time spent on data entry.
ROLE
Design Lead
DURATION
4 Months [2024]
TEAM
2 Project Managers 6 Developers
SKILLS
Product Design User Testing
OVERVIEW
As lead designer, I directed the research, design, and handoff of a volunteer hour tracking system. The final product addressed our client's biggest pain point, resulting in a $6,000 increase in revenue through reduced volunteer management time.
CONTEXT
A Community Centred Partnership
Our Community Bikes (OCB) is a non-profit based in Vancouver, Canada dedicated to providing bikes to underserved communities, empowering people to fix their own bikes, and increasing diversity in the repair industry.
Through on-site interviews, I discovered that OCB was struggling to meet growing service demands. Many processes that should have been automated were consuming hours of coordinators' time each month—time that could have been spent running workshops and engaging directly with the community.
This is where volunteer-led technology solution agency, SFU Blueprint, came in to help.
RESEARCH AND IDEATION
What went Wrong, and How I Worked to Pivot
Since all team members were student volunteers with limited capacity, I needed to consider development feasibility from both technical and resource perspectives. This proved challenging due to the extensive scope of our potential solution. Through more on-site staff interviews and observing their use of their primary volunteer management tool (SignUp.com), I uncovered numerous pain points that needed addressing.
After I spent 2 months prototyping this catch-all solution (there were even two more designers assisting me at this stage), it became clear that attempting to solve all of our client’s problems in one platform was simply not feasible given our team’s resource constraints -everyone on the team was a student volunteer, working on the project in their free time.
Together with Caitlin Syho, (the project manager), I led a crucial meeting with the main coordinator of OCB to determine the new direction, and identify where a scaled-down version of our initial product idea could have the most impact.
FOCUS
Honing in on a Single Problem Area
Out of all problems faced by the client, the most time consuming is manually transferring volunteering hours from paper into a database, as well as maintaining that database over long periods of time.
My Design Challenge
My task was to design a web app to streamline tracking volunteer hours, with the ability to easily edit and maintain the database over long periods of time.
DESIGN
Emphasizing Accuracy and Efficiency in the User Flow
For volunteers, a digital logbook would improve accuracy by automatically calculating their hours. For coordinators, the impact would be much more dramatic—reducing a 4-hour manual data entry process into Google Sheets to a single press of a button.
Below is a detailed user flow of all steps either a volunteer or a coordinator could take to accomplish various goals, including registering and tracking hours (for volunteers) as well as editing, maintaining, and exporting data from the database (for coordinators). This solution proved to be much simpler to execute than the one we were pursuing before reducing the scope.
An Industrial Visual Style
The final design has a distinct industrial feel to it, reflecting the context it will be used in. I achieved this by using warning-sign yellow as an accent colour, incorporating a monospace font, and using a high range of grey to define sections in the UI.
SOLUTION
The Prototype
Check-in/out (for existing users) and registration (for new users):
Inputing a code for coordinator access to the Manage page:
Editing hours and managing the user database:
Exporting Data
USER TESTING
Providing More Assurance for Users
While feedback during onsite testing sessions was mostly positive, in some cases the system did not provide enough confirmation of user actions when they were expecting it. To address that, I designed confirmation pop-ups for data changes and alert messages to show system status and assure users of successful actions.
DESIGN SYSTEM
Involving Developers in the Design Process
I collaborated closely with developers from the beginning to ensure the user interface was feasible to implement. This became more important during the design handoff phase, when I needed to make the atomic design system and style guide easily understandable for junior developers who were less familiar with Figma. Working together with senior developer Duc Dang streamlined this process, and I continued to provide support and design iterations after the initial handoff. Thanks to this collaborative approach, the final product matched the design perfectly!
A selection of smaller components, minus developer details:
REFLECTION
What I learned:
Targeting a single core problem yields a focused and efficient solution.
It's important to prioritize solving the biggest problem instead of chasing an "all in one" solution, especially when working with time and budget constraints. Asking the client about their biggest issue and focusing on solving it efficiently and with quality early on would have saved our team a lot of time trying to solve all the client's problems, both big and small.
Developer involvement in the design process is crucial for success.
This was the first project I worked on where I felt the developers and I were in sync, with helpful communication, support, and explanations from both the design and development sides. I believe that dynamic made this project a true success, and it's something I will strive for in the future.
