CleanUp SF.

Creating an alternative initiative to help fight the SF sidewalk epidemic 

My Role 

    UX Researcher

    UX Designer

    UX Copywriter

 

Team 

    2 UX Designers

    1 UI Designer

   

 

Tools 

    Figma

    InVision

    Pen&Paper

Platform 

    iOS App

   

 

CleanUp SF.

CleanUp SF is an iOS app that connects people together to help San Francisco become a cleaner and safer city. The mission is to help fight the city's dirty sidewalks through local groups and volunteer events in a fun, social, and engaging community platform. 

The Challenge

How Might We...

Address the sidewalk epidemic in SF?

San Francisco is known as one of the filthiest cities in the world. Locals walk through sidewalks polluted with feces and hazardous materials on a daily basis. This poses serious safety and health concerns and conditions are only getting worse. No one deserves to live in this condition. We all deserve safe, clean, and healthy sidewalks. 

Process

Research

We interviewed and surveyed San Francisco residents who have lived in the city for 5+ years to better understand locals' thoughts and pain points who have lived through different stages of the city sidewalks over the years.

Research Goals & Findings.png

Research Goals 

•  Learn and understand what people thought of the current conditions

• If there is a need for any necessary intervention on this issue at all

• Were locals concerned about this? Or are they okay with this as the new “normal”? 

User Interview Quotes

The qualitative and quantitative research results directed us to a community-focused platform that improves the current sidewalk conditions in the city.  

Defining Our Users...

Meet Our SF Residents

I created two personas that embodied the users from our research: Kianna and Wilson. Both personas carried sidewalk safety concerns and thought current initiatives needed improvement. However, while our primary persona, Kianna, is proactive in a cleaner sidewalk initiative, Wilson wants change but is passive about his thoughts. 

Primary Persona - Kianna
Primary Persona - Kianna

Secondary Persona - Wilson
Secondary Persona - Wilson

Primary Persona - Kianna
Primary Persona - Kianna

1/2

To dive deeper into our primary persona's narrative, we fleshed out Kiana's thoughts, emotions, and behavior through journey mapping to better assess and design a solution that will better cater to her needs throughout various situations. 

Fine-tuning The Problem...

Problem Statement

"Kianna is repulsed and frustrated during her commute to work due to overflowing trash cans, stench, garbage, fecal matter, and needles lying around on the city’s sidewalks. She needs a platform that allows her to be involved and contribute to San Francisco’s sidewalk conditions.” 

We designed & tested 3 phases of our mobile app: Concepts, Low-Fi & Mid-Fi Wireframes

Exploring Concepts...

Building the community

We started to explore possible concepts through rapid mind mapping and 6-8-5 sketching to discover plausible approaches to the problem. We focused on main features to help streamline our MVP project and ultimately came up with two concepts: 1) community volunteering 2) reporting sidewalks

Mind Map

Concept #1:  Community Volunteering

Users can connect with community members and join various groups and events providing community involvement and engagement. 

6-8-5 Sketching

Low-Fi Wireframes

Concept #2: Reporting Sidewalks

Users report issues on the sidewalk and check on the report status. This alerted immediate issues, is low effort, fast, and convenient.  

6-8-5 Sketching

Low-Fi Wireframes

Concept Testing

We conducted concept testing for both designs along with a desirability test to determine which concept was preferred. There was an even split between both concepts.

Without a clear concept winner, I decided to measure the impact and urgency of both concepts using a priority matrix. 

* I implemented a few features from the report concept as highlighted above.

As we sorted through the priority matrix, I realized that reporting wasn't scalable and similar concepts already existed - 311. It was a unanimous decision to can the reporting concept once this dawned on us.

Keeping it MVP

 

With a settled concept, we started hacking away at the information architecture of our app. We revised our original concept and stuck to the core functionalities of the app: Groups and Events.

 

To prompt potential features, I created some quick user flows to explore likely scenarios that our personas might come across when using the app. 

Site Map

User Flows

Mid-Fidelity Wireframes...

Let's build a community!

With the blueprint of the layout, I started to digitalize our designs. With the concept and desirability test results in mind, I pulled inspiration from both concepts in the priority matrix when moving into wireframes. 

Onboarding

Goal: Entice new users and help people understand the value of the platform. 

  • For first-time users only

  • Highlights main benefits of the app

  • Different sign-up options for variety and to speed up the process

Groups

Goal: Create, join, and browse through community organized groups. 

  • Focused on forming communities encouraging active engagement 

  • Serves as an open forum (admin regulated) for members to connect and build safer a city

  • Use of horizontal carousel to reduce vertical space

  • Attract user interest with suggested categories

Events

Goal: Browse, create, and RSVP events.

  • Focused on community involvement

  • Cohesive layout to bring an intuitive experience throughout the app

  • Easily navigate through commonly visited pages with toggle tabs

  • CTA to quickly create and set up events

  • Design is kept minimal due to the heavy context

TESTING & ITERATIONS

What did the users think?

We conducted usability testing with 5 participants to learn more about users' opinions and observe any challenging or interesting details. We were ecstatic to find that 100% of the participants completed all tasks

Despite our completion rate, our participants' feedback said otherwise. We were overall incredibly pleased with the direction our project was headed but there was still a lot of work to do.

FINAL DESIGN

prototype-cleanupsf.gif
transparent bg.png
Joined Group
Browse Groups
Joined Group
Events
Event Created

The amazing UI Designer bringing the wireframes to life: Kendra Good

NEXT STEPS

With more time...

Additional rounds of usability testing with the updated wireframes and prototype with a focus on the tooltip after user sign up. I want to analyze what users thought of the guide and if and validate any iterations to further improve existing features to allow for new discoveries of users’ needs. 

Due to COVID constraints, our team conducted usability tests solely remote. While our results were well received, it didn’t truly reflect how our users would use our app in their real environment. In the future, we hope to replicate a more ideal environment so that the usability testing result will be more accurate. 

LESSONS LEARNT

Anchored to your early designs.  

Earlier in our synthesizing and solution phase, our UX team came up with 2 concepts that we couldn’t let go of. However, we thought about how it would scale and if it was plausible to accomplish under an agile framework.

 

Ultimately, it became clear which concept checked all the marks. Sometimes having a great design is only great if you can scale it to market. Factors such as time, resources, and other constraints hold just as big of a factor. 

Shoutout to my awesome team: Kendra & Riddhi

Next Project

Mind Over Matter