A small team builds tools to manage large-scale volunteering
We built a MVP of a product in under a year, without cutting corners in research or code. As sole UX designer on the team, I cover a lot of bases: research, wireframes, developer hand-off, testing, and product management. The product (MVP) launched in the spring of 2021.
The team
Front-end developer, Back-end developer, Salesforce administrator, myself as UX Lead, and the Director of Technology. An efficient, and highly collaborative team. We outsourced chunks of UI design work.
What I did
• Ran a one-month research sprint and ran participatory design sessions.
• Incorporated insights into wireframes which included multiple feature changes.
• Strategized feature roadmap for ongoing releases over a long period.
• Worked closely with external UI designers to refine the wireframes and establish the stub of a design system.
• Shaped project management platform (Jira)
• Ongoing refinement of the design system (Zero Height)
• Product feedback: Post-release usability testing and creation of a bug reporter on the new website
Working documents
Context
Team leaders are the organization’s 'eyes and ears' on the ground. They supervise individual groups of volunteers on projects at schools, soup kitchens, senior centers, and a variety of other nonprofits across New York City.
The leaders report back crucial data through the website. This data includes volunteer attendance and project-specific impact numbers, ranging from meals packed to students tutored.
Problem
Team leader’s use the organization’s website to report data. The website isn’t mobile friendly, is sluggish when processing data, and its back end is several generations behind.
Why target this problem, now?
• There is a widening device gap between the organization’s urban pool of users and the stilted non-mobile experience of the existing website, which was developed in 2012.
• The organization is broadening its user base across the five boroughs of the city, making a mobile-first website even more essential to its mission.
• We needed to upgrade in manageable chunks and pilot a platform upgrade.
• A new website for a subgroup of users could be turned on alongside the current website.
The process
Research
For this project we needed specific feedback from the pool of team leaders: how did they manage projects and what were their pain points?
I used behavioral rather than demographic traits to recruit research participants: cadence of volunteering, longevity with the organization, level of training.
I combined qualitative feedback with quantitative profiles of each leader I interviewed, creating a deeper background to their feedback.
General insights:
Leaders had developed ad hoc workarounds for performing their key tasks of tracking key data, and communications with volunteers. Some leaders maintained external databases and interacted with our system as little as possible. These workarounds provided some clear signposts for new product features.
Specific insights:
• Leaders often resorted to tracking onsite attendance via a printed list because the website tool was designed for desktop use.
• They often missed submitting data about the impact of a project (key information like how many meals were served) because that process was a separate flow and not easy to find in the attendance view.
• They traded responsibilities amongst themselves, without updating the organization because that process was cumbersome. This creates a legal liability for the organization.
• They wanted an easy to access at-a-glance view of the number of expected volunteers on a project.
Design
• The wireframes morphed from rough paper sketches to refined designs in Adobe XD.
• We worked with an external consultant to refine the wireframes and develop a design system. I switched design tools from XD to Figma to support integration with Zeroheight, a documentation platform for design systems.
Below: Evolution of the Attendance page, from wireflow to early wireframe and more refined wireframe.
Top level changes
• A single sign-in to both old and new websites.
• The new website is accessible only to team leaders, via the old website.
Detailed changes:
• High level summary of important information such as project address, and attendance numbers. This was in direct response to multiple leader's comments that “I just want an at-a-glance view of who's coming.”
• One step process to submit all attendance and impact data, which replaced the two-pronged approach in the original website. A pain point for staff had been chasing this data; the new process may ease that.
• Visual cue that data is missing, along with an extension of the submission time frame, may increase successful overall submission rates.
Below: Summary and impact data on high-level card view
Development
COVID-19 hit just as we moved into development mode. The organization pivoted to support hunger programs across the city. While supporting that work, we continued working on the new tools.
The launch of the first features was Spring 2021. It included only essential team leader functions: attendance and impact data submission. By running the new website alongside the old one we can refer users back to old functionality when we have not developed the new one
• We have a feature road map: next releases include narrative-based resources guides, and a modernized cross-channel messaging system.
• During this time, we started using project management software (Jira). We are too small of a staff to have a dedicated project manager. This means we all wear project management hats, at times.
• We are working towards automated testing and quality assurance.
Outcome: Ship fast, then refine
The product is launched but not finished by any measure.
It has succeeded in its mission to be a beachhead as we move forward. The team is working on adding new functions, and refining the existing product through user feedback.
WORK