Helping new volunteers contribute to a good cause
Project Overview
Hack for LA started out as an LA based non-profit organization where volunteers came together to solve complex problems in the LA region. When the organization transitioned to remote work in response to Covid-19, more volunteers were able to join, expanding the ogranization's network to well beyond the LA region. Now, Hack for LA consists of over 5,000 volunteers from around the world with no plans to return to the old ways.
I worked on a project to expand the Hack for LA website to match the growing number of volunteers and new ways of process.
A first step in this was creating a platform for volunteers to explore the different roles available to them when volunteering for Hack for LA.
UX Designer, UX Researcher, Visual Designer
Tools
Figma, Github
Team
Remotely worked with design lead, project manager, other ux designers, and developers
Platform
Web-based application
Deliverables
Mockups
Timeframe
March 2021 - May 2021
How might we help volunteers better understand what they need to do and know in order to be properly paired with a Hack for LA project?
Final Pages
Design Decisions
Volunteers are placed on teams after attending an onboarding session. In person meetings and events allowed this method to be doable because the team members of each department for a team would be at these meetings and able to communicate with one another.
Mimicking the old ways before the pandemic, project managers were bringing their open roles to the program manager, who would them match volunteers with projects at the end of onboarding sessions. With our new remote platform, this often led to miscommunication when it came to volunteers knowing what they needed in order to start working on a project, since they weren't communicating with the project managers directly about their responsiblities until they were on a team.
While setting out to improve the team matching process for new volunteers, we had three goals in mind:
New Pages: Volunteer Roles & Roles Descriptions
We added new pages to the HFLA site where volunteers could see the specific roles needed throughout the HFLA teams. They would be able to click on each role to view a full description that includes the responsiblities they would be taking on, more about the mission of the project itself, and how to go about applying for that role.They would also be able to see what exactly each role means in the industry and what it means specifically for HFLA. This was one step towards getting volunteers a better understanding of what their responsibilities are when they join a team
User Research
A Communication Gap
User Interviews
Hearing out the Project Managers
We interviewed with project managers to get a clearer sense of how their teams were operating and the impact the current remote onboarding process had on their team.
While speaking with the project managers, there were a couple of patterns discovered.
Though the temporary solution was to maintain a job board on Github, where project managers would submit their volunteer roles as issues, there would still be the need for volunteers to be paired with projects according to their skill levels, in addition to some volunteers possibly needing an overview of what each role does (in case they aren’t familiar with the role before joining Hack for LA). Volunteers also now weren’t learning about roles until after they joined an onboarding session.
Long story short, Project managers believed that the less they needed to explain, the more smoothly things would move.
Speaking with New Volunteers
In an attempt to get fresh perspectives on our onboarding process from new volunteers, we joined onboarding sessions where I led interviews with five volunteers as soon as the sessions ended. The goal with the volunteer interviews was to understand whether volunteers felt like they understood what their next steps were as they are placed on a team.
These interviews gave us some insights to pair up against the findings from the project manager interviews.
While reviewing the data mapped from the volunteer interviews as well as the project manager interviews, it was clear that:
Ideation and Wireframing
Mapping out the Volunteer Roles Page
We took our newfound user priorities and used them to create mid-fi wireframes that displayed the layout as well as some of the content that would be displayed on the page.
We used this as an opportunity to play around with different options.
We received final approval on an option from the program manager, and moved into the high fidelity mockups, but we still had trouble deciding between multiple options we’d created for the page’s features and the overall page layout. This influenced us to take some options to our users for feedback.
A/B Testing
We wanted to know the best way to structure the heading of the volunteer roles description page so that users would be able to have the information they need without being too overwhelmed. We also sought to understand what users preferred out of the filter that would be on the page (more specifically with the meeting times section of the filter). I led A/B testing sessions with new volunteers in order to find the most reasonable solutions.
Filter Time Availability
Heading Information Hierarchy
We wanted to sort out the layout in the header for the roles description page so we presented the following options for users.
A/B Testing Findings
After speaking with new volunteers and getting their thoughts on our design options, we were left with the following findings:
Preparing for Further Changes
Next Steps
While we've made some great progess in making improvements to the Hack for LA site, there are still more things to address:
A Backend to Our New Volunteer Roles Page
Project managers have been posting openings for new roles on the team's github account for volunteers after they've been onboarded, but now that a page specifically for volunteer roles is in the works, having both may be a bit redudnt. After having conversations with developers about the feasibility of a backend where project managers can post jobs directly to the site with their Github account, once there's approval from our team's project managers, the plan would be to design a form that project managers can enter info about their open roles with ease.
What I've Learned
Takeaways
Adjusting to Agile UX
Conducting the user interviews with project managers and volunteers hit close to home because I related to the experience of needing to adjust to the agile process. When I initially started learning about UX, students were encouraged to take our projects through each stage of the design thinking process (from personas to high fidelity prototypes), so working with HFLA has helped me better understand how to navigate teams where all the deliverables that I've learned about aren't always necessary.
Navigating Technological Constraints
It's one thing to learn about html and css and understand that knowing such can be helpful when communicating with developers as a designer. It's another to actually come across situations where a design solution that you may have mind may not be feasable not just because of the limitations of the web, but also due to the way a platform and organization is currently structured. For example, the feasiblity of a backend for our volunteer roles page will largely depend on whether the system can be maintained and people constantly join and leave the organization to move on to other opportunities.