Time: January 2022 - May 2022
Role: Product Design Contract
Team: 1 developer, Stakeholders
How might we spark and keep long-term volunteer participation for a local nonprofit?
Overview
Science Outreach, a local L.A. nonprofit had issues with volunteer dropout rates. Since they are a volunteer-based group (volunteers teach science to kids), lack of volunteers prevented the efficacy of their mission. During the summer of 2022, I worked with them to design a mobile application to increase volunteer participation.
I met with stakeholders, conducted user research, created satisfaction metrics, and produced deliverables.
The Problem
The organization thrives on volunteering sessions. At the beginning of the semester, new volunteer dropout rates are as high as 30%. With less volunteers, the program is less capable of teaching curriculum effectively.
I felt that this was the perfect opportunity to collaborate with other perspectives and gain exposure to new design challenges.
"We need you to figure out why volunteers keep dropping out and design a system to promote long-term volunteer relationships."
Research
Initial Observations
I wanted to first gain a base layer of understanding the experience since I was completely new to everything Science Outreach. So, I immersed myself in the volunteer program and met some of the volunteers and the kids!
Preliminary Interviews
I conducted casual 15-minute interviews with 10 volunteers to get a sense of how they were feeling. A few keywords popped up often:
User Objectives
Next, I wanted to gain a deeper understanding of volunteer pain points. I learned about the problem space and what I could do best for the program. Consequent surveys and formal interviews led me to distill primary user objectives. I discovered 3 big pain points:
Objective #1: Volunteers want to be able to see hour logs and feel motivated by their dedication.
Objective #2: Volunteers want to form new friendships that last outside of the club.
Objective #3: Volunteers want mentors to accelerate career growth (most volunteers are pre-meds).
So what needs to be targeted?
One of the biggest challenges I experienced during this process was identifying common themes among scattered responses and turning them into design decisions. However, after an extensive interview process, I boiled the results down to three major issues and rephrased them into "How do we.." phrases!
User Persona and Project Goals
After going over key findings on volunteer behaviors, I fabricated a user persona for our target user, a college student volunteer, who would be using the platform to track hours, find friends, and receive mentorship.
Exploration
Finally, with strong product direction, I started to construct the information architecture and lo- and mid-fi wireframes.
Information Architecture
One of the first issues the team faced was how the app should be structured. The stakeholders, having learned about the 3 pain points, wanted the app to be as simple as possible, with the 3 features being the only pages users could navigate to. They wanted the time and budget to be spent on solving the pain points directly, but this also meant leaving a lot of other basic volunteer needs out, like accessing settings and receiving notifications.
Upon expansion of their version, a lot of holes popped up.
So, I created a different information architecture, one that would address their concern with resources while pushing for user needs further, saving the stakeholders time, effort, and money needed to make the previous version work. In comparison to the previous version, this one had all of the bases covered, emphasizing familiarity (Jakob's law).
Expanding this version placed priority on chatting with others (either friends or mentors) and signing up for events.
Wireframes
Hour Log Wireframe Iterations
The hour log was to be nested within the profile tab. I distilled how I'd approach the hour log feature into two options, the first featuring the hour log directly on the profile page, while the alternative includes a prominent button at the top that leads to separate hour log screen.
Both presented their pros and cons. In testing, however, the direct hour log ended up creating more user friction than it was supposed to solve. Volunteers needed to input times, event info, and comments. Additionally, volunteer hours would need to be approved before they could be added to the user's profile, so the team decided extra screens were needed anyway. We proceeded with the nested hour log version.
Community Wireframe Iterations
To maximize our time for prototyping, I knew I had to be quick and efficient with iterating the wireframes.
Upon creating the community feed, we realized an issue: what should happen if you click on someone else's profile? The information available on the profile tab consists mostly of upcoming/past events, as well as the hour log. But, this information isn't relevant to other users. Considering the team's time crunch as well, I knew I had to implement something soon.
In short, I realized that having a modal would be best. Not only would it direct the user to message the person they clicked on (focusing on creating connections) but also it was a change that could be implemented given our resources.
By displaying the number of hours logged by each volunteer, we not only acknowledge and celebrate their contributions but also establish a visible measure of dedication. This transparency can inspire others to match or exceed these efforts, fostering healthy competition and a shared commitment to the cause.
Moreover, considering resource constraints, a modal approach would likely be more feasible to implement compared to redesigning the entire profile page layout. It offers an efficient solution that aligns with our current development capacity.
Final Designs
🚧 🚧**Under construction!**🚧 🚧 Stay tuned for the prototypes!
Impact
The first prototype was officially tested for the Spring 2023 semester. It was reported that volunteer dropout rates decreased by 27%. Now, the app will be officially coded and used as an integrated part of the club! :) Coming soon early 2024!
Reflections
What I could’ve done better:
Treat ambiguity as a blessing. At first, I was presented with a problem, with no direction. But I realize that not having a concrete direction pushed me to be creative that led to unexpected solutions!
Understanding the ecosystem. At Science Outreach, I was a part of a complex ecosystem of people, their work, and their users. That means that in order to do work well, I had to cultivate a deep understanding of everything from the business itself to the workstreams of everyone that’s involved with your project.
Lessons Learned
Balance user and stakeholder needs. The process illuminated the challenge of balancing stakeholder needs with user needs. However, if you always prioritize user needs, chances are, you'll meet business needs as well!
The Importance of iteration. The first ideas won't always address user needs fully, and that's ok! Prioritize testing and iterating afterwards to make sure they're met.
Design is more than just a Figma file. Real-world constraints, such as development capacity and time, played a significant role in guiding design decisions, as seen with the modal approach for the profile page.
Notable Highlights
Constant communication is important. Our team was constantly sharing unique ideas, providing feedback, and learning from each other. We could always bounce off each others’ thoughts and come up with new ideas.
Hands-on research! I got to explore a new realm of research by actually immersing myself in the volunteer program. But, designers are not wholly indicative of the entire user audience, so research should be treated as a tool to create conscientious, human-centric, and informed designs.
A heartfelt thank you to the Science Outreach team :) Together, we ignited curiosity in students around L.A. and made a lasting impact. It was truly delightful to introduce them to the wonders of science and its significance!
