cinch — Streamlining Efficiency with a Unified Design System
Boosting Consistency & Accelerating Development Through a Scalable, Well-Structured Design Framework
Introduction
At cinch, I established a Design Operations team as a self-initiated project alongside my daily work. This effort stemmed from my passion for improving design consistency and operational efficiency across our web development teams.
Previously, a dedicated Design System squad maintained and evolved design standards, ensuring design outputs were consistent, efficient, and aligned with the company’s brand identity. However, this team was dissolved following a round of redundancies, abruptly stopping all ongoing projects, including developing the V2 library. The isolation of the team and the loss of institutional knowledge left significant gaps in the system.
Challenges
I observed compromised builds with an output quality of around 60–65%. This lack of parity between design and development resulted in lengthy build times, extended quality assurance cycles, and delayed releases.
Further investigation revealed that while creatives had access to the V2 design system, it was incomplete in the web environment. This disconnect between design tools and development infrastructure led to inconsistent outputs, miscommunication, and inefficiency.
The Real World
The design language, variables, and components used in the web environment (V1) did not align with the Figma design system (V2). Only a minimal set of V2 components was built before the Design System squad dissolved, leaving the team with an incomplete and underutilised resource. As a result, most of the platforms continued to rely on the earlier V1 system, creating a communication gap between designers and developers.
Working Group
Engineers and UX designers joined forces, aligning tools, processes, and communication to bridge the gap. After careful consideration, the group decided to revert the web environment to the more established V1 design system as a foundation. Future iterations and improvements would build upon this stable base, ensuring consistency and reliability.
The Problem
A significant challenge arose: the V1 design system did not exist in Figma, the primary tool used by designers. Instead, designers had access only to the newer, incomplete V2 system, leaving them without a reliable, up-to-date resource and exacerbating the misalignment between design and development.
Storybook
I discovered an old, abandoned Storybook repository containing the V1 design system components. Storybook, a popular tool for developing UI components, housed archived versions of the original V1 system. I could replicate the V1 variables and components in Figma by referencing this repository.
Figma V1 Design System Library
I began creating variables for foundational elements such as colours, spacing, and typography. Once I established the basics, I built components like buttons, replicating everything found in the Storybook repository. Using an atomic approach ensured alignment with the V1 system, resulting in a consistent and reliable resource for designers.
Staged Releases
As I constructed each component of the V1 design system in Figma, I planned staged releases for the creative team. I also actively sought feedback from designers and developers to ensure the system met their needs and expectations.
To onboard designers, I introduced small design tasks supported by hands-on guidance. This approach fostered a sense of ownership and encouraged continuous improvement.
Additionally, I scheduled meetings with engineers to inspect components using Figma Dev Mode.
Monitoring Usage
The team will gradually adopt the new V1 design system. New designs initiated within the company should now use the latest V1 library in Figma. The working group will monitor adoption to ensure it becomes the standard for new solutions, phasing out the V2 library.
Summary
The team has made significant progress and now has solid foundations to build. A robust and consistent design system enhances design consistency, improves development accuracy, and ensures the organisation continues to deliver high-quality experiences.
Next Steps: Design
- Monitor the web squads’ effectiveness regarding development output (build quality and time).
- Write usage guidance for variables and components.
- Create Figma page templates for core web landing pages, such as the Home, Search, and Product Detail Pages (PDP).
- Continuously update components in the V1 design system Figma library for broader use.
- Collaborate with engineering to refine naming conventions and improve usability.
Next Steps: Engineering
Add, edit, and remove components in the web version of the V1 design system and Storybook.
