Over time, our product UI evolved without a shared system, resulting in inconsistent components, duplicated effort, and a growing gap between design and development. Designers were recreating patterns, developers were implementing components differently, and users experienced visual and behavioral inconsistencies across the product. Recognizing that this was unsustainable at scale, we initiated the creation of a design system to unify our UI, improve collaboration, and elevate the overall user experience.
Role
Lead Designer (Aug 2023 – Feb 2024)
Goal
Establish a scalable and cohesive design system that reflects the brand’s modern vision and supports future product growth.
Eliminate UI inconsistencies across products by defining clear foundations, components, and usage guidelines.
Improve design and development efficiency by creating a single source of truth for cross-functional teams.
Strengthen collaboration between design, development, and product stakeholders through shared standards and documentation.
Enable faster onboarding and long-term maintainability of the product UI.
Responsibilities
Led the end-to-end creation of the Fiery design system, defining its vision, scope, and foundational principles to support a modern and cohesive UI.
Conducted a comprehensive UX and UI audit across products to identify inconsistencies, usability gaps, and opportunities for standardization.
Designed a scalable and reusable system of foundations and components that became the single source of truth for designers and developers.
Collaborated closely with architects and developers to ensure the system was technically feasible and seamlessly integrated into the product development workflow.
Facilitated design workshops and stakeholder feedback sessions to align teams, validate decisions, and drive adoption.
Produced detailed documentation and design guidelines to ensure consistent usage and long-term sustainability of the design system.
To ensure the design system could scale with the product and remain easy to maintain, we chose the Atomic Design methodology as the foundation of our system architecture.
What Is Atomic Design?
As part of the discovery phase, we conducted research to understand the broader print industry and identify persistent market-level challenges. This involved analyzing industry reports, market data, and trend analyses related to ink usage and wastage.
Atoms (Foundations)
Atoms are the smallest, indivisible elements of the system. They define the visual language and serve as the foundation for every component built on top of them.
Color
Over time, our product UI evolved without a shared system, resulting in inconsistent components, duplicated effort, and a growing gap between design and development. Designers were recreating patterns, developers were implementing components differently, and users experienced visual and behavioral inconsistencies across the product. Recognizing that this was unsustainable at scale, we initiated the creation of a design system to unify our UI, improve collaboration, and elevate the overall user experience.
All colors in this system meet WCAG contrast requirements and are tested in their real usage contexts. Extended color palettes are used only for data visualization and remain accessible through sufficient contrast, labeling, and non-color cues.
Typography
Typography in production environments prioritizes clarity and precision over expression. The system is designed to support dense information, complex tables, and long reading sessions while maintaining accessibility and cross-platform consistency.
Inter’s neutral, highly legible design ensures reliability across technical documentation and operational workflows.
Icons
Icons are functional, neutral indicators designed to support clarity and usability in production-critical workflows without replacing text or introducing ambiguity.
Inspiration Collection
Molecules
Molecules are simple, functional UI elements formed by combining multiple atoms. While atoms define the visual language, molecules introduce interaction and purpose. They represent the smallest meaningful building blocks users actively engage with.
Button
Buttons were treated as a foundational molecule because they represent the most frequent and critical user interaction across the product. Inconsistencies in button styles and behavior were one of the primary issues identified during the audit.
Inspiration Collection
Organisms
Organisms are complex UI components formed by combining multiple molecules and atoms into meaningful, self-contained interface sections. They represent real, functional parts of the product rather than isolated UI elements.
Inspiration Collection
Templates
Templates define the layout structure and content hierarchy of a screen without relying on real data. They focus on arrangement, flow, and relationships between organisms, rather than visual details or final content.
Templates transformed individual components into repeatable layouts, enabling teams to scale interfaces without redesigning structure from scratch.
Pages
Pages represent the final stage of the Atomic Design system, where templates are populated with real content and real data. They demonstrate how the design system performs in real-world scenarios and validate the effectiveness of atoms, molecules, organisms, and templates working together.
Pages completed the Atomic Design cycle by validating the system in real-world conditions while preserving consistency and scalability.
Present to stackholders
We presented the design system proposal to key stakeholders, including developers, product managers, architects, and leadership. The initiative received strong positive feedback, with alignment on the approach, scope, and long-term value of establishing a centralized design system.
Adoption & Governance
Following stakeholder alignment, the focus shifted to driving adoption and ensuring long-term consistency. Clear usage guidelines, documentation, and ownership models were established to help teams adopt the design system with confidence.
The system was positioned as the single source of truth, with shared responsibility across design and engineering. A lightweight governance process was introduced to review new components, manage updates, and prevent duplication, ensuring the system could scale without fragmenting.
What changed because of the design system?
The design system established a shared language across teams, significantly improving consistency, efficiency, and collaboration. It reduced rework, accelerated delivery, and created a scalable foundation for future product growth.
The impact was immediate, the value continues to grow.
Going forward
Learnings
Building a design system is as much about alignment and governance as it is about components.
Early collaboration with developers, product managers, and architects significantly improved adoption and reduced rework.
Atomic Design provided a strong structure, but practical adaptation was necessary to meet real product constraints.
Clear principles and usage guidelines were critical in preventing fragmentation as the system scaled.
Next Steps
Expand the system to cover additional complex patterns and edge cases.
Continue refining accessibility standards across components and templates.
Introduce versioning and contribution workflows to support long-term maintenance.
Explore theming and cross-platform support as product needs evolve.
A design system is never finished, it evolves with the product, the teams, and the users it serves.
