← BACK TO HOME

Visual System

Freight UI

Updating a fragmented visual system to be AI ready.

Status

In Design

Timeline

4 weeks

Role

Design Leadership

Team

Design team + frontend engineering

Overview

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

Problem

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

Goal

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.

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

Next Steps

  • •Expand Storybook coverage across remaining legacy components.
  • •Add quantified delivery metrics (velocity, defects, adoption).
  • •Formalize MCP-server integration patterns for component delivery.

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.

Tech Stack

Frontend

Material UICustom theming system

Backend

N/A

Tooling

FigmaStorybookDesign QA reviews