← BACK TO HOME

Visual System

Freight UI

Updating a fragmented visual system to be AI ready.

Status: In DesignTimeline: 4 weeksRole: Design LeadershipTeam: Design team + frontend engineering
Freight UI hero

Modernize and standardize the component library so designers and engineers could build faster, with clearer patterns, stronger UI consistency, and a shared source of truth.

Freight UI focused on consolidating a fragmented component ecosystem split across Material UI patterns and multiple custom themes into a unified, scalable design system.

The product experience lacked cohesion because teams were shipping from competing component patterns and theme implementations, creating inconsistency and higher implementation overhead.

My Contribution

  • •Managed designers modernizing core UI components
  • •Defined standards to bridge Material UI and custom theme patterns
  • •Introduced Storybook documentation workflows for developer adoption
  • •Aligned implementation direction toward MCP-server-ready component architecture
Storybook component documentation showing the Button component with live controls
Key Highlight

MCP Ready

Designers, engineers, and AI agents all reference the same source of truth for component usage — eliminating ambiguity across every application. Developers can copy production-ready code directly from the tool and explore every available parameter. Each component maps 1:1 to its Figma counterpart, so there is never confusion about which component to use or what it should look like.

Process

Audit & Mapping

Cataloged component drift across Material UI and custom-themed implementations.

System Modernization

Led redesign and standardization of shared components with implementation constraints in mind.

Documentation

Rolled out Storybook docs (storybook.emergemarket.dev) including FUI component stories to improve dev handoff and usage consistency.

Key Features

Unified Component Standards

Core UI patterns were consolidated into a coherent cross-team component system.

Storybook-Driven Adoption

Design and engineering shared documented component behavior and usage guidance in Storybook.

Challenges & Solutions

Challenge

Fragmented implementation patterns made consistency difficult at scale.

Solution

Introduced shared component standards, documentation, and governance through Storybook.

Outcome

Improved UI cohesion and reduced ambiguity between design intent and engineering execution.

Results

  • •Reduced design/development ambiguity through documented reusable components.
  • •Improved consistency across surfaces previously split between Material UI and custom themes.
  • •Established groundwork for MCP-server-ready component operations.

Frontend

Material UICustom theming system

Backend

N/A

Tooling

FigmaStorybookDesign QA reviews

Gallery

Goal flag
Funnel
Target

Another Project

If you liked this case study, check out this related project next.

Product LeadershipProcureOS Pro→