Enterprise Design System: High-Density, Themeable, Scalable

Created tokenized, compact design system that reduced Average Handle Time (AHT) by 40 seconds and themeable SaaS platform that reduced enterprise development cycles by 40%.

Note: Because of the non-disclosure agreement, some of the information on this page has been replaced with fictitious ones or has been blurred out.

Team structure

Leading Systems Architecture across a cross-functional team.

Timeline: 4 Months
Tools: Figma (Tokens Studio), React, Jira

 

Problem : The Real Estate War

The Problem: The existing Corporate Design System was built for consumer “breathing room.” When I introduced the AI Agent Companion, the overlay hid critical customer data.

Problems: Long scroll and AI modules hide customer data

The Insight: Muscle Memory > Aesthetics

The Research: I shadowed 12 agents. I found that they don’t read the screen; they navigate by “Spatial Landmarks.”

User gaze heatmap shows how the agents use spatial landmarks on the existing UI.

Key Finding:

Every 10px of extra padding increases the “search time” for agents relying on muscle memory.

Call-center agents are …

Do not read, locate info from memory

They know exactly where to look for a detail

Highly trained

... to handle customer calls

Have very short time

because customer is on the call

I used JTBD framework for defining the mental model.


The Solution: Engineering a "Density Layer"

I didn’t just redesign pages; I built a Design Sub-System. I used Atomic Design and Design Tokens to create a toggleable density mode.

Impact: I built a ‘Compact Mode’ using design tokens. 

This packs more info onto the screen while keeping the brand look. This turned a single design into a flexible toolkit that can be used for any other company software.”

The “Compact” Token: Reduced $spacing-unit and $font-scale.
Atomic Library: Re-built 40+ components (buttons, tables, inputs) to be “Information First.”

Applying tokens: Building dropdown menu using Figma tokens.


Validation: Proving the Efficiency

I tested the high-density prototypes against the legacy “roomy” system.

The company saved 40 seconds per call by fitting all the necessary data onto one screen, resulting in millions of dollars in projected annual savings.

Business agreed to Option B for lower AHT and long-term customer retention.
Impact: Millions in projected annual operational savings for the the call center.


New, AI-embedded dsign

The “Compact Theme” in action
Tokenized to reduce development time, enabling SaaS and getting a home for the AI Companion.

User gaze heatmap: I tracked where agents look (the colorful map on the right) to validate that the new layout works.
Because everything is in one place, agents can help customers much faster (saving 40 seconds per call) while the AI handles the complex thinking in the background.

The final design: More information, less searching, and built-in AI help.


Strategy: Internal SaaS Model

I proved that by ‘subscribing’ to our system, other departments could skip the design phase entirely, saving them months of work.

I proposed to stakeholders that this wasn’t just a “fix”. It was a Scalable Platform.

I pitched this system as a ready-to-use kit for all enterprise software.

It fixed outdated designs across different departments and cut the time needed to build new features by 40%.


Designing for Intelligence: The Foundation of AI Companion

Summary

  • Saved 40 seconds per call: By fitting all critical data onto a single screen, agents found information faster, resulting in millions of dollars in projected annual savings.
  • Built a permanent home for AI: The new compact layout eliminated the “real estate war,” allowing the AI Companion to provide real-time help without covering up important customer details.
  • Engineered a Multi-Tenant Standard: This design was adopted as the “Enterprise Engine,” a master template that helps other departments build new tools 40% faster.