Kenzz design system cover showing the system foundations in Figma
  • Design System
  • Accessibility
  • 0 → 1
  • Tokens

Kenzz Design System

Building Kenzz’s first cross-platform design system to align design and engineering, reduce design debt, and create a scalable source of truth for web, app, and internal tools.

Role Product Designer
Team Product & Engineering
Platform App & Website

Overview

Project in a nutshell: a frustrated designer with no centralized source of truth (scattered files, inconsistent UI, repeated work, error-prone handoffs), plus a Design System Foundation, plus Cross-Functional Alignment, equals a confident designer with scalable growth and no quality loss (faster delivery, fewer errors, consistent experience).

Kenzz’s first design system unified the product’s visual language across the web, app, marketing site, and internal tools. What started as fragmented UI and inconsistent handoff became a shared operational foundation. That helped the team:

  • Prototype faster
  • Reduce implementation friction
  • Scale the design team with more consistency and less rework.

The challenge

Cart and Kenzz Wallet screens compared side by side — consistent versions marked with a check, inconsistent versions marked with a cross

Before the design system, Kenzz faced growing pains of a fast-scaling startup with no centralized design source of truth.

The inconsistency created a slow, error-prone workflow and risked the product’s evolving brand identity. The core problem was that speed and product cohesion were being bottlenecked by foundational design debt.

why?

Lack of Component Reusability

Core UI elements like buttons, inputs, and typography were repeatedly recreated.

Ambiguous Handoff Process

Engineers had to guess specifications or pixel-check screens during handoff.

Accumulating Design Debt

New features introduced more inconsistency instead of building on reusable foundations.

Unscalable Design Operations

Scaling the design team risked multiplying inconsistency rather than reducing it.

Process

Process overview

I'm heavily influenced by the design thinking approach,

  • I start from the root cause
  • I secure buy-in before I build anything
  • I document the process and the outcome
  • I ship and test results
Design system foundations and components in Figma Design system screens and component organization in Figma Design system tokens and patterns in Figma
01

Securing Buy-In

Led a business case to the product and engineering teams, framing the system as critical infrastructure for speed and accessibility, without slowing teams down.

02

Building Foundations

Audited 60+ screens to define core tokens (typography, color, buttons, inputs), creating a strong foundation for faster, consistent delivery.

03

Creating Primitives

Expanded the system into reusable primitives (icons, forms, feedback) using auto layout and variants for scalability.

04

Documenting for Adoption

Built a centralized Notion hub with specs and Dev Mode links, enabling seamless adoption within existing workflows.

05

Establishing Governance

Established a governance rule to extend or add components before handoff, ensuring the system evolved alongside shipped features.

Solution

Delivered phase 1 of the design system — establishing a centralized, reusable foundation that aligned design and engineering on shared tokens, components, and standards.

Tokens

Defined core tokens (typography, color, UI patterns, etc.).

Components

Built reusable components (buttons, inputs, icons, forms).

Primitives

Created scalable primitives with auto layout & variants.

Documentation

Documented the system in Notion for adoption and maintenance.

Impact

The implementation of Kenzz’s design system transformed the product development workflow from fragmented to streamlined.

Speed

Enabled designers to build high-fidelity, consistent mockups in hours instead of days using a shared library.

Lower Development Cost

Eliminated pixel-checking and guesswork; Figma Dev Mode mapping reduced handoff errors and rework.

Visual Consistency

Unified web, app, and internal tools under one cohesive design language, increasing the end user’s trust.

Scalability & Adoption

Evolved into a systemized product, enabling teams to scale features and headcount without sacrificing quality or speed.

Learnings

This project demonstrated that a design system’s greatest value is operational, not just visual. Its real impact came from reducing friction between design and engineering, improving consistency at scale, and making product teams faster without adding process overhead.

It also reinforced an important lesson: in a startup environment, a design system does not need to start perfect. It needs to start useful. By focusing on the most reused foundations first and establishing a lightweight governance model, I was able to create a system that supported speed today while staying flexible enough to evolve tomorrow.

Let’s make something great.

Open to product design roles and thoughtful collaborations.