Code for San Francisco is a grassroots group of volunteers working on improving San Francisco through the use of technology.
The organization is in need of more non-technical volunteers to help civic projects reach their full potential.
Our challenge was to improve the onboarding process so that the organization is able to utilize the diverse talents and experiences of its volunteers.
CLIENT
Code for San Francisco
Concept project
TEAM AND ROLES
I worked on this project with fellow user experience designer Aleksandar Medan. Although we took on different tasks, we collaborated on the major components of the process, including planning, research, data synthesis, problem definition, wireframes, and service design strategy.
DURATION
2 Weeks
in 2019
TOOLS
- Figma
- Adobe After Effects
- G Suite
- Camera
- Pen & paper
METHODS
- Online Presence Analysis
- Competitive Analysis
- Surveys
- Interviews
- Contextual Inquiry
- Affinity Mapping
- Scenario Statement
- Journey Mapping
- Storyboarding
- Sketching
- Wireframing and Prototyping
- Service Design Planning
- Usability Testing
We combed through Code for San Francisco’s website and studied their social media accounts. The site clearly puts out the welcome mat to everyone interested, and speaks to the need of collaboration between people of diverse backgrounds.
The website also mentions their mission of working together to improve the city, though there is no clear summary of Code for San Francisco’s successful endeavours.
Their most active presence is on Meetup, with close to 5,500 members, 278 of whom joined in the past three months. We noticed that across all of their social media channels, in the past half year there were almost no callouts for help and almost no promotions of their weekly Civic Hack Night.
Code for San Francisco is one of 73 Code for America Brigades, each with their own online presence. Other communities listed out code-free initiatives, events, and ways to get involved.
In order to understand the new member experience, we signed up via Meetup and then attended a weekly Civic Hack Night as volunteers.
Code for San Francisco does a lot of things right to orient newcomers to the evening, including putting signage and instructions at the door, and hosting a quick overview session for new members. There are also different colored name tags for new and returning members, which made it easy to identify who we needed to approach with our questions. We were given ample time to meet each other over dinner, though the only people who were in the meeting room at the time were other new members.
Following the general meeting with all members, our fellow newcomers were left on their own. Of the people we talked to, those who didn’t have a coding background didn’t know what they could contribute, and nobody had a clear understanding about what any of the projects were about.
I was under the impression there would be a bigger focus on new ideas.”
I want to use my skills to improve the community, but I’m not sure how to contribute. Can I actually contribute?”
Following the new member orientation and the general meeting, we interviewed four newcomers to find out why they were there, and to gather their first impressions of the evening.
The newcomers had two primary reasons for getting involved with Code for San Francisco. The first is to make a difference in their communities by addressing civic issues such as homelessness and transit. The other major motivator is professional development. People wanted to practice coding, and to have something in their portfolio.
As a whole, the newcomers we spoke to felt welcomed at the event, but did not see a clear way for themselves to get involved.
We interviewed two members of the leadership team, including the Brigade captain to get an insider’s view of the organization.
Most eye-opening to us was that Code for San Francisco’s leadership is not interested in bringing in a larger quantity of volunteers. They already get about 10 new volunteers a week showing up without putting effort into outreach. What they need though are volunteers who bring in different skills and experiences than those of their typical long-term volunteers. Specifically:
- The organization needs involvement from those directly impacted by projects
- The leadership wants people who can build alliances with the government and with outside groups so that the projects are better implemented
- Non-coders, who can fill roles such as product managers, designers, and writers
The leadership team admitted that they knew their website needed updating, and that the introduction meeting could be improved.
…Code for San Francisco would know what skills their members possess, and would be able to use that database to fill project gaps.
…Newcomers would be able to see where they are needed.
Our design ideas was to make Code for San Francisco more accessible, and to capture volunteers’ information.
For Code for San Francisco, a successful solution would meet the goals of:
- Diversifying the member base
- Filling project gaps utilizing the skills, interests, and backgrounds of new members
For volunteers, a successful solution would meet their goals of:
- Interacting with others in a welcoming setting
- Making a difference in their community
- Building their professional skills
We came up with multiple possible approaches to address Code for San Francisco’s need for a more diverse volunteer base.
Our first thought was that the organization simply needs to do more outreach, but realized that makes no sense given the current problem of non-technical volunteers showing up and not knowing how to productively get involved. Fixing the in-person onboarding process would be our first priority.
Second priority would be to make changes to the website so potential volunteers could see where their skills are currently needed. We also discussed making an welcome video, and to write and research project success stories to add to website.
The idea I was most excited about was creating a non-coding hackathon event. I thought it would be a great way to generate ideas collaboratively, to introduce non-technical folks to Code for San Francisco, and to demonstrate to them how they could get involved. I floated the idea to the leadership team in our interview with them, and they said they already had something similar in the works, so we scratched that approach from our presented solutions.
Given that we had only about a week to execute our ideas, we focused on those that could quickly be implemented and would have the most impact.
DISPLAY INFO ON STATIC SCREEN
Currently, during the meeting an info screen is shown, but only for a few brief seconds. The following information needs be readily accessible by all members on a poster or screen throughout Hack Night:
- Wi-Fi
- Agenda
- Slack sign-up
- Core Team names and photos
SWITCH THE ORDER OF THE MEETINGS
Have the general meeting first, followed by the newcomer meeting.
- That gives Core or Hello Team adequate time with newcomers, without needing to rush so that the general meeting can start on time.
- This also allows returning volunteers to get to their projects sooner in the night.
COLLECT NEWCOMERS’ INFORMATION
- Via online form – skills, backgrounds, and interests
- Project teams can use this information that night to recruit volunteers, and Core or Hello Team could use it to foster connections.
- Code for San Francisco gets a database of potential people to tap, when looking for volunteers with specific backgrounds or skills.
EXPLAIN PROJECTS IN GREATER DETAIL
Move the project elevator pitches to the newcomers meeting, introduce them at a relaxed pace, and keep in mind not everybody there understands tech jargon. Give information on:
- Project needs
- Open roles
- Status
GIVE THE NEWCOMERS TASKS
Tasks of value to Code for San Francisco, such as:
- Usability testing
- Research
- Event promotion
- Drafting tweets
Lead newcomers in a Design Studio so that they can get to know each other and get ideas flowing.
PROVIDE A WARM HAND-OFF
Provide answers and introductions for new members looking to join a project or start their own, and help those still not sure on what to do.
Currently, newcomers often leave before picking a project. Having a dedicated group of members be there for them would go a long way in helping a new volunteer feel comfortable and ready to contribute.
Producing a video to introduce Civic Hack Night
While the Civic Hack Night gets top billing on the Code for San Francisco website, that space isn’t used to actually explain what the event is about. Instead, there is a large map of downtown San Francisco. We thought that an introductory explainer video would be more helpful to those new to Code for San Francisco.
We wrote a short script explaining what Code for San Francisco is about, and what newcomers can expect on their first Civic Hack Night. Aleksandar illustrated the scenes and I edited the footage to produce the introductory video.
The biggest issue to address on the existing website is that there is not an up-to-date list of non-technical roles volunteers can fill. This goes beyond the projects, and covers the organization as a whole. For example, in our meeting, the leaders said they need writers to document and post updates to the website regarding project updates and successes. That has been on the back-burner for a long time, yet there is no specific callout for writers on the website.
Another issue is the events listings. Currently, the only events discoverable on their website are the weekly Civic Hack Nights, when in fact they have a few co-produced events coming up which are focused on civic issues and idea generation. These events would likely be a great introduction to the organization for non-technical individuals.
Although parts of the website are responsive, it is obvious that the mobile version of the website was not given thorough attention. On the mobile, the address for Civic Hack Night is nearly impossible to find. Instead of it being listed in the page text, it is hidden in an embedded Google map. This is okay on the desktop version, but on the mobile, it is difficult to discover the actual address.
starting the redesign with a mobile first approach
side-by-side wireframes
Prototype
For usability testing, we built a simple prototype.
HIGHLIGHTED CHANGES
Planned Next Steps
Meet with Core Team
The most important step is to first discuss these ideas with Code for San Francisco’s leadership to determine which ideas are worth further fleshing out and enacting.
Begin Testing Newcomer Meeting Ideas
Keep gathering feedback, and iterate accordingly.
Test Newcomer Survey
Share data with Project Match team, project leads, and Core to see if they can (or want) use it in the manner that we had in mind.
Project Updates
Research and update statuses online and in meeting deck regarding roles, status, scope.
Update wireframes
Apply insights gathered from usability testing and feedback.
Implementing our ideas
Although this two-week design sprint began as a conceptual project, I’ve been in touch with Code for San Francisco’s leadership team from day one to let them know what we have been up to. The leaders have been receptive to our ideas thus far, and have told us that they are eager for us to do a proper presentation for them.
Code for San Francisco is made up of volunteers. If any of these ideas are to be implemented, it is up to the volunteers to do it. Personally, I’m eager to share my time to enable some of these changes to happen, and to test out the various in-person onboarding ideas.