REVVING UP THE RESEARCH ENGINE
FUEL CYCLE
INTRO
Research Engine was the new design system for Fuel Cycle's rebrand. But, it was simply a Figma file with components and little documentation.
It was time to take the design system to the next level. A more powerful tool that served both designers and developers.
Due to the confidentiality agreement with Fuel Cycle, this case study showcases the overall design process without disclosing sensitive information.
AUDIT
Inspecting the Vehicle
The design system was used by developers, but the components in the design system were poorly built. It was vital that some components be redesigned to make them more understandable to developers.
Furthermore, the design system lacked efficient documentation. Designers often found themselves confused as to how to use a component, leading to inconsistency across design files.
DESIGN
Rebuilding the Parts
While redesigning the components on Figma, the following guidelines helped to ensure that the design system served both designers and developers.
For Designers: Variants
Components should offer designers flexibility and versatility. Maximizing the use of component variants and properties.
For Developers: Auto-Layout
Components should mimic HTML, the language of developers. With the help of Figma's auto-layout to ensure they can use Dev Mode to the fullest.
DOCUMENTATION
Writing Up the Paperwork
Each component was accompanied by documentation featuring three sections to provide clarity and organization that the original design system lacked.
Overview
Featuring component usage cases and the official component that designers use.
Visual Design Guidelines
The anatomy, measurements, variants, and visual rules of a component.
Interaction Design Guidelines
Component behaviors and important step-by-step user interactions.
ORGANIZATION
Assembling the Engine
The design system was restructured by the following categories to provide better organization of Fuel Cycle's 40+ elements.
Style Guide
Basic design principles that guide all Fuel Cycle designs and pages.
Components
Building blocks that are used in various contexts, even recognized in other products.
Patterns
Structures that are composed of multiple components and unique to Fuel Cycle.
Templates
Layouts of pages that designers can start their designs with.
RESULTS
New Design System Culture
The revamped design system fostered consistency and efficiency across the design and development teams, making it easier and quicker to create new products.
Furthermore, the design system also encouraged the design team to record new components and patterns, providing a reliable space where anyone can access a design element and learn to use it in their own designs.
REFLECTION
Research Engine Performance
The Living Document
There really is no end to a design system. As the product changes, so does the design system.
Communication
The design system serves as a point of quick, easy contact between designers and developers.
The Source of Truth
People work faster because the design system is a reference whenever there is a question.