Hack for LA

Volunteer roles page

Project Overview

Hack for LA is a non profit organization that brings together civic-minded volunteers to build digital products, programs and services with community partners and local government to address issues in our LA region.

Hack for LA started out as a 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 organization’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.

Role: UX researcher, UI design

Tools: Miro, Figma, Github

Team: Design Lead, Project Manager, UX designers, UX researchers, developers

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?

A Communication Gap

Volunteers were 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 then match volunteers with projects at the end of the 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 Project Managers directly about their responsibilities until they were on a team.

While setting out to improve the team matching process for new volunteers, we had three goals in mind:

  1. Close the communication gap between project managers and new volunteers so that project managers could communicate their open roles directly to volunteers.

  2. Make sure volunteers understand what to expect about joining a team before onboarding. 

  3. Ensure that volunteers could easily understand what their roles required of them

User Research

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 onboarding process had on their team.

While speaking with the project managers, there were a couple of patterns consistencies discovered.

  1. Project managers felt like new volunteers didn't have a clear grasp of why they're doing what they need to do and the overall context of the project.

  2. Project managers found it difficult figuring out how to get volunteers where they want/need to go in terms of skill development

  3. There's no one actual place where all the project managers can go to submit or view available roles

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 the 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. 

  1. Most of the volunteers felt like there could be clarity on what exactly the roles they were interested would be doing for their Hack for LA team.

  2. Volunteers were unsure of what their next steps were by the end of the onboarding sessions

  3. The only way volunteers could find project roles on the website was by endlessly scrolling through project cards until they  found something they were interested in, and those project cards only  included some fine print about which roles they had available 

Naturally, once we’d spent some time speaking with the project managers and volunteers to gather information on what some of the pain points we needed to grapple with were, it was time to synthesize it all and see what some of the patterns were.

Sorting Through it all

While reviewing the data mapped from the volunteer interviews as well as the project manager interviews, it was clear that 

  1. There was a need for a dedicated page where project managers could post volunteer roles that were available so that volunteers could clearly understand what the teams had to offer and what would be expected of them.

  2. Language throughout the Hack for LA website could be clearer for volunteers to understand what kind of work they may do when joining Hack for LA.

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.

*Note: We later conducted a/b testing on the more high fidelity mockups. Looking back, it might’ve been helpful to create sketches or lo-fi wireframes (maybe both) in order to test some of the feature options that we later conducted a/b testing on, so that creating the high-fidelity mockups could’ve gone faster.

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 these 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 Availability

Heading Information Hierarchy

A/B Test Findings

Filter Availability

*Users liked the simplicity of the checkboxes in the first option, and still had questions about aspects of the second option (e.g. “Would I have to slide the filters to a specific point to get to the time I want? If so, that may be a bit tedious”)

Heading Information Hierarchy

Winner!

*Users liked the clear separation between the sections of information in this option, as it was easier for their eyes to follow naturally. They felt like it was best option for giving enough information while remaining organized.

Next Steps

The program directer is interested in attracting more donors to the platform, which means that as we continue designing a streamlined onboarding process for volunteers, we'll need to also address needs for our other users: donors and advisors.

Attracting Donors to the Platform

As we find ourselves needing to look at the needs of not only the volunteers, but also donors and and advisors, I've taken on the task of creating a research plan to help us organize our research efforts.

Research Plan