Hack for LA

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.

Role

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:

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 require of them.

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.

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

Screenshot of temporary Github solution

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. 

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

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.

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: 

Winner!

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.