Overview‍

Fuel Cycle’s design system plays a critical role in maintaining consistency, efficiency, and scalability across our SaaS platform. However, the initial iteration of the design system was disorganized, with all components, foundations, and other design assets confined to a single page within a Figma file that also housed unrelated projects. This cluttered setup made collaboration challenging and hindered efficient design workflows.

I spearheaded the initiative to transition the design system into a dedicated file, structured logically with clear guidelines and a modular approach. This new system significantly improved usability, organization, and scalability.

‍

‍Challenges

‍

‍The Solution: Dedicated Design System File

To address these challenges, I led the transition of the design system into its own file, with a clearly defined structure comprising individual pages for foundations, basic components, larger components, and the pattern library. This new organization allowed for streamlined navigation and a more modular design workflow.

‍

Steps Taken

1. Establishing a New Structure:
   The new file was divided into distinct pages:
   • Foundation: Typography, color styles, spacing, grids, and elevation.
   • Basic Components: Buttons, dropdowns, inputs, checkboxes, and more.
   • Large Components: Cards, modals, tables, and dashboards.
   • Pattern Library: Containers and reusable design patterns for specific use cases.
2. Documenting Guidelines:
   The updated design system included comprehensive documentation:
   • Visual Design Guidelines: Defining visual hierarchy, font size, capitalization, and spacing.
   • Interaction Design Guidelines: Specifying best practices for hover states, click interactions, and subheadings.
3. Centralizing Styles and Variables:
   Global text styles, color styles, and grid settings were standardized, enabling a consistent design language across the platform.
4. Streamlining Collaboration:
   The new design system facilitated smoother handoffs between design and development, thanks to clearer organization and detailed documentation.

‍

‍

‍

‍

Results

"Led the design and management of Fuel Cycle’s UI Design System, ensuring consistency and scalability across the SaaS research platform, reducing developer handoff time by 30%."

How We Measured the 30% Reduction:

‍We conducted pre- and post-implementation surveys with developers and designers, tracking the time spent locating and implementing components during handoffs. The results showed a significant decrease in time spent searching for assets and clarifying designs, thanks to the system’s improved structure, documentation, and reusable components. Additionally, collaboration tools like Figma’s built-in design libraries provided measurable efficiencies in workflows.

1. Enhanced Usability:
   Designers could easily locate components and guidelines, reducing design time and effort.
2. Improved Consistency:
   The standardized structure and documented guidelines ensured consistent application of design principles across the platform.
3. Scalability:
   The modular setup enabled the seamless addition of new components and patterns as the platform evolved.
4. Better Collaboration:
   The dedicated file and structured organization fostered smoother cross-functional teamwork, particularly with developers.

‍

‍

Conclusion‍

The transition of Fuel Cycle’s design system to a dedicated, well-organized file was a pivotal step toward achieving a consistent, scalable, and efficient design workflow. This rebuild not only improved the immediate usability of the system but also set a strong foundation for future growth and innovation. As you can see, the team was very happy!