Fusion Design System
The Fusion Design System was created to unify front-end efforts across all scrum teams, addressing inconsistencies caused by isolated workflows. Previously, lack of design guidelines led developers to make ad-hoc changes, resulting in fragmented UI and slow development.
Since implementing Fusion, our development cycle has shortened by 25%, and UI consistency has improved by 40%, streamlining processes and ensuring cohesive user experiences across our platform.
Team: 15 Engineers, 3 Designers
Role: UX Designer
Tools: Figma, Jira, Confluence, Storybook
Date: Aug 2023 - Oct 2024
1. Beginning of Fusion DS
PROBLEM STATEMENT
“The lack of a design system led to inconsistency in production, as roadmap priorities outweighed UI consistency. This caused developers to improvise components and bypass the design handoff process."
DESIGN SYSTEM VALUE PROPOSITION
To enhance our product, the design team initiated groundwork on a scalable design system for Hudson MX. We outlined the value proposition, detailing how the system would drive consistency, efficiency, and scalability, and presented it to management to secure resources for the initiative.
Below is the vision for the design system we aimed to create:
2. Building Fusion DS
BUILDING THE DESIGN SYSTEM
During this phase, multiple design iterations were shared among team members and key internal stakeholders, including product managers and engineers. Involving these individuals early in the design process enabled us to implement quick changes and updates as needed, ultimately reducing the overall design hours and streamlining the development cycle.
1
Creating Grab & Go Components for Designers
We built a Figma master library with drag-and-drop components, including pseudo-classes, variants, and configurations. This enabled designers to quickly iterate without recreating components, significantly speeding up the mockup process.
2
Optimizing Figma for Cross-Team Collaboration
To ensure accessibility and ease of implementation, we created a "Developer Spec Figma File"—a simplified version of the design library. It included full CSS properties for each component, providing clear guidelines for developers even with limited access to Figma, thus overcoming budget constraints.
3
Accelerating Front-End Development with Storybook
We implemented Storybook to centralize UI components, allowing developers to easily copy, paste, and configure them for different states (e.g. error, success, edge cases, etc.). These flexible components were tailored to meet specific system needs, streamlining the development of features and hotfixes.
4
Increasing Accessibility and Best Practices through Documentation
We created comprehensive documentation to guide internal teams on component usage, accessibility standards, and best practices. This included live Figma frames, "do’s and don’ts," usage summaries, and keyboard shortcut guides, ensuring accessibility compliance and promoting best practices across the company.
DESIGN SYSTEM CHALLENGES
Although the engineering and design teams were used to collaborating with each other, building a design system from scratch introduced unique challenges we hadn’t faced in previous projects.
Balancing Constraints
One of the biggest challenges in building Hudson MX’s first design system was balancing design standards with the technical constraints of the existing system. While the design team aimed to create the most user-friendly components, overhauling the entire system wasn’t feasible. To resolve this, the engineering and design teams closely collaborated on each component, ensuring designs were compatible with the existing system and tested across various environments to ensure proper functionality of pre-defined components.
Educating the Company
With a functional design system in place, we focused on raising awareness and advocating its benefits across the company. Recognizing that many colleagues were unfamiliar with design systems, the engineering and design teams collaborated to showcase our work at all-hands meetings. We also hosted regular joint office hours to guide the product team in seamlessly integrating the design system into their daily workflows.
3. Fusion DS In Real Life
FINAL DESIGN SYSTEM
Each final design demo highlights the challenges identified in the heuristic evaluation, illustrating the user experience with the revamped Billing Profile design.
Final Deliverable #1: Master Design Library
We implemented a Figma master library with reusable, drag-and-drop components, enabling designers to quickly build high-fidelity mockups and component variations, significantly reducing time spent on iterations.
Final Deliverable #2: Dev Spec Library
We Created a Developer Spec Figma file containing full CSS properties for each component, ensuring efficient implementation even with limited Figma access. Having a dedicated developer spec Figma file allowed streamlined collaboration with engineers.
Final Deliverable #3: Storybook
With components fully configured in Storybook, developers can easily create them in various states, speeding up front-end development and hotfixes. We also added an accessibility add-on that automatically checks each component for WCAG AA compliance, ensuring standards are met with a clear pass/fail indicator.
Final Deliverable #4: Accessibility & Best Practices
We created detailed documentation with accessibility guidelines, live Figma embeds, and concise component usage summaries. This ensured seamless compliance with standards while empowering teams to adopt best practices effortlessly.
IMPACTS
The Fusion Design System launched in early 2024, with the design and engineering teams collaborating to maintain, improve, and expand its components. As these pre-defined components were integrated into design projects, they delivered several positive impacts, enhancing consistency, efficiency, and scalability across workflows.
TAKEAWAYS
Takeaway #1:
Early investment in time and effort to deliver long-term benefit for stakeholders
Takeaway #2:
Success relies on strong collaboration between cross-functional teams
Takeaway #3:
Communicate the design system's value to encourage consistent use
Takeaway #4:
Treat the system as a living project - evolve with user needs and feedback
