Project Sidewalk

An open-source civic platform that crowdsources sidewalk accessibility data through a labeling game

The Challenge

The platform’s UI was visually outdated, inconsistent, and fragile—making even small updates risky.

Impact

I led a complete redesign of the visual system and created a scalable design system adopted across 8+ cities. I improved dev velocity, reduced frontend bugs, and introduced WCAG-compliant components.

Team

1 designer (me)

1 PM

2 developers

Duration

12 months

Platform

Web (desktop-first, responsive design in progress)

Tools

Figma

GitHub

Hotjar

Phase

This case study reflects my personal perspective as the lead designer. It does not represent the official views of Project Sidewalk.

Due to NDA constraints, certain implementation details have been omitted or generalized.

Hover me!

Overview

What is Project Sidewalk?

Project Sidewalk is a web-based platform where volunteers label accessibility issues in their city's sidewalks using Google Street View. These labels train machine learning models, which power tools for mapping, visualization, and city planning. The platform's goal is to help make urban environments more accessible by informing smarter routing, infrastructure repair, and inclusive design decisions.

Challenge

When I joined, the platform had over 350,000 user labels. But lacked a consistent design foundation, making even small UI changes difficult and the overall experience fragmented.

I faced three core challenges:

Challenge #1

Visual inconsistency

Responses often sounded like templated coaching tips, lacking emotional depth or relevance.

Challenge #2

Reporting flow drop-off

due to unclear structure and feedback.

Challenge #3

No design system

meaning engineers had to rebuild UI from scratch for each feature

My goal was to rebuild both the UX foundation and design system—so the platform could grow, and users could contribute with confidence.

Process

A phased approach to rebuilding from the inside out

To better illustrate the evolution of this 12-month redesign, I broke down the process into four key phases—each tied to a concrete set of outcomes and design activities.

Auditing the experience to identify scalable design opportunities

Over the course of the first phase, I focused on mapping out the platform’s existing UI and user experience. This included documenting every component, interaction pattern, and behavior across flows.

Challenge #1

Visual inconsistency

Challenge #2

Reporting flow drop-off

Challenge #3

No design system

ACtion #1

I identified inconsistencies in how labels, icons, and button states were used, even within the same page.

ACtion #2

I reviewed Hotjar heatmaps and session recordings to understand where users dropped off or hesitated.

ACtion #3

I analyzed GitHub issues and user forum discussions to prioritize recurring usability pain points.

This initial groundwork shaped how I defined the design tokens, restructured layout logic, and prioritized areas for modular rebuilding. It also aligned the team on where design interventions would make the greatest impact.

Designing a System that Could Scale and Stick

To address the platform’s fragmented interface and repetitive UI development, I focused on building a design system grounded in clarity, consistency, and developer efficiency—starting from a reusable token layer to full production integration.

1. Establishing the Foundations — Tokens

I began by defining atomic values that could drive scalable decisions across layout, type, and interaction:

Screenshot of Figma component playground

These tokens were implemented in Figma as named styles and variables, mirroring how engineers managed SCSS variables—ensuring semantic consistency across tools.

2. Building the Component Library

Each component was reconstructed using these tokens, enabling flexibility and system-wide consistency:

These tokens were implemented in Figma as named styles and variables, mirroring how engineers managed SCSS variables—ensuring semantic consistency across tools.

3. Bridging Design and Development

Each component was reconstructed using these tokens, enabling flexibility and system-wide consistency:

These tokens were implemented in Figma as named styles and variables, mirroring how engineers managed SCSS variables—ensuring semantic consistency across tools.

Outcome

What changed after we launched the system

What began as a UI cleanup evolved into a strategic effort to scale a civic tool through thoughtful, resilient design.

0

+

reusable components

adopted across the platform

Contributor task completion improved due to clearer, more intuitive flows

Engineering effort dropped, as designers and developers now shared a common system language

Reflection

Shifting from screens to systems

Learning #1

Mindset shift

This project changed how I think about design—from delivering polished interfaces to building systems that enable sustainable growth and empower others to contribute.

Learning #2

System thinking in real-world impact

Designing for a civic platform meant thinking beyond aesthetics. My focus was on improving participation and trust by creating tools people could rely on.

Learning #3

Designing for sustainability

Long-term maintainability required aligning design with team workflows, community goals, and a constantly evolving platform.