Volunteer Management Solution (Spring 20)

Designing a general solution for nonprofits to accept volunteers, manage mass emails, and advertise new volunteering events.

Mockups of bits of good volunteer management solution

About Project

Screenshot of VMS application

This semester, we expanded our general solution while tailoring it to the needs of our non-profit partner. The non-profit owner/administrator can register their organization with our application, create filtered volunteer mailing lists, view volunteer profiles, post events, and verify volunteer attendance at these events. Potential volunteers can register, and volunteers can log in, edit their profile, sign up for events, and view upcoming event information. VMS streamlines organizational efficiency by centralizing the core components of volunteer management & giving users an easy-to-use interface to interact with.

Bits of good thumbnail with group photo

Our Client

Bits of Good

Bits of Good connects nonprofits with student software developers looking to make a social impact with their technical expertise. Our general solutions are customizable products that have the potential to serve multiple non-profits. The VMS General solution partnered with Hearts2Hearts Children's Foundation this semester, an organization with a mission to provide financial, material, and service support to orphaned and impoverished children.

Our Process

Product Scope

Client Goals πŸ₯…

Currently, H2H, one of the clients we are currently working with uses a vast array of different mediums (paper and pencil to check volunteers present at events, WeChat for gauging event interest/ broadcasting events, and a spreadsheet to keep track of hours. This method makes it painstakingly tedious for our client to keep track of every facet of volunteer management.

End-User Goals ⚽

H2H's volunteers must also be able to keep track of their own hours in case they need to submit hours to a third party (ie National Service Award) but currently have only their own systems to depend on (pen and paper, excel sheet, etc). They also need to use WeChat to keep up with event coordinating. This method makes volunteer hour tracking and event coordinating disjointed since it requires different mediums and volunteers cannot keep all their hours on one platform, accessible to the volunteer manager.

Technology πŸ’»

The frontend is comprised of a React single-page application (SPA) with styled-components for CSS and an Express/Node backend. We use MongoDB for the database and the Passport authentication library for user sign-ins.

Design πŸ–Š

Using last semester's VMS work, we took our general solution framework and began reevaluating our product to be inclusive of our non-profit client (Hearts2Hearts Children's Foundation). Our team sat down with our client and got a good understanding of how the non-profit currently manages volunteers and what their vision was for the product. Once we identified those user needs, we analyzed how those user needs overlapped with what we understood to be general solution needs. We then began designing wireframes of features we wanted to add to the existing VMS framework while developers worked hard to implement unfinished general solution features from last semester. From there, we went through a bi-weekly process of designing mockups from low to high fidelity, discussing the features as a team, and moving to implementation of the feature. Once we began implementing new features and mocking up new ideas, we showed our work to our client to receive feedback and review our progress. From there, we implemented the feedback and worked to flesh out all the product features.

Our Solution

Key Features

Event Page

This shows all the events volunteers have saved or have signed up for, all events hosted by the non-profit, and all upcoming events.

Event landing page mockup

Event Sign Up

This allows volunteers to save events to view and sign up for later as well as sign up for events. The ability to sign up for time slots for each event was a relatively new feature we developed based on our client's needs.

Event sign up mockups with time slots available

User Flow 🌊

This application has two core components: allowing users to sign up and volunteer for nonprofit events, and allowing the nonprofit admin to manage their volunteers. Here's a general flow of the core features available for these use cases.

Userflow diagram of core VMS app

Our Team

Reflection πŸ’¬

Overall, we all learned a lot working together on VMS! We each got to hone in on our craft, whether it was development or design, and learned how to work with our strengths and weaknesses in order to drive our client's product vision forward. We're all really excited about the impact this project has the potential to make - with hearts2hearts and with future

Jonathan Hatley

Jonathan Hatley

"Working on VMS this semester has really given me an opportunity to grow as a designer and develop different skills that I thought I never had! I believe BOG has given me a chance to build on my interpersonal skills as well as appreciate those around me, I have made many friends in this organization and hope to stay connected with them outside of design and BOG."

Chae Eun Park

Chae Eun Park

"It's been a blast working on VMS with the team. I loved applying my design skills in a cross-functional setting, and it's really helped me grow to be more meticulous of my craft and more considerate of those working alongside me. I've learned so much from my PMs, developers, and fellow designers. I can't wait to see the positive impact VMS will have for non-profits. Thanks for a spectacular semester!"


Ananya Ghose

"Working on VMS this semester has been such a cool experience! I liked the challenge of expanding our general solution while tailoring the project to our non-profit partner's needs. It was cool working with such talented designers and developers to turn our vision into reality."

Tony Zhang

Tony Zhang

"Working on this project has been an awesome opportunity for me to expand my technical skills and improve my ability to organize, lead and collaborate with others, and I hope to continue contributing to BoG in semesters to come!"

Our team chilling and debugging over some pizza!

"Our team chilling and debugging over some pizza!"