Clean SF

TLDR: A fictional responsive government website & a real solution to pollution.
Clean SF device preview

Project Overview

Tools: Adobe XD
Many community cleanup organizations operate in the city of San Francisco while garbage continues to litter the streets and be illegally dumped. Cleanup events struggle to keep pace with litter and should not be relied upon solely, but the current municipal waste management solution should not be impacted.
Design a responsive and accessible website for a fictional municipal program
Branding and outreach that will encourage people to participate and support the program


To find a possible solution for San Francisco’s litter difficulties I conducted interviews of locals and explored existing programs both city-run and independent organizations.


  • Understand the market and identify target groups
  • Explore resident’s experiences with litter and waste management in the city
  • Learn how existing community cleanup groups fulfill the needs or residents
  • Understand goals, needs, and motivations within the target group

User Interviews & Insights

I interviewed residents of San Francisco to uncover their opinions of the current state of waste management and to gain insights regarding willingness to participate in community cleanup events. In addition, I asked a few questions about how people preferred to receive or find information regarding citywide programs.

“Laws aren't a solution, just a tool. We need more tools.” -San Francisco Resident
Empathy map sticky notes


  • People participate in established city-run programs like composting and 311
  • Residents will engage in community cleanup events by non-profit organizations
  • People believe a culture shift will aid in cleaner streets
  • People get information about cleanups online


  • An institutionalized cleanup program that happens on a daily/weekly basis
  • A culture shift to aid in keeping the streets of San Francisco clean
  • Information about available programs needs to be available from more than one source

Understanding Existing Services

I chose to take a closer look at four of the most active cleanup groups in San Francisco; one was city-run and three were non-profit groups. I explored how easy it was to get information about each organization, how active they were, what unique offering or service they were bringing to San Francisco, and how they engaged with the community to gain volunteers and support.

San Francisco Public Works

  • Responsive site with good contrast
  • Clear instructions and simple sign up with or without the internet
  • Ability to work as an individual or as a group
  • Provides information about other volunteer opportunities
  • User flow to arrive at volunteer information is clunky with too many steps from main DPW page
  • Graphics load slow with a large blurry spinning wheel
  • Program is mainly spread through word of mouth

Refuse Refuse

  • Clear navigation and information
  • Provides resources for other volunteer opportunities
  • Active group with info about planned events
  • Does not address cultural differences, stating that we can be like Japan in terms of cleanliness
  • Clearly favors certain parts of the city

The Clean Mission

  • Connected with local small businesses for sponsorship
  • Site navigation is clear and easy
  • Inactive and out-of-date information about COVID regulations
  • Services only a few neighborhoods in the city
  • Not much information about how they work or how cleanup events are conducted


  • Unique offering to help with litter problem
  • Users must purchase a garbage picker that is remarkably unrefined with 3D printed parts and unorganized wires
  • Questionable utility of data collection
  • Surprisingly little information on organized cleanups or about the company in general
  • Seems to be focused on one of the already cleaner areas of SF

Additional research indicates that the best way to encourage a behavior is to make the desired choice as easy as possible for a person. This is demonstrated through the psychology around opt-in versus opt-out policies. Programs that have been proven to work through this method include countries with opt-out organ donations significantly higher than countries with opt-in policies. And although San Francisco’s own composting program is not technically a choice, but enforced by the city, it is widely successful in reducing landfill waste and a normalized change for resident’s waste management.

Municipal programs have already changed SF’s waste culture and can again.

Designing for Simplicity

Site Map

All links and resources have been kept within three clicks for a user on any page so any needed information about the program is easy to find and to improve SEO.

Sitemap structure

Paper Wireframes

I quickly laid out a few versions of each of the main pages of the site in paper wireframes to decide which layout best suited the information.

Lo-Fi Digital Wireframes & Hi-Fi Mockups

I then developed the paper wireframes with the best features into lo-fi digital wireframes and then into hi-fi mocks in Adobe XD. These are the wireframes and mocks for large,medium, and small sized screens.

Overview of mocks created in Adobe XD

Style Guide

This is intended to be a fictitious government site and is (mostly) compliant with both the San Francisco Design System and the U.S. Web Design System. The SFDS is a little sparse in some areas so I made a few decisions on my own so all elements are cohesive and accessible.

Style guide


Click an image to check out the prototypes for both large and mobile screens:


Clean SF was a big lesson for designing for accessibility which was initially my intention for building a fictional government website. If I were on a design team for the city, I would make suggestions and contributions to the existing design system so that all city and county websites are more cohesive.