Smokeball
Redefined Smokeball’s desktop product as a browser-based SaaS offering for solo and micro firms in the US. Simplified a complex experience while establishing core design foundations under tight constraints.
Problem
To support a major US growth initiative targeting solo and micro firms, Smokeball needed to evolve from a productivity-rich, desktop-first product—built around Microsoft Office document automation and a traditional sales-led growth model—into a competitive browser-based SaaS offering aligned to product-led growth.
Smokeball needed to simplify a complex, desktop-first product into a compelling browser-based SaaS experience for solo and micro firms, despite missing core capabilities and no existing design system.
Key Challenges
Simplifying a complex desktop product for the web without losing capability.
Designing new PLG flows (sign-up, subscription, upsell).
Delivering impact within a three-month timeline.
Aligning ways of working across Product and Engineering.
Establishing a design system in parallel across design, engineering, and QA.
Approach
Partnered with Product, Engineering, CX, and SMEs to define the initial web SaaS offering, using competitor analysis, customer insight, and business priorities to align on which desktop features would translate to the browser experience.
Applied a double diamond approach across key screens—diverging to explore multiple interaction and layout options, then converging on simple, effective solutions that balanced usability with capability.
Worked closely with Engineering, CX, and QA throughout delivery to ensure designs were feasible, validated, and implemented to a high standard.
In parallel, led a focused UI refresh in collaboration with Brand and Marketing—improving navigation, layout, typography, colour, and visual hierarchy—while establishing Smokeball’s first design system to support consistency, speed, and future scale.
My Role
Owned | Led | Contributed to |
|---|---|---|
End-to-end visual and UI design direction, including navigation, layout, typography, colour, and visual hierarchy, as well as the establishment of foundational design system elements. | Hands-on design execution of key screens and patterns, while aligning Product, Engineering, and Marketing on scope, priorities, and delivery within tight timelines. | Design system foundations, front-end implementation approach, and evolving standards for a more consistent and scalable product experience. |
Outcomes
The refreshed experience improved first impressions and reduced perceived complexity for new users, supporting acquisition efforts in a competitive freemium market. Internally, the introduction of a design system created a shared visual and interaction language—improving consistency, reducing design and engineering friction, and enabling faster, more scalable product delivery.
Before UI Refresh
After UI Refresh
