civic tech jobs
how might we create a more efficient and cohesive volunteer onboarding process for over 4000 team leads, project managers, and volunteers?
role:
project type:
duration:
deliverables:
ui/ux design
team (1-3 others & me), volunteer project
ongoing (aug. 2021 - present)
high-fidelity prototype, design system
background
Hack for LA is the official Los Angeles chapter of Code for America that is powered by volunteers aiming to address current, local issues through civic tech projects. When the COVID-19 pandemic started, Hack for LA moved online and developed an onboarding system in which 1) interested newcomers could attend onboarding meetings through Zoom and then 2) directly contact project leaders to join. This led to many, many interested volunteers, not enough project managers to handle the situation, a discrepancy between what volunteers were looking for and what projects provided, and high volunteer dropoff rates as a result.
To mitigate this issue, Civic Tech Jobs was created in hopes of providing over 4000 team leads, project managers, and volunteers alike with a platform for finding and posting volunteer opportunities. I joined the project in its earliest stages, when all it had was a logo and a color scheme, and am now working cross-functionally to build the minimum viable product (MVP) for Civic Tech Jobs’ first launch.
user research
Brief interviews with project managers, a competitive analysis of other volunteer organization websites, and early-stage usability tests were conducted before I joined the project. From this research, the following pain points were identified:
-
Inability to control who enters the organization, leading to mismatch between projects and their volunteers’ goals.
-
Project managers are unable to control the constant onboarding and dropoff of volunteers.
-
Newly onboarded volunteers often do not have clear expectations for what to expect from onboarding, nor a solid understanding of their next steps.
The current volunteer onboarding user flow leads to poor communication and high drop-off rates.
However, due to an abrupt switch in the Civic Tech Jobs team with all new volunteers (including me) inheriting the project, the aforementioned research was left unfinished. At the current moment, the UX research team and my team are interviewing and sending out surveys to newly onboarded volunteers. Once data from our research is collected, we hope that we may revise our designs as necessary so that our design decisions are backed by concrete user data.
ideate
My team and I began ideating by wireframing our initial landing page ideas. I kept in mind what volunteers unfamiliar with the organization might want to see first as well as major areas of the organization that should be highlighted.
My team and I also presented our landing page ideation results to the rest of the Civic Tech Jobs team. One of my designs was then selected to be developed further due to its use of more organic shapes such as circles and the clean, uncluttered layout.
designing the landing page
Since our project managers wanted to see a few high-fidelity versions of the landing page, we created several hi-fi prototypes. We drew inspiration from these designs across the Internet:
For our landing page, we used Civic Tech Jobs' tan and blue color palette, which signifies intelligence and livelihood. A hero image which emphasizes a community working together paired with our mission statement and blurb help the user grasp a quick overview of the site's purpose. The "Community of Practice" circles are adapted from my wireframe shown above.
Here are the initial high-fidelity designs of the landing page:
landing page user testing
The UX research and design teams then distributed a preference test created on UsabilityHub for the three final landing page options. Option 1 received 15 out of 25 votes, cementing it as our first-iteration landing page design.
Respondents remarked the following regarding Option 1:
-
“It was the most appealing to me and caught my eye instantly! It also got me excited to start searching/looking for any civic tech opportunities or jobs that might be available! I was enthused.”
-
“Most personable and welcoming.”
-
“It highlights collaboration.”
-
“I feel that the image fits well with your tag line.”
-
“Feels more inviting.”
-
“I liked the prominence of the visual of everybody working together.”
prototypes, round 1
Next, we began ideating on the other pages we would need.
-
As a team, the other designers and I discussed our respective visions for each page and what key features we should include, and then we used rapid ideation and prototyping to create mid- or high-fidelity screens depending on how sure we were of the content.
-
From there, we shared the pros and cons of each design and either decided as a team or used dot voting to narrow down our options to 2-4 designs.
-
These were shown to the engineering team and product managers during our weekly meetings, and based on their feedback and critiques, the designers (and, usually, the Civic Tech Jobs team as a whole) settled on the final designs.
results
As aforementioned, in our MVP prototypes, we sought to address these three pain points:
-
Inability to control who enters the organization, leading to mismatch between projects and their volunteers’ goals.
-
Project managers are unable to control the constant onboarding and dropoff of volunteers.
-
Newly onboarded volunteers often do not have clear expectations for what to expect from onboarding, nor a solid understanding of their next steps.
This is the current desktop prototype of Civic Tech Jobs. For the mobile version, please click here.
landing page
The landing page features a new hero section, “community of practice” cards that detail the different areas of Hack for LA’s roles, and a navbar with convenient links such as the login button and the How to Join page.
-
In the “New User” version of the Landing Page, all call to actions besides the navbar items lead to the Qualifier Page, which guides the user to input their availability and the roles they are looking for, as to make sure that the search results will fit their needs (addressing Pain Point #1) and that this basic data can be saved at this step in the backend.
-
In the “Onboarded User” version of the Landing Page, the “Join Us” call to action turns into a “View open roles” call to action, since the user, once they are signed in and onboarded, has access to the full details of all roles when they go to the search results page.
-
The hero section features a brief blurb about what Civic Tech Jobs is and displays the mission statement with a fitting visual.
how to join & faq
The How to Join page, which can be accessed through the navbar, is composed of two sections:
-
Steps for joining Hack for LA
-
Frequently asked questions (FAQ)
The “Steps to join” section gives users an overview of the steps they need to take to join Hack for LA through the Civic Tech Jobs site. This gives new or potential volunteers a clearer understanding of what their next steps may be (addressing Pain Point #2), decreasing possible confusion later on in the process.
qualifier page
step 1 (role selection)
step 2 (time availability selection)
The Qualifier page partially helps address Pain Point #1 (inability to control who enters the organization, leading to mismatch between projects and volunteers’ goals). This page asks users for:
-
The role categories that they are looking for, to make sure that the results are tailored toward their field of interest.
-
Their time availability, which ensures that they can only see open roles that have team meetings during their availability hours, as to avoid one volunteer’s time conflicts putting an entire team’s meeting schedules into disarray.
Once the user inputs all of this information, their answers will be saved to a log in the backend system and will be linked to their account if they sign up.
search results page
The Search Results page displays the open roles based on the user’s inputs on the Qualifier Page. There are two versions of the Search Results page:
-
Limited results page hides project details and next steps for joining the project, such as links to Slack channels. Call to action is a button leading to the Sign Up Page.
-
Full results page shows all information, including project details. Call to action is customized by project manager / team lead who posted role listing.
The limited search results page shows up to users who are not logged in and onboarded and hides team information so that users cannot find any way to reach out to team leads / project managers to join without attending onboarding and understanding the full scope of the organization first. This prevents the situation specified under Pain Points #1 and #2 from occurring. The full results page shows to users who have attended the onboarding meeting and have logged in to their account, and gives them details for what the projects are about, who to contact, and how to join a desired project.
sign up & log in
When a new volunteer finishes signing up, they must verify their account by attending an onboarding meeting. Since their search results and qualifier page filters are all saved as long as they remain on the same device, they can return to Civic Tech Jobs once their account has been verified and gain access to full role descriptions.
content management system
This page will be the interface project managers and team leads use to post open roles onto the volunteer roles board. The research team and my team are currently conducting research on what product managers would like to see on this page and how we might best implement this.
Work in progress; please stay tuned!
design system
This design system is the result of my collaboration with my fellow designers as we attempted to organize our elements and make the hand-off process to the developers and software engineers smoother. Currently, we are in the process of revamping our design system to include more details, such as CSS specifications.
The new design system will feature CSS specifications and details on where each component is used.
usability testing
The user research team and UX design team worked together to usability test the current flow. I then collaborated with both teams to affinity map the different pains and gains as reported by users.
When asked "How clear was the process for joining Hack for LA?" the average rating usability testers gave was 4 out of 5.
The research team, design team, and I proceeded to categorize the pain points brought up by urgency level and effort level, as seen below. The "Recommendations" column is a result of a fellow designer and I rapidly ideating possible solutions to each pain point.
Categorization scale for urgency level and effort level.
key takeaways
-
Larger scope = more challenges = more growth. Civic Tech Jobs is my largest project to date, and though it has also come with its own obstacles, it's also the project I learned the most from. Not only did I learn how to use common design tools more efficiently (ie. components and variants in Figma) and accessibility guidelikes like WCAG, but I also was introduced to design systems, which helped me understand how to best bridge the hand-off between designers and developers.
-
Failure mapping is helpful. My team and I approached this project by examining the current user flow and researching all the different points users could struggle with. Being able to map out the user's pains and needs at each step in the flow helped me gain a big-picture view of the project and understand the narrative beyond individual screens.
where is this project now?
As of the beginning of April 2022:
-
The design team is designing and revising several new pages based on feedback received from our most recent usability tests.
-
I also recently introduced two new designers to the team, expanding my team from me and one other designer to four designers in total.
-
The user research and design teams, together, are conducting usability tests on our MVP prototypes and are sending out surveys to further understand our target audience. The engineering team is beginning to program the landing page.
-
As we begin to receive research results from speaking with product managers within the organization, my team and I will be designing a Content Management System (CMS) dashboard, where team leads and product managers can post open roles and keep track of their postings.
We hope that the full MVP will be launched and live within five months and will continue to iterate based off of users’ feedback after the launch. Please stay tuned!
