Empuls by Xoxoday
Flame - Design System
Building a scalable design system for Empuls - establishing shared design foundations, a modular component library, and cross-functional documentation to unify a growing B2B SaaS product.
Industry
Software as a Service (B2B SaaS)
Average Revenue
$700M (2024)
Total Customers
72K+
Average Page Visits
1.5M / Month
When Growth Outpaced Consistency
Background
Empuls, a B2B SaaS employee engagement platform, had grown rapidly - and so had the inconsistencies in its product UI. I led the initiative to create Flame, a comprehensive design system built from the ground up to address the scaling challenges, ensure platform consistency, and standardize components for developers and designers alike.
The Challenge
As the product scaled, inconsistent UI elements had accumulated across features. Developers were spending extended time interpreting design intent, iteration cycles were slow, and maintaining a cohesive user experience across the platform had become increasingly difficult.
Goal
Create a scalable, living design system to unify the Empuls UI - providing a single source of truth for design decisions, reducing friction in the design-to-development handoff, and accelerating the pace of new feature delivery.
Scroll For More
A Systematic Five-Step Approach
Rather than patching existing inconsistencies, I structured the work into five distinct phases - each building on the last - to ensure the system had strong foundations before expanding into components and documentation.
Measurable Impact
90%
Increase in design consistency
40%
Reduction in design-to- development handoff time
30%
Acceleration in new feature development
Cross-functional Adoption
Adoption was driven through structured onboarding sessions and embedded usage in active sprints. Rather than releasing the system as a standalone artifact, we integrated it into the team's existing workflow - making Flame the path of least resistance for both designers and developers.
Storybook Implementation
To bridge the gap between design and code, I worked alongside the front-end team to implement the component library in Storybook - creating an interactive, always-current reference that replaced static documentation. Engineers could explore component states, props, and accessibility behavior directly in the environment where they built.
What the System Taught Us
Communication is continuous
Regular design-development syncs caught misalignments early - eliminating costly re-work late in the cycle. The system only stayed relevant because both sides had a voice in shaping it.
Iterative refinement beats perfection
Shipping an imperfect version 1 and refining through use proved far more valuable than waiting for a complete system. Real usage surfaced edge cases no audit could predict.
Documentation is the product
A component without clear usage guidance is a component that gets misused. Treating documentation as a first-class deliverable - not an afterthought - determined whether the system was actually adopted.
Systems must flex
The most valuable design systems accommodate variation without breaking coherence. Building for flexibility from the start prevented the system from becoming a constraint as the product evolved.
Let's WorkTogether
I'm open to new opportunities, collaborations, or just a good conversation.