Smokeball Design System V1.0.0
Smokeball
stablished a scalable design system to improve consistency, speed, and product quality while accelerating product delivery.
The Problem
As Smokeball scaled, the product experience had grown without a shared design system, resulting in inconsistent UI patterns and increasing fragmentation across the platform.
UI decisions were typically defined by Product Owners with input from Engineering, executives, and other stakeholders—leading to inconsistencies across product domains and no clear path to evolve the overall product experience.
Previous attempts to introduce design capability had not gained traction, leaving no shared foundation for how the product should be designed or built.
Key Challenges
Introducing a design system within an active product while continuing to ship.
Redefining UI ownership and building trust in Design as a new capability.
Shifting from one-off solutions to reusable components.
Aligning design and engineering through parallel development and versioning.
Balancing adoption, delivery, and system maturity.
Strategy
I led the introduction of Smokeball’s first design system, defining a scalable foundation of tokens, components, and interaction patterns. We prioritised high-impact, reusable UI elements and embedded the system into day-to-day product development o ensure alignment between design and implementation. The system was introduced incrementally, supporting active product work while establishing longer-term standards.
My Role
Owned | Led | Contributed to |
|---|---|---|
Design system vision, foundations (tokens, components, patterns), and integration into product development. | Cross-functional alignment, component prioritisation, and adoption across teams. | Component designs, engineering implementation and adoption strategy, and team capability uplift. |
Outcomes
The design system created a shared visual and interaction language across teams, improving product consistency and reducing design and engineering friction. It enabled faster, more efficient delivery, supported ongoing UI modernisation, and provided a scalable foundation for future product development including AI-enabled experiences.
Design System Maturity
Before
Fragmented UI, no shared standards, duplicated effort, weak design–engineering alignment
After
Scalable design system, consistent experience, reusable components, improved delivery speed and alignment
The Problem
As Smokeball scaled, the product experience had grown without a shared design system, resulting in inconsistent UI patterns and increasing fragmentation across the platform.
UI decisions were typically defined by Product Owners with input from Engineering, executives, and other stakeholders—leading to inconsistencies across product domains and no clear path to evolve the overall product experience.
Previous attempts to introduce design capability had not gained traction, leaving no shared foundation for how the product should be designed or built.
Key Challenges
Introducing a design system within an active product while continuing to ship.
Redefining UI ownership and building trust in Design as a new capability.
Shifting from one-off solutions to reusable components.
Aligning design and engineering through parallel development and versioning.
Balancing adoption, delivery, and system maturity.
Strategy
I led the introduction of Smokeball’s first design system, defining a scalable foundation of tokens, components, and interaction patterns. We prioritised high-impact, reusable UI elements and embedded the system into day-to-day product development o ensure alignment between design and implementation. The system was introduced incrementally, supporting active product work while establishing longer-term standards.
My Role
Owned | Led | Contributed to |
|---|---|---|
Design system vision, foundations (tokens, components, patterns), and integration into product development. | Cross-functional alignment, component prioritisation, and adoption across teams. | Component designs, engineering implementation and adoption strategy, and team capability uplift. |
Outcomes
The design system created a shared visual and interaction language across teams, improving product consistency and reducing design and engineering friction. It enabled faster, more efficient delivery, supported ongoing UI modernisation, and provided a scalable foundation for future product development including AI-enabled experiences.
Design System Maturity
Before
Fragmented UI, no shared standards, duplicated effort, weak design–engineering alignment
After
Scalable design system, consistent experience, reusable components, improved delivery speed and alignment
stablished a scalable design system to improve consistency, speed, and product quality while accelerating product delivery.
Smokeball Design System V1.0.0
Smokeball