Streetscape Design System

Problem Space

NYC DCP plans for the future of New York City, committed to making its public data freely available to all members. Specifically, the IT Division of Department of City Planning (DCP) is responsible for all of the agency's digital services and products, including a broad portfolio of internal and public-facing web and mapping tools.

However, given the diversity of the products, DCP doesn't follow any standardized design guidelines. This can lead to several issues, including:

1. Inconsistency Across Public-Facing Products
2. Unclarity of an Organization Identity
3. Inefficiency Between Cross-Functional Teams

Solution Highlights

I reimagined Streetscape, NYC DCP's design system, in order to unify digital products for a consistent and accessible experience across the organization. Given the time, I focused on revising the foundations of the design system, including six different design libraries, as well as streamlining the workflows between designers and developers, providing extensive documentation on how design elements should be used.

Design Process

To provide an overview of the design process taken for this project:

1. Initial Discovery
   1. Problem Discovery
   2. Discussion with Manager
2. Research and Understanding
   1. Secondary and Primary Research
   2. Goal Definition
3. Design and Document
   1. Six Foundational Libraries
   2. Github Documentation and Markups
4. Project Handoff
   1. Handoff to Developers
   2. Internal Presentation

Initial Discovery

In the early days of the fellowship, my first project was making design improvements to an existing product. For standard practices, I made these updates following DCP's design system, Streetscape. However, I soon noticed some problems with it.

1. Current products don't adhere to DCP's design system. They either use it differently, or follow an outdated design system that dates way back
2. The design system was incomplete and outdated. Looking at the design system itself, I saw issues that needed some revisiting. These issues spanned from accessibility, flexibility, to incompleteness.

Research and Understanding

I first took time to review how to approach a design system project, including speaking with developers to understand current workflows and how they use design system.Also, since this was my first time working on a design system, I quickly learned about general process, documentations, and library structures. In particular, I examined popular ones with a focus on accessibility and flexibility.

Design and Document

In this case study, I'll highlight one library that encapsulates our overall redesign process and decisions for this part of the project. To solve the problems within the current color system, my design philosophy was to build upon, as opposed to redesign.

1. Documentation: I created detailed documentation, including semantically named color tokens and usage explanations, to assist designers and developers.
2. Brand Consistency: I preserved DCP's existing colors while adjusting their application to ensure they meet AA contrast ratio standards.
3. Expanded Palettes: I broadened the color palettes to support a wider range of use cases across DCP products.

Project Handoff

To connect workflows, we integrated a plugin to embed Figma to Storybook. When designers create changes to Figma files, it reflects changes within that is embedded to its respective Storybook component. This helps bridge the gap between design and implementation as it is easier to see visually what updated Figma components correspond with their Storybook counterpart.

Project Takeaways

With limited experience in design system, I faced a steep learning curve when starting this project, but it reminded me to keep learning, be my own leader, and skillfully use resources I have to my advantage. In addition, I was designing not only for users but also engineers, designers, stakeholders, and more. This means having an understanding of everything involved and to adapt to workflows, as opposed to changing everything entirely.