Scaling KITS with a design system built for speed and consistency

Role: Product Designer
With: PM, Chief Technology Officer, Dev
Tools: Figma, FigJam, Claude, Google Gemini

Overview

KITS didn’t have a design system when I joined.

Design decisions were being made page by page, which worked early on but started to break as we scaled, especially with an increasing number of campaign landing pages.

I started with a lightweight foundation (colour, type, components) to bring consistency across product and marketing surfaces. Six months in, it became clear that the approach wouldn’t scale with a lean team.

So I shifted direction: instead of building everything from scratch, I adopted a third-party system and rebuilt it to fit KITS.

Impact

Used across 100% of new product projects

• Reduced repeated UI decisions by standardizing components and patterns across product surfaces

• Increased consistency across core ecommerce experiences (discovery, engagement, purchase)

• Reduced design–engineering back-and-forth during implementation

• Enabled faster iteration by reusing established layouts instead of redesigning from scratch.

The problem

As we scaled, a few issues kept repeating:

• UI patterns were inconsistent across product and campaign pages

• Designers were recreating the same components

• Engineering lacked a clear, shared source of truth

• The system wasn’t structured enough to support fast decisions

At the same time, we had just rolled out a new brand — which made consistency more critical.

The shift

Expanding a fully custom system didn’t make sense for our team size.

I proposed using a third-party system as a base, then adapting it to KITS.

The goal:

• move faster

• reduce repeated work

• keep control over brand and product experience

Engineering aligned early — it simplified implementation and reduced overhead.

What I did

I used a third-party system as the foundation, then rebuilt it into a system that works for KITS.

Built a scalable token structure
Expanded beyond basic styles into a more usable system of tokens so design decisions could be applied consistently across product surfaces.

Adapted the system to KITS

• Replaced typography

• Reworked the colour system and grayscale to follow Brand book

• Defined button hierarchy and brand usage

Filled product-specific gaps
Designed patterns not covered by the base system:

• navigation

• Product cards

• KITS icon components

• Social-proof badge

Audited and improved system structure
Reviewed how the system was being used across real pages to identify gaps in structure and consistency.

• Primitives were well-defined, but usage was inconsistent

• Components often referenced raw values instead of reusable tokens

• Component-level structure was limited

This informed the next phase of work — moving toward clearer token hierarchy and more scalable component definitions.

Improved accessibility and consistency
Ran contrast checks across key colour pairings and identified areas that needed adjustment to meet accessibility standards.

Expanded beyond components into patterns
Identified that while atomic components were defined, there was no shared structure for common layouts.

Defined reusable patterns for:

• product cards

• navigation

• hero sections

• footer structures

This reduced layout inconsistencies and gave designers a clearer starting point for building pages.

Scaled intentionally
Adopted new components selectively and aligned them to the system to avoid duplication and drift.

Adoption

The system is now part of how the team ships.

• Used across the core journey from discovery, engagement, to purchase, and campaign landing pages.

• Shared foundation for design and engineering

• Default starting point for new pages and features

Instead of recreating UI patterns, the team reuses established ones, making it easier to scale output without redesigning each time.

What’s next

The system is evolving alongside the business.

Based on recent audits, I’m focusing on strengthening the system architecture, moving toward clearer token structure and more scalable patterns, while adapting to upcoming brand updates.

I’m also expanding beyond components into larger patterns and templates (e.g. account dashboard, section-level layouts) so the system can support more complex product surfaces.

Reflection

The most important decision wasn’t what to design, it was what not to.

Using a third-party system gave us leverage.
The value came from adapting it to fit the product, not rebuilding everything ourselves.