Unifying NYC’s Department of City Planning tools through a design system
A Design System for the Department of City Planning’s web applications.
Project Overview
The NYC Department of City Planning’s portfolio of 14 public-facing applications lacked visual and functional consistency. Partnering with engineers, my co-designer and I built a flexible design system that unified the user experience, reinforced our brand identity, and enabled teams to design and ship more efficiently.
High-Level Impacts
-
Unified and Modernized Brand Across Platforms: Unified 14 applications under a consistent visual language, improving brand recognition and user perception.
-
Trust Through Consistency: Delivered a professional, reliable experience that strengthened user confidence in civic tools.
-
Design System as a Single Source of Truth: Documented reusable components and guidelines to ensure scalability and continuity for future teams.
-
Faster Builds, Smarter Prototyping: Reduced development time and empowered teams to rapidly iterate on new ideas.
-
Accessibility at the Core: Met AAA standards to ensure every New Yorker can use our tools with ease.
Scope
New Design System
Role
UX Research, UI Design, UX Design, Interaction Design
Team
2 UX/UI Designers, Engineering Team Lead
Duration
May 2021 - March 2024 (intermittently)
Background
The NYC Department of City Planning’s Application Development team maintains and develops 14+ applications that allow the general public to access and analyze NYC planning data, create components for NYC’s Land Use Review Process, and advocate for their community’s needs.
Problem
The NYC Department of City Planning’s (DCP) 14 web-based applications—used by city planners, community advocates, and the public—lacked a unified design standard. This inconsistency weakened user trust and undermined the perceived legitimacy of our civic digital tools.
Without shared patterns or components, teams had to recreate UI solutions from scratch, slowing both design and development. As a result, the applications became fragmented, introducing unnecessary complexity and cognitive load for users.
.png)
📊 Competitive Analysis
I conducted a cross-industry analysis of map-based platforms like ArcGIS, Google Maps, Uber, and Lyft to understand common design patterns and user expectations.
📝 UI Inventory
My co-designer conducted a comprehensive style and UI inventory to identify inconsistencies and redundancies across our suite of applications.
Research
For us to develop a comprehensive design system, it was important to thoroughly understand our portfolio—our design patterns, necessary components, and user experience navigating through each application.
🥨 Flexible & Adaptable
I focused on designing flexible and interchangeable components.
📲 Responsiveness
Our web-based applications are viewed across various viewport sizes, so we adopted a mobile-first approach for all components.
🔍 Accessibility
I conducted a cross-industry analysis of map-based platforms like ArcGIS, Google Maps, Uber, and Lyft to understand common design patterns and user expectations.
🧬 Atomic Design
My co-designer conducted a comprehensive style and UI inventory to identify inconsistencies and redundancies across our suite of applications.
Component Development
Component Highlights
-
Label - I created this component as a base molecule that could be used to create other components. “Label” includes text and left and right icons, which can be hidden, swapped, or replaced with radial buttons or checkboxes. It comes in four size variants, making it adaptable across layouts.
-
Buttons - With a recent Figma update, I was able to reduce the 72 button types I created to 26 (with an addition of 2 button types).
-
Data Tables - Before the Design System, I built 17 header and 56 row components for just one app. With the new system, this was streamlined to only 4 header-cell and 8 row-cell components—greatly simplifying table creation while preserving flexibility for future use
Challenges
-
NYC.gov, the umbrella organization, had limited resources and no specific component standards provided that we had to follow.
-
The Department of City Planning’s orange brand color posed challenges for color contrast in regards to accessibility.
-
To address this, my co-designer selected teal, the complementary color to orange, as the new primary while I ensured the colors we used were less challenging to use in respect to accessibility.
-
My co-designer also developed an accessible range of orange shades, re-integrating the brand color into our components.
-
-
The 14+ applications in our portfolio have diverse tech stacks and product owners, preventing us from being able to immediately implement the design system.
Design File
What's Next
Our design system is still evolving. As we develop new products, we face new design challenges that may require additional components or reveal new uses for existing ones.
We're gradually updating legacy components to align with the system and its guidelines as we enhance applications in our portfolio.
You can explore current implementations through the following interactive prototypes I designed and our live applications:
-
Interactive Prototypes
-
Live Websites
We’ve also started discussions with a team at another government agency working on a new design system for the NYC.gov website and ecosystem, with plans to collaborate in the future.