Work
2023
Viamo Design Systen
In-House
The need for a design system at Viamo had been recognised since 2018. Several attempts had been made, but none had shipped. When I took it on, I started with a product audit, surveyed the team, and built a formal proposal covering governance, scope, goals, and a roadmap — the foundation that previous attempts had lacked.
From there I led the design and implementation end to end: foundations, components, Figma library architecture, processes, and documentation. The system shipped, and the team stopped rebuilding basics from scratch — velocity increased, UI consistency improved across the platform, and the friction between design and engineering started to ease.
Role
Product Design
Context
Viamo's product had years of accumulated inconsistency. Every designer and engineer was building elements from scratch for each feature, which meant the same patterns were being designed and coded differently across crews. The result was a fragmented UI, slower shipping, and collaboration friction between design and engineering.
Getting it off the ground
I audited the full product — screenshotting and cataloguing every element, mapping inconsistencies, and estimating effort per component. That data became the backbone of a proposal I put together covering governance models, scope for version one, goals and principles, and a prioritised roadmap. Getting buy-in was the hardest part of the entire project. Previous attempts hadn't had this kind of structured backing, and I believe that's a large part of why they didn't make it through.
Building the system
Foundations came first: color palettes, type scales, spacing, grids, and iconography. Some were styles, others variables, some components. A Tailwind configuration was built based on these foundations. For typography, I tested four typefaces against the defaults and landed on Inter for its legibility and similarity to the existing Open Sans, minimising the transition. For iconography, I upgraded from Font Awesome's solid-only free set to the light variation.
Components were architected for consistency and usability — naming conventions, limited nesting, and short documentation in Figma so designers could understand and use them without hand-holding. The Figma library was structured so global files loaded automatically while crew-specific and experimental files required manual activation. I also defined the release and contribution processes to keep the system maintainable beyond my involvement.
During this period, I was simultaneously shipping the Digital Training app — a first-party product within the Viamo Cloud ecosystem. The overlap was deliberate: building both in parallel meant the design system was being stress-tested against real product work from day one.
Impact
Designers and engineers stopped building from scratch. Shipping velocity increased. UI consistency improved across the platform, which in turn improved usability for users. Collaboration between design and engineering became smoother — the system gave both sides a shared language and a shared starting point.
What I'd do differently
If I could do it again, I'd skip the formal buy-in process entirely. I'd find an engineer who was interested, ship a few components into a real product, and let the results make the case. The proposal and governance work was necessary in Viamo's context, but I've come to believe that showing beats asking — especially for something teams have been talking about for years without shipping.
