Case Study

Ohme

Design Systems, AI Governance & B2B Product Leadership

Role Senior Product Designer — B2B Design Lead
Duration 2 years (2024–present)
Scope 6 products, 2 squads, design system ownership

Context

Ohme builds smart EV chargers and the software ecosystem around them. I lead design across the B2B side of the business — the products that span the purchase and fulfilment lifecycle, from initial sale through to installation, ongoing management, and customer self-service.

This means designing across six products simultaneously — each at a different maturity stage, serving different users, with different complexity levels.

4 greenfield products

Built from zero — information architecture, interaction design, and component systems defined before a line of code existed.

2 legacy rebuilds

Migrating established products into the governed design language while maintaining continuity for existing users.

B2B design system

The shared infrastructure governing all portal products — the system that makes 6 products sustainable for one designer.

The surface area

Scheduling, finance automation, charger management, user self-service, partner workflows, team administration.

The Problem

When I joined, each product was designed independently. Components were rebuilt per-project. Colours were hardcoded. Spacing was eyeballed. No shared language between design and engineering, and no mechanism to prevent drift as the surface area grew.

1
Inconsistency

The same pattern looked different across products, undermining user trust

2
Slowness

Every new feature required rebuilding primitives that should already exist

3
Fragility

Design decisions weren't documented, so they couldn't be questioned, validated, or evolved

What I Built

A governed design system — not just a component library. Specifications go in, validated output comes out. If it doesn't comply, it doesn't ship.

Token Architecture (3 tiers)

Tier 1 — Primitives Raw values (colours, spacing, type ramp)
Tier 2 — Semantic Named decisions ("content/primary" not hex)
Tier 3 — Component Scoped bindings ("button/primary/surface")

~291 tokens across 9 generated SCSS files, synchronised between Figma and code via an automated pipeline.

Component Governance

Every component defined by a YAML specification before it exists as code or Figma frames. The spec defines allowed props, consumed tokens, anatomy, accessibility requirements, and forbidden patterns.

Validation Pipeline

Before anything is generated, the spec runs through automated validation: schema conformance, token reference validity, cross-file consistency, accessibility completeness, forbidden pattern detection. If validation fails, generation is blocked.

The AI Layer

Six months in, I realised the real leverage wasn't in the components — it was in the constraints. A well-governed design system is essentially a set of rules that an AI can follow.

What the AI does

  • Generates components from validated specs
  • Produces HTML prototypes using the token system
  • Builds Figma frames with variable-bound fills
  • Runs discovery sessions using structured frameworks
  • Generates engineering handoff artefacts

What governance prevents

  • Inventing props not in the spec
  • Using colours not in the token system
  • Skipping accessibility requirements
  • Generating output that fails validation

Scale of Remediation

0 Component sets governed
0 Hardcoded fills bound to variables
0 Text nodes migrated
0 Variable mutations (single pass)

Product Design

The system work enables velocity on the product work. A feature that previously required multiple rounds of "what token is this?" revision now flows from discovery to handoff with zero governance-related revisions.

Discovery Spec Validate Prototype Handoff

Figma Architecture

A two-file architecture separating concerns:

Token System

Defines all variables (T1/T2/T3). Published as a library.

Component System

Contains component designs. Consumes tokens via library link. Zero local variables.

Tokens evolve independently of components. The library link creates a contractual relationship: components must accept token updates explicitly.

What This Demonstrates

  • Founding-designer scale — sole designer across 6 products for 2 years, building the system that makes this sustainable without scaling the team proportionally
  • Zero governance-related revisions — eliminated an entire category of engineering back-and-forth, saving approximately 2-3 hours per feature cycle in revision time
  • Built to hand off — documentation, validation, and generation all function without my involvement. The next designer inherits a working system, not tribal knowledge
  • Co-owned product direction — presenting roadmap concepts to C-suite, co-defining quarterly priorities with product leadership, not just executing briefs

Where This Is Going

The system is designed to outlive my involvement. Documentation, validation, and generation all function independently — a new designer or engineer can ship governed output on their first week without asking me. The onboarding materials, spec templates, and automated checks mean the next hire inherits a working system, not tribal knowledge.

The next frontier: AI-generated insights feeding back into specifications — where usage patterns inform which components need to exist, which tokens are underused, and where the system has gaps. A design system that doesn't just prevent errors — it actively suggests the right path.

Try switching the design tokens