Open Oakland
Attracting More Diverse Volunteers
My Role
Research
Strategizing
Design
Wireframing
Project Details
Client: OpenOakland (Non-profit civic innovation organization)
Platform: Desktop Web
Tools: Sketch, Google forms, Miro, pen & paper
Duration: 2 weeks (February 2020)
Overview
OpenOakland is a Code for America brigade that brings together people of all backgrounds to use technology for local impact. It hosts weekly civic hack nights where the community collaborates on diverse civic tech projects.
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.
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?
The Solution
New to OpenOakland?
OpenOakland’s previous website made it difficult for prospective members to navigate the joining process. We addressed this by designing a clear onboarding experience and revamping the projects page to help new volunteers understand what to expect and easily find initiatives that match their skills.
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
Client Exploration
My team and I evaluated OpenOakland’s website 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.
Attending an OpenOakland Meeting
We attended one of OO’s weekly meetings to interview current members and the leadership team. We also 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's interested in OpenOakland?
To better understand target user, their needs, and motivations, we administered a survey that collected responses from 29 participants.
29 people
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
COMPETITIVE/COMPARATIVE ANALYSES
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 Fitness
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
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
Setting Design Priorities
Users benefit from guided experiences
Research shows our audience wants clear expectations before committing. There is an opportunity for OpenOakland to improve its website by clearly communicating time, effort, and convenience using simple language, strong visual hierarchy, and accessible design.
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 before they volunteer their 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 a few 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.
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.
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
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!
Next Steps
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
Outcomes
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
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.
