MaaS / Edge Infrastructure

01

Project framing

A Metal-as-a-Service startup making AI infrastructure accessible to enterprises and cloud providers — without capital-intensive investments in physical servers.

Business Context

The platform was headed toward investor demos and early enterprise presentations — it needed to look and function like a production product, fast.

The startup's goal: make AI capabilities accessible and scalable without requiring clients to invest in physical servers or data centers — network-delivered, on-premise performance.

The Challenge

There was no design foundation. No component library, no token system, no established visual language. The engineering team was building in parallel — meaning design decisions made in week 1 would directly affect how fast the product could be built and how consistent it would look across features.

My Role

Sole UX/UI designer on the project — working across research, system design, wireframes, high-fidelity prototypes, and developer handoff. The design system and the dashboard had to happen simultaneously, in parallel with active engineering development.

Platform Context

Target clients: enterprises, municipalities, cloud providers — expert users managing AI infrastructure
Core use cases: resource monitoring, workload deployment, cost tracking, performance management
Dark and light mode support — hard requirement for data center and NOC environments
Security and compliance requirements for enterprise and government clients
Investor demo and early enterprise presentations as primary short-term milestones

02

No foundation, no time

Building a credible enterprise platform without a design system is building on sand — inconsistency accumulates, handoff breaks down, and every feature starts from scratch.

The engineering team was building in parallel — but without a design foundation, each feature risked developing its own visual language. Component inconsistency would accumulate into a product that looked unfinished, making it harder to demo credibly to investors or close early clients.

At the same time, the first dashboard — the product's primary value surface — needed to be designed, prototyped, and handed off quickly. There was no runway to build the system first and then start on the product. Both had to happen together.

"A design system isn't a deliverable — it's the foundation that makes all other deliverables consistent."

The Cascading Risk

Inconsistent UI would undermine credibility in investor and client demos
Engineering rework from unclear or inconsistent specs slows delivery on a tight timeline
Dark/light mode done ad hoc — not via tokens — creates fragile, hard-to-maintain UI code
Without reusable components, every new feature takes longer and looks slightly different

03

Understanding the domain

Research had to move fast — covering both the user and the competitive landscape before a single component was designed.

Discovery Phase

Stakeholder interviews with founders and product team — understanding business goals, target clients, and technical constraints
User persona development across enterprise, municipality, and cloud provider clients
Competitive analysis of MaaS and infrastructure management platforms
Technical constraint mapping with engineering — understanding what the API could surface and when

The Design System Decision

Research confirmed the system-first approach: using Shadcn as a structural base and tokenizing it fully meant the components were native to this product's needs from day one. Optimized for data-dense dashboards, dark/light switching, and enterprise accessibility standards.

Key Findings

Enterprise clients prioritized real-time visibility above all else — "is my infrastructure running?" before "how much does it cost?"
Dark mode was non-negotiable for infrastructure environments — data centers and NOCs operate in low-light settings
Competitor platforms were data-dense but visually unclear — differentiation opportunity in information hierarchy
Token-based architecture needed from day one — both themes always in sync, no ad hoc overrides

04

Strategic reframe

The fastest path to a credible product was to build the foundation right — not to skip it.

From

Design feature by feature, as fast as possible

To

Build a scalable design foundation first — then ship features that are consistent, accessible, and demo-ready from day one

→

Shadcn as foundation + full tokenization prevents inconsistency from accumulating as the product grows

→

Reusable components accelerate every feature that comes after the system is established

→

Investor and client demos benefit from a product that looks intentional — not assembled ad hoc

05

Design execution

Design system shipped in week 5. Dashboard shipped in week 8. Both delivered on a live engineering build.

01

Token-Based Design System

Built on Shadcn as a foundation — fully tokenized with semantic color roles, custom typography scale, spacing system, and extended component library. Dark and light modes live at the token level, not the component level — ensuring both themes are always in sync.

02

Dashboard — First Iteration

Designed and shipped the platform's first dashboard in 3 weeks — covering resource mapping, workload status, and core data views. Built on the system's component library from day one — no visual debt from the start.

03

Dark / Light — Seamless Switching

Both modes shipped simultaneously. Updating a semantic token updates both themes at once — eliminating the "we'll add dark mode later" pattern that creates technical debt.

04

Annotated Developer Handoff

Every component delivered with precise specs, token references, interaction states, and edge cases. Reduced back-and-forth with engineering and contributed to the 25% velocity improvement across the project.

06

Results & impact

Speed, consistency, and demo-readiness — delivered under startup constraints.

5 wks

Design System Built

Shadcn-based tokenized system — extended with custom color roles, typography scale, and components — with full dark/light support.

3 wks

Dashboard Shipped

First dashboard iteration including resource mapping and core data views — built on system components from day one.

Zero

Visual Debt at Launch

Building on the system from day one meant no inconsistencies to patch — every feature started from a shared foundation.

Platform used in industry demo presentations to potential investors and enterprise clients
Design system established as single source of truth for all subsequent feature development
Both dark and light modes shipped simultaneously — zero visual regression between themes
Shipped to internal production ahead of external fundraising milestones

07

Designing for AI readiness

Designing the interface for a platform that delivers AI — and what that means for how the design system itself is built.

01

Data-Dense Interfaces Need a System-Level Solution

AI infrastructure platforms surface vast amounts of real-time data. Without a design system that enforces hierarchy and density standards at the token level, data-dense UIs collapse into noise. The token architecture was designed specifically to handle high-information environments.

02

Tokens as the Foundation for AI-Generated UI

A well-structured token system is the prerequisite for AI-assisted design tooling. When every visual decision maps to a named token — not a hardcoded value — AI code generation, design-to-code tools, and future component suggestions can work reliably.

03

The Product Itself Is an AI Delivery Layer

The platform delivers AI capabilities as a service — meaning the UX needs to make complex, real-time AI infrastructure legible to enterprise operators. Translating technical complexity into clear, actionable interfaces is the core design challenge — and it only gets more important as AI infrastructure scales.

What I'd Build Next

Intelligent anomaly surfacing — AI flagging unusual resource patterns before they become incidents
Natural language query interface for resource monitoring — reducing reliance on complex filter UIs
Predictive cost modeling — surfacing projected usage costs before workloads are deployed

The best infrastructure UI makes complexity feel manageable — not impressive.

08

Reflection & key takeaways

When you build the foundation, you understand every decision that comes after it.

Speed without a system is technical debt in disguise.

Moving fast without a design foundation means every fast decision creates cleanup work later. The 5-week system investment paid back in every feature that followed — no inconsistencies to patch.

Tokens are a communication tool, not just a CSS pattern.

Naming tokens semantically — bg-surface, text-muted, border-subtle — creates a shared vocabulary between design and engineering. When the same language appears in Figma and in code, handoff becomes alignment instead of translation.

Dark mode done right is invisible.

The goal was never "we support dark mode" — it was that users would never notice they'd switched. When tokens handle the transition, both modes feel like the same product in different lighting.

Design for the demo and the product you need to grow.

Working pre-Series A means every design decision serves two audiences: the investor in the room today, and the enterprise client scaling the product next year. The system had to credibly serve both — and it did.

Design System First.Dashboard in Three Weeks.