Project Type

Product Design

Role

Sr. Product Designer

Skills

Figma, UX/UI, Branding, Design System

Chassis Design System: Building for Scalability

Project Overview

EBlock is an online dealer-to-dealer auction platform serving 15,000+ daily users. I led the development of the Chassis Design System, a comprehensive design framework to address critical inconsistencies threatening user experience and team productivity.

Before and After

The Problem

EBlock's rapid growth created fragmented design with inconsistent UI patterns across the platform:

Inconsistent Navigation: Key auction features like bidding controls appeared differently across timed auctions, live auctions, and inventory browsing, forcing users to relearn interactions

Visual Fragmentation: Buttons, forms, and data displays used different styling without systematic logic, creating an unprofessional appearance that could undermine trust in high-value transactions

Development Inefficiency: Teams were rebuilding similar components repeatedly, leading to code bloat and maintenance challenges

Project Constraints

This project operated under significant limitations:

Maximized research impact with limited resources through competitive benchmarking, internal user feedback, and analytics review

Managed parallel workstreams, delivering design system components while supporting active feature development

Collaborated with engineering on graceful migration paths, enabling system updates without affecting live dealer operations

Design Strategy

Atomic Design Framework

We adopted an atomic design structure to ensure flexibility and scalability.

Atoms: Standardized color palette, typography scale, spacing system, and icon library

Molecules: 15+ core components with 3-10 variations each, all WCAG 2.1 AA compliant

Organisms: Complex components like vehicle cards and auction control panels

Conservative Rollout

To minimize risk, I employed gradual implementation:

Maintained familiar user flows while improving visual consistency

Updated components during natural feature cycles

Ensured old and new patterns could coexist during transition

Examples of our color palette (including light and dark mode) and typography.

Process

Audit & Documentation
Catalogued existing patterns across 50+ screens, identifying 8 different button styles serving similar functions

Stakeholder Alignment
Conducted workshops with developers and established governance process for system evolution

Component Development
Created a comprehensive Figma library with detailed specifications and developer handoff annotations

Template Creation
Developed high-fidelity templates for critical pages, including timed auctions, live auctions, and run list

Examples of components from the design kit.

Example of our Timed Auction template for web and mobile.

Example of our Live Auction template for web and mobile.

Results

Cut Page Layout Costs by 60%
Reduced average design time from 2.5 days ($800) to 1 day ($320) using templated systems

Development Efficiency
Component reuse eliminated redundant code, reducing front-end development time

Visual Consistency
Achieved uniformity across 90% of user-facing screens

100% Adoption
All new feature development now uses design system components

Key Learnings

Working within constraints can drive innovation
The lack of formal user research forced reliance on established UX principles, creating a more universally usable system.

Developer partnership is critical
Early engineering collaboration ensured technical feasibility and drove higher adoption rates.

What I'd do differently
With additional resources, I would have conducted user interviews to validate design decisions and established metrics to measure user satisfaction.