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.
2. Building Fusion DS
DESIGN SYSTEM BUILDING BLOCKS
Fusion is more than just typography and icons; it encompasses various components across design, engineering, and product. Each element plays a crucial role in creating a successful design system—without any of these building blocks, the system wouldn't be complete.
1
Grab n Go Design Tokens & Components
2
Optimizing Figma for
Cross-Team Collaboration
3
Accelerating Front-End Dev
with Storybook
4
Accessibility and Best Practices
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
The main challenge was balancing design standards with technical constraints. Since a full overhaul wasn’t feasible, design and engineering collaborated to create user-friendly, compatible components.
Educating the Company
Once the design system was in place, we focused on advocacy and adoption. To familiarize teams with its benefits, we presented at all-hands meetings and hosted joint office hours, helping the product team integrate it seamlessly into their workflows.
3. Delivering Fusion DS
FINAL DELIVERABLES
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.
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.
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.
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.
