WorkFreelanceAboutResumeContact

Revamping Nobel Flame Design System
tl;dr

The design system at my company was fragmented, with over 150 inconsistent colors, disorganized components, and no reusable library, leading to inefficiencies and a lack of cohesion.

I conducted a full audit, adopted Atomic Design principles, and streamlined colors, typography, spacing, and components into a scalable system. The design system now serves as a trusted source of truth for design, with measurable improvements in productivity and onboarding.




Background When I joined my company, the design system was fragmented and inefficient. The Figma files consisted of outdated screenshots, unorganized elements, and multiple yearly iterations of a "style guide." There was no reusable component library, and the designs often mismatched the implemented code. This lack of structure hampered productivity and consistency across teams. Recognizing the challenges, I decided to overhaul the design system to streamline workflows, enhance brand cohesion, and improve collaboration between designers and developers.





Challenge
  1. Inconsistent Design Practices:
    • Over 150 different colors and 37 different hues were used across the product, many of which were redundant.
    • Font sizes, spacing, and icons lacked uniformity, leading to a disjointed user experience.
  2. Disconnected Teams:
    • Developers did not have a central component library, and multiple development teams used inconsistent practices.
    • Designers were hindered by a lack of reusable components and cohesive guidelines.
  3. Limited Documentation:
    • There was no comprehensive documentation to align designs with development, creating further inefficiencies.

SolutionPhase 1: Audit and Research

  • Conducted a thorough audit of the website to identify mismatches between designs and code.
  • Collaborated with developers to uncover existing practices, revealing the use of Material UI and potential plans for a Storybook library.
  • Researched methodologies, including Atlassian and Airbnb’s design systems, and adopted the Atomic Design principles as the guiding framework.


Phase 2: Organizing Atoms

  • Colors:
    • Identified primary, secondary, tertiary, and neutral colors, reducing 150 colors to an organized palette of 4 categories with 100–900 shades.
    • Created Figma color styles to ensure reusability.
  • Typography:
    • Standardized font sizes and line heights using a research-based formula for readability.
    • Created reusable text styles for headings, body text, and captions.
  • Spacing & Icons:
    • Defined consistent spacing variables and transformed icons into Figma components with size and color variants.



Before
After

BeforeAfter

Before

After




Phase 3: Building Molecules and Organisms

  • Buttons:
    • Categorized buttons into primary (filled), secondary (outlined), and tertiary (link style) based on usage contexts.
    • Documented all button states (default, hover, disabled) and created Figma variants.
  • Other Molecules:
    • Designed input fields, checkboxes, and selectors using the atomic components.
  • Organisms:
    • Built complex components like date pickers by nesting molecules, ensuring scalability.







Phase 4: Collaboration and Implementation

  • Shared the system with developers, introducing it as the "source of truth" for design consistency.
  • Presented the system to new designers, streamlining their onboarding process.

 Results  
  1. Improved Efficiency:
    • Figma analytics showed a significant increase in reusable component usage and a decrease in detached instances, indicating high adoption among designers.
  2. Enhanced Consistency:
    • The streamlined color palette, typography, and spacing created a more cohesive and professional aesthetic, strengthening the brand identity.
  3. Positive Feedback:
    • A new designer reported that the system drastically improved their onboarding and productivity.
    • Developers acknowledged the system as a step toward better design-developer collaboration.



Learnings and OpportunitiesAs I was working towards standardizing our design outputs by offering a consistent design library, I was also sharing my progress and updates with the broader product and development teams. One day, over lunch I asked my front end developer how I could more easily find a place where they keep all of their component codes, so I could have a source of truth to continue building our design library. To my surprise, between 6 scrum teams there was no shared code library that the developers were using. We talked about how having somthing like Storybook would make our (and especially QA engineers’) lives so much easier.

This lunch conversation became the catalist to the new chapter of the scalable design system – the one that ventured out of the Figma file to become the shared language between design and engineering!

Next Steps:
  • Partner with developers to build and maintain a Storybook component library.
  • Establish a governance process for updating the design system and ensuring its scalability.
  • Define KPIs to track long-term impact, such as reduced design-developer handoff time and faster time-to-market for new features.







   Thank you.