2019 - Student Project - 2 Week Sprint

Code for the City

< User the slider to see the original homepage vs. our solution >

What is the value proposition?

  • Will I belong?
  • Can I contribute?
  • Can I make an impact?


We concluded that by improving the messaging/visuals, showing the impact of volunteering, clarifying the onboarding process, and finding matching projects, we could recruit a more diverse volunteer pool, increase direct traffic to the site, and increase social media mentions.

Task

Enhance the Code for the City website to better engage and inform a more diverse audience (not only in terms of skills and background, but also demographics) who would be interested in contributing their time and skills to civic hack projects.  In addition, your client would also like their organization and its events to become better known overall in the local community.

For the purposes of this sprint, we referenced the Code for San Jose website to be our client website.

Methods

  • Heuristic Analysis
  • Online Survey
  • User Interviews
  • Usability testing
  • Business Analysis
  • Comparative/Competitive Analysis
  • User Persona Generation
  • User Flow Development
  • Concept Development
  • Wireframing
  • Prototyping (Figma)
  • Prototype Usability Testing
  • Results/Summary

Team

Christopher Centers (Me) - Visual Designer

Jackie Ajoux - Project Manager

Michael Struck - Copy Writer



Everyone on the team participated equally in all activities, but we also focused on our individual strengths as well. Since my background is industrial design, I tended toward visual design. Jackie has a strong background in project/program management and Michael has a background in marketing/advertising.

Research & Key Findings

Initial Research


  • Consistency + standards -  Minimum Violation
  • Match between system and real world - Mild Violation
  • Error prevention - Mild Violations
  • Aesthetic and minimalist design - Mild Violation
  • Recognition rather than recall - Severe violation

  • 316 total participants
  • 68 candidates that passed both screening questions
  • Survey method: Organic network, MechanicalTurk
  • Payment given to survey candidates who passed screening on MTurk: $0.20

  • 6 Participants
  • All female
  • 22 - 72 years old

  • Homepage Impressions
  • Finding a project
  • Signing up for an event

Key Takeaways

Client Side

  • No clear messaging - purpose and mission were overwhelmingly unclear
  • Projects live in a hard to search and disorganized format
  • Meetup.com had an intuitive interface to sign up for an event

Customer Side

  • Volunteers intrinsically want to help their community, and want proof of impact
  • Volunteers want to feel like they belong
  • Volunteers hear about events through word of mouth and social media
  • What is "civic hacking"?

Competitors / Comparators


Idealist.org

Care.org

Crunch.com

User Persona & Journey


The Diligent Do-Gooder

  • Active volunteer
  • Feels good making a difference in their community
  • Busy person; hard to make time
  • Is an admin looking to become a project manager
  • Likes clear expectations
  • Hates their time being wasted at volunteer events
  • Wants fast engagement
  • Wants good coordination within organization
  • Generally likes working in a group, but is delighted to contribute from home

Making a Connection


Will I

belong?

Can I

contribute?

Can I

make an impact?

Problem Statement

Due to a disorganized overall experience and unclear information on the website, prospective volunteers are less likely to sign up for Code for the City events because they are unsure if they can contribute their non-technical skill sets, cannot quickly discover projects they are interested in, and do not know if they will fit in.

BACK TO TOP

Proposed Solutions

Landing Page Clarity


Will I belong?

We realized, after synthesizing all our research, that our target user had no imagery or supportive content to help them connect with the group. All of the competitors utilized compelling lifestyle shots to spark reactions in their users.



We focused on this sense of belonging throughout the site with images of events, narrative about attending, and why your time matters.

Improved Onboarding & Project Filtering


Can I contribute?

Continuing the idea of will I belong, our research showed that user's had a lot of questions about how they could contribute their skillset and what they could expect while attending an event.


In an effort to answer those questions, we developed an onboarding page designed to walk user's through how to become a volunteer, what resources are used, what a typical event is like, and location information.

Finding the right fit!

User's also felt bogged down finding suitable projects that would match their strengths.


The current site uses GitHub as the depository of documentation and project listings. While this is a cost effective solution, it created a point of friction trying to find projects that both needed help and the type of volunteer they needed.


By creating an inventory of projects on their own page and providing filters, user's are able to quickly find projects that match their skillset, connect to the team members, and have access to the GitHub data.

New Impact Page


Can I make an impact?

With the user's time being so important, they needed a strong motivator to convince them to devote the time to volunteering.


So when exploring the idea of the value proposition, we overwhelmingly discovered that volunteers needed to know that their efforts will generate results.


We decided to add a full page dedicated to showing quantifiable information related to the results of volunteering. Items like milestones reached, number of active projects, number of volunteers, and news mentions about the groups impact.

Prototype - Usability Testing


Task 1: Impressions

  • What you think this website is communicating? 
  • What types of occupations do you think CFTC wants to attract?
  • What are your initial impressions?

Improved!


  • Usability score improved from the baseline test
  • Faster response time
  • Clearer understanding of the mission



Further refinements

  • Copy could be clearer and worded in a way that makes it less "tech" oriented.



Task 2: Find a project & Sign-up

  • Find a project that specifically needs skills from a project manager.
  • Sign up.

No Improvement


  • Users were still confused about signing up through the MeetUp page.



Further refinements

  • Either move the placement of the MeetUp button and relabel it something like "Sign-up" and a note about redirecting to MeetUp.com
  • Or incorporate the sign-up process into the site itself vs. a third-party service.

Task 3: Expectations

Improved!


  • Usability score improved from the baseline test
  • Faster response time
  • Clearer understanding of the onboarding process



Further refinements

  • The onboarding page could be prioritized more from the homepage.

Next Steps & Notes

Next Steps


  • Usability test the following changes to the project page: 
  • Change the “meetup” icon on the project page to “Sign Up”
  • Add modals to alert the user that they will be redirected to another site
  • A/B test the user interface, with an emphasis in testing the language used on the site, to see if we can further increase the clarity of the website’s content, reduce friction, and increase sign ups
  • Explore engineering effort and costs to build additional native features within the Code for the City website to reduce context switching and effort from the user

Notes


What I enjoyed about this project

  • It was really interesting to see the responses from the surveys and interviews. You could see how people were almost conflicted with wanting to volunteer, yet feeling stretched for time.
  • Working on the problem/hypothesis was challenging and fun. It was such an emotion-driven topic that digging in to the root of the issues got kinda messy and difficult to verbalize into a cohesive statement.


What I could have improved

  • I could have been more verbal of a team member when it came to issues I didn't agree with or solutions I felt pressured into doing. I would have liked to have had more time exploring more parts of the website layout to see if we could have come up with a more unique solution.
Share by: