Clean SF

TLDR: A fictional responsive government website & a real solution to pollution.

Clean SF device preview

Project Overview

Tools: Adobe XD

Challenge

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.

Methods

‣ Design a responsive and accessible website for a fictional municipal program

‣ Branding and outreach that will encourage people to participate and support the program

Research

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.

Goals

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

Insights

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

Needs

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

Strengths

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

Weaknesses

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

Strengths

Clear navigation and information
Provides resources for other volunteer opportunities
Active group with info about planned events

Weaknesses

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

Strengths

Connected with local small businesses for sponsorship
Site navigation is clear and easy

Weaknesses

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

Rubbish

Strengths

Unique offering to help with litter problem

Weaknesses

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

Prototypes

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

Reflection

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.