Hello Please Wait =)Hello

XClaim Design System

2020

Design Systems, UI/UX Design

XClaim

( Project Goals ) XClaim is a claims marketplace and brokerage platform. It has helped more than 10,000 claim holders liquidate nearly $1 billion in claims, and it gives individual and institutional participants an open, transparent, and fair trading experience.

I was the sole designer on the product. In September 2020 I led a full redesign of its design system, rebuilding it into a scalable foundation that could keep pace with a fast-growing feature set and a fast-growing engineering team.

( Research & Planning )

Before touching a single component, I audited the system across four lenses: foundational gaps, product needs, engineering needs, and where the real opportunity was. With the gaps mapped, I rebuilt from the atomic level up and applied the system to the Member Homepage, Claim Details, and Case Page. I documented logos, color, icons, and typography in Notion.

  • Foundational gaps: type ramp, grid, component states, icon set, and missing atoms
  • Product needs: the ability to spin up new ideas on existing flows quickly
  • Engineering needs: spacing, type ramp, flexible buttons, and one documented view
  • Opportunity: an 8pt grid, a rule-of-thirds type scale, and native Figma variants
  • Centralize the Figma file and stand up company-wide system docs

( Challenges )

As the only designer on XClaim, I needed the design system to serve every function at once. It had to be a single source of truth for engineering, a fast lane for new feature work, and flexible enough to absorb constant product change without falling apart.The existing system wasn't built for that. I needed a system that let me move fast alone and stayed legible enough for 15 engineers to build against without me in the room.

  • ( 001 )
    Ownership churn from multiple designers over time
  • ( 002 )
    Drift between Figma and what actually shipped
  • ( 003 )
    A widening product vision and feature set
  • ( 004 )
    One designer serving 15 engineers without being in the room
  • ( 005 )
    A system flexible enough to absorb constant product change

( Outcome )

The rebuilt system became a single current source of truth for design and engineering, closed the drift between Figma and production, and let 15 engineers build against it independently. There was room to expand without the design foundation buckling. Foundations were documented in Notion for the whole team, and the atomic rebuild was applied to Homepage, Claim Details, and Case Page.

  • 1.
    Single current source of truth for design and engineering
  • 2.
    Closed the drift between Figma and production
  • 3.
    15 engineers could build against the system independently
  • 4.
    Room to expand without the design foundation buckling
  • 5.
    Foundations documented in Notion for the whole team
  • 6.
    Atomic rebuild applied to Homepage, Claim Details, and Case Page

NEXT PROJECT

Bravo Swimwear

Branding, Graphic Design

2017