Cityblock
Commonplace Design System
Context
While at Cityblock, a rapidly scaling healthcare company with over 1,000 employees, I led the transformation of Commonplace, their design system, supporting ~80 engineers and designers. When I joined, Commonplace existed only as an engineer-facing Storybook, invisible to designers, who instead worked from a single, non-atomic Figma page of loosely componentized UI elements.
I formed and led a design-system scrum team with our Design Manager, a Junior Designer I mentored, and a UX Engineering Lead, spearheading the re-componentization, renaming, and atomization of the Figma library and authoring usage guidelines in Storybook. I drove org-wide adoption by aligning Design and Engineering on how a shared system would improve quality, consistency, and team efficiency.
Team and Timeline
📎
My Role
Design Systems Lead
🙌🏼
The Team
1 Design Systems Lead
1 Engineer
3 Designers
⏳
Our Timeline
4 months
My Work
Getting Buy-in
I paired closely with a Lead Engineer to identify three of our largest problem areas.
📏
Inconsistency
Designers had to break and recreate components, putting the product at risk for inconsistency
Solution:
Expand on the limited UI library to create a robust collection of reusable componentry
💬
Miscommunication
Component nomenclature differed across systems, causing gaps in communication between engineers and designers
Solution:
Pair with engineers to establish parity between the two, and build a shared language
📚
Library Size
Expanding the Design System could increase the library size, causing a drop in usage and usability issues for designers
Solution:
Reduce the number of components by leveraging variants and properties
Although we had an existing Figma component library and Storybook repository, these were not connected. The plan was to build a Design System encompassing all aspects needed for a smooth workflow across different teams.
We presented our proposed plan to internal stakeholders, including the Design Manager and the Director of Engineering. We were able to get leadership on board, and we put together a small team dedicated to Design System improvements.
The State of Storybook
The first step was to audit our Storybook and Figma files. The components in Storybook were organized alphabetically, and broken into 3 sections. Although there were some changes we would make to the overall hierarchy, this was a good starting point. We looked at 15+ other Storybook Design System pages to identify aspects and structures that could work for our team.
The Original Figma Library
The original Design System file was a selection of Material Design System's individual components grouped together on a Figma page. There were duplicates, inconsistencies, and broken components. Our plan was to revisit the anatomy of each component set and apply Atomic design principles across the system.
My Process
Alongside my Lead Engineer partner, I put together a roadmap and a Scrum process to adhere to as we inched closer to our Northstar. I began by rebuilding 50% of the existing component library before onboarding new designers to help out. Designers were then able to take on incremental tasks, focusing on restructuring our Figma library both atomically, and anatomically.
Solving for Inconsistency 📏
To address the issue of designers using inconsistent components and patterns we built a robust collection of reusable componentry. This took place over the course of several months. Throughout each new deployment, designers were able to adopt new components for their individual scrum projects.
Addressing Miscommunication 💬
Our driving force was the close and collaborative relationship I built with the Lead Engineer. The two of us researched and restructured the hierarchy for our Figma and Storybook libraries, bringing us closer to a shared language between the Design and Engineering teams.
Tackling Library Size 📚
In order to reduce the number of components in our growing Design System I made sure we all new designers got up-to-speed with Figma's latest features. Leveraging variants and properties helped reduce the number of our components significantly.
Everything in One Place
While refurbishing the component library, I wanted to make sure we documented component usage guidelines as well. I established a blueprint for writing guideline one-pagers, which we added to each Storybook component page for designers to reference. Each Figma Library page provided an overview along with helpful links to guidelines in Storybook.
Another exciting update we incorporated was an accessibility plugin. This helped us audit our system before each deployment to ensure our system met baseline standards.
The Outcome
After 10 months our Design System was almost unrecognizable, and the project was a great success. As of May 2023 designers and engineers alike are able to use and reference the Commonplace design system powering the company's product suite. The system provides designers with the tools they need to do their best work. After my tenure at the company, several people reached out to commend our accomplishments.
📏
All product features now share the same reusable UI componentry
💬
Designers and Engineers alike are using Storybook as their single source of truth
📚
Designers have access to a robust component library, and contribute to it regularly
 |  |  |  |
|---|