OpenOakland

Attracting More Diverse Volunteers

My Role

Research
Strategizing
Design
Wireframing

Overview

OpenOakland is a brigade of Code for America, a nonprofit organization committed to uniting communities of all skills and talents to leverage technology in service of local communities. It provides a collaborative space for the local civic tech community to connect, experiment, and work together on diverse projects during weekly civic hack nights

OpenOakland seeks to attract more people with diverse skill sets who would be interested in contributing their time and skills to civid hack projects. In addition, the organization seeks to be better known in the community.

Project Details

Client (Concept): OpenOakland (Non-profit civic innovation organization)

Platform: Desktop Web

Tools: Sketch, Google forms, Miro, pen & paper

Duration: 2 weeks (February 2020)

The Challenge

The current majority of OpenOakland volunteers bring strong technical skills, but most of OO’s projects and organization as a whole are still in need of non-technical skill sets.

Goal: How might we redesign OpenOakland’s website to attract diverse types of new members, particularly those with a nontechnical background, to help them complete projects?

Home Page

As the first page a prospective volunteer might encounter, we surfaced key information—such as communication channels, current projects, and upcoming meetings—along with clear calls to action to spark interest and encourage engagement

Onboarding Page

Transitioned OO’s onboarding process from in-person to an online 3-step process with information about expectations on joining and how to prepare for their first meeting.

Projects Page

Restructured Projects page to allow current and new members to easily access relevant information

The Solution

New to OpenOakland?

Previously, OpenOakland's website made it challenging for prospective members to find information about joining the organization. To address this, we designed an online onboarding experience that clearly guides potential volunteers on how to join, what to expect at their first meeting, and how to prepare. Additionally, we revamped the projects page to clearly showcase current initiatives, enabling new members to easily identify and contribute to projects that align with their skills.

Research and Discovery

HEURISTIC EVALUATION

Client Exploration

My team and I started by evaluating OpenOakland’s website, like a new member would, to see how the organization currently attracts new volunteers. This allowed us to make some initial observations of potential pain points for prospective members looking to attend their first meeting:

Convoluted User Flow:

OO’s website caters to members’ use and not enough to prospective members
Difficult to gather conclusions about the organization and its events

Unclear Call to Actions:

Important information specific to an event or meeting was often outsourced to Meetup.com

FIELD RESEARCH

Attending an OpenOakland Meeting

We went on to attend one of OO’s weekly meetings where we interviewed members from the leadership team, underwent their onboarding process, and surveyed current members to better understand OO as an organization.

Findings/Observations:

Weekly Meetings – designated space and time for members to gather and work together on their active projects
Onboarding Process – not required, essentially an FAQ, designed to get new members acquainted with Slack
Slack - 2 out of 9 members surveyed had no experience with Slack prior to joining OO
Current Roadblocks - Leaders of the OO are facing struggles with limited marketing and an inability to attract diverse talent

SURVEY

Who would be interested in OpenOakland?

To better understand target user, their needs, and motivations, we administered a survey that collected responses from 29 participants.

Results

There is a general interest in attending civic meetings (e.g. city council meetings, PTA meetings)
People are unsure on the definition of a “civic hack night”
Attending community event motivators: relevant issues, stimulating discussions, civic duty, a space to be heard
Attending community event deterrents: scheduling conflict, irrelevant issues, apprehensiveness to share

USER TESTING

How are prospective members experiencing the current OpenOakland website?

We asked 5 people to navigate through OpenOakland’s website to confirm our assumptions about the problem of hidden information on OO’s website.

Tasks

Find information to understand what exactly a “Civic Hack Night” entails
Register for one of OpenOakland’s upcoming events
Say you want to bring a friend to their first meeting, how would they go about preparing for the event?

Results

User’s perceived definition of “Civic Hack” night” was inaccurate- thought the event was a hackathon
User registered for an event, but toggled between OO website and Meetup.com
User could not figure out exact event expectations for new members

What are competitors/comparators doing well and how can those strengths be adopted?

To understand what else is our there, draw inspiration, and discover how competitors and comparators might address similar problems, we evaluated other local brigades and similar organizations

Competitor: Code for San Jose

Comparator: F45 Training

Design Patterns

Clear Call-to-Actions: Competitors (Code for San Jose) utilize clear call to actions for new users - “create”, “discuss”, “connect”
Appealing to User Curiosity: Comparators (F45) utilizes a “New to F45?” page to set their prospective trainees’ expectations —how long the workout will take, what to bring, scheduling options, and types of exercises they will be participating in
Transparency: Successful competitors showcase recent projects, emphasize Slack communication, and label projects based on what skills are sought for volunteers

COMPETITIVE/COMPARATIVE ANALYSES

Define

Who is our target audience?

We identified one target archetype and created a for better visualization on their needs, frustrations, and motivations

The Oakland Local

Intimidated by new technology
Excited to be more involved with the local community
Seeking a collaborative environment
Feels antsy when they don’t utilize disposable time
Likes to be prepared and know event details prior to arriving

Users benefit from guided experiences

Research has indicated our target audience values understanding clear expectations before offering a commitment. There is an opportunity for OpenOakland to optimize their website to address users’ expectations by better informing users on time, effort, and convenience. Simple language, visual hierarchy, and accessibility are keys to ensuring users are getting beneficial information as they navigate through a website.

Setting Design Priorities

Through our research and data, we now have a strong understanding of our users’ needs and how to prioritize them when strategizing for solutions.

Users want to make informed decisions

User testing and user interviews show that users want to be able to learn about a potential interest efficiently. This means that they want to be able to gather as much information as possible to inform their commitment to any organization, event, or service especially one that requires them to volunteer their own time.

Design

Sketches

I sketched out some basic design ideas of potential website improvements—taking into account key insights from the research before developing higher fidelity wireframes in Sketch.

Final Deliverables

Given the timeline, my team and I were able to produce and deliver some high-fidelity designs to the OpenOakland organization. We redesigned the website to cater to prospective members by surfacing important information, adding clear call to actions, and streamlining the process of onboarding.

Online Onboarding

The "New to OpenOakland?" page replaces their in-person onboarding experience by setting user expectations, outlining steps to prepare for their first meeting, and providing guidance on joining OpenOakland's Slack channel, their main communication platform

Homepage

Incorporated a clear call-to-action for online onboarding of new members, while highlighting Slack as the primary communication channel. Featured Current Projects to encourage prospective members to explore initiatives they could contribute to.

Projects

The revised Projects page showcases information about active projects, provides contact details for team members, and highlights the skills the team is seeking

Deliver

This project was a conceptual exercise as part of my UX Design education at General Assembly, so we were unable to implement or test our design recommendations. However, my teammate followed up by sending an email with a presentation detailing our solutions and design process. The organization’s leaders expressed gratitude and acknowledged that our work would be valuable when they are ready to enhance their website.

My team and I are grateful to OpenOakland for welcoming us to one of their meetings, allowing us to gather valuable data and insights for our project!

Design Process Research Define Design Deliver

Moving forward, we recommend:

Testing OpenOakland’s website re-design solutions
Applying a similar approach to updating organization’s Meetup.com event pages
Further iterations/refinements after feedback and research

Reflections

Challenges

Timeline: This project was part of my UX design bootcamp, and we had just under two weeks to complete the assignment. While the team had many ideas for the website redesign, we had to prioritize certain pages that would have the greatest impact within our timeframe. Additionally, limited time and resources for user research meant we had a smaller pool of users to gather insights from.
Sketch: I took the lead on wireframing due to my experience with design tools, but since Sketch was new to me, I had to dedicate extra time to learning its shortcuts, refining my workflow, and practicing to efficiently bring my teams’ ideas to life.

Achievements

Field Research: We were fortunate enough to be working on a project that involved a local organization. We had the unique opportunity to perform some field research by attending one of OpenOakland’s meetings. Being able to converse with leaders and survey current members was a valuable experience for gathering insights that shaped our design strategy.
Received positive feedback from the instructors on our growth and learning as designers and teamwork, especially considering we were only 2-3 weeks into the program.

Improved information architecture of website
Set event and organization expectations for users by through an online onboarding process (“New to OpenOakland?”)
Surfaced communication channels and answers to users’ frequently asked questions
Projects detail specific needs to help new members find their place as they’re exploring the website