Enterprise Design System Transformation

Unifying a fragmented product portfolio
into one consistent experience.

How a 20+ product enterprise portfolio, spanning different tech stacks, acquired platforms, and regional teams, was brought under a single design language, without slowing product delivery down.

RoleDesign System Lead
Scope20+ enterprise products
TimeframeModernization wave, 2023–24
2-minute read
Problem
Customers said every product "felt like a different company."
Approach
Built a shared design system, 65+ components, 264+ design tokens, not a one-off reskin.
Execution
Audited legacy UI across 20+ products, then modernized 5,000+ screens against the new standard.
Result
20+ products unified, 5,000+ screens modernized, faster delivery on everything after.

Fragmentation had four different root causes

Not a single bad decision, a portfolio that had grown in four directions at once, with no shared foundation pulling it back together.

01

Different tech stacks across product teams, each rendering UI its own way

02

Acquired platforms carrying 20–25 years of legacy design debt

03

Teams distributed across regions, each with informal, undocumented standards

04

No shared source of truth for interaction, accessibility, or visual patterns

Same tasks, rebuilt on a shared foundation

The pattern repeated across product types: teams solving the same problems independently, then converging on one shared foundation.

Operations dashboard
Legacy
01

Built independently by separate teams, each with its own patterns

02

No shared components; every dashboard solved layout from scratch

03

Accessibility fixes applied manually, release by release

Modernized
01

Rebuilt on shared Floret components, common across every dashboard

02

One consistent visual hierarchy instead of three competing conventions

03

Accessibility built into the component, inherited by default

Floor & table management
Legacy
01

Custom grid and status logic maintained separately per region

02

No shared color or status language; each team invented its own

03

Small changes required touching multiple codebases at once

Modernized
01

Shared status-token system used consistently across every region

02

One color-coding convention, understood the same way everywhere

03

A single component update propagates everywhere it's used

Kiosk & mobile
Legacy
01

Desktop patterns stretched onto small screens, not designed for them

02

No shared mobile component library to build from

03

Touch targets and spacing varied screen to screen

Modernized
01

28+ mobile-specific patterns, designed for small screens from the start

02

Touch targets meet accessibility minimums by default

03

Same visual language as desktop, adapted rather than shrunk

20+
Enterprise products unified
5,000+
Screens modernized
1.5–2x
Faster delivery after adoption
3
Regions aligned to one standard

A systems fix, not a visual refresh

Benchmark

Studied established systems, then diverged

Used Microsoft Fluent and Google Material as reference points for structure and rigor, then built a distinct visual identity suited to the enterprise's own products and users.

Audit

Mapped legacy UI across the full portfolio

Catalogued inconsistent navigation models, visual density, and duplicated interaction patterns for the same core tasks, making the fragmentation visible and prioritizable.

Codify

Centralized usability and accessibility once

Codified into 42+ reusable patterns and 65+ components, built centrally so no product team had to rediscover or reinterpret usability and accessibility rules on its own.

Scale

Rolled out product-by-product on shared foundations

Applied the system across floor operations, cage and credit management, table management, kiosks, and patron-facing mobile apps, each transformed using the same reusable foundation rather than a bespoke redesign.