Code for SF - Onboarding site
Improving on-boarding process for Volunteers
Description:
Code for SF is a community where a group of people work together each week with the objective of improve the City and County of San Francisco through the use of technology and knowledge of technologists, planners, designers, doers, thinkers, and activists.That is why, It is also a space that give people the opportunity to experiment, learn and practice skills by joining different projects.
Problem:
First time volunteers are not engaging enough with the community because they don’t get enough information about the projects they could start working on.
71% of all first-timers do not return to Hack Night
40% of returning members are performing web check-in
Research provided:
Research Group conducted an extensive user-centered design processes and gained initial success with physical, service, and digital prototypes, including , team accessibility program, project matching hat project, and web project list.
HMW brainstorm:
How to facilitate learning and how to involve volunteers into projects in a easy way?
How to explain to new newcomers which projects they can help?
How to enable members to display info about projects for new participants and enable effective matching for both parts?
Solution Statement
New members need a quick way to connect with project teams that fit their interests, skills, and goals in order to gain traction and contribute to social good.
Code for SF needs a friendly online platform where volunteers will be able to find a project that adapts to their skills and interests by filtering projects into different categories. The actual system to do this is called "Project Match” where volunteers fill out the skills with what they want to learn, also the skills they can contribute with and their civic interests.
UI & Logo for Project Match BEFORE research:
Pros and Cons from actual UI (from user testing results):
Project Match Logo : Is difficult to understand
New members: They don’t know what “match” concept means. (‘Matching hat’ not clearly explained)
Project list too text-heavy
The steps feels like they the need to be filled in that order to get a project result.
Lack of consistency in colors with Code for SF community.
Is the design of the project list easy to use?
What we want to learn from prototypes and mockups:
We want to learn if the design of the ‘matching service’ effectively help new members find project teams that match their skills and goals.
We want to test out different flows between wizard design, sorting design and other options.
We want to learn if the flow is clear and easy to catch.
UI & Logo for Project Match AFTER research::