Disputes Workspace Design System: building the foundation first

My role

I was the UX designer. Before touching a single new screen, I needed to build the foundation the entire platform would run on. That meant auditing what existed, defining the system architecture, building components from scratch, and getting a team that had never worked with a designer to actually use it.

The impact

65% faster design output. 40% faster development. 67% fewer post-launch bugs. WCAG 2.1 AA compliance from day one. And a satisfaction score of 4.6/5, up from 2.8 in the legacy system.

What the audit found:

The problem wasn't just visual

In a dispute management platform, inconsistency has real consequences. Status colors that contradict themselves affect how banks classify cases. Broken form accessibility means compliance risk. And without a shared system, every new feature required designers and developers to start from scratch.

export const tokens = {
  color: {
    action: { primary: "#155DFC" },
    status: {
      success: "#009966",
      warning: "#F59E0B",
      error: "#D92D20"
    },
    ai: { surface: "#EFF6FF", border: "#B8D7FF" }
  },
  space: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
  radius: { control: 4, panel: 10 },
  type: {
    label: { size: 12, weight: 600 },
    body: { size: 14, lineHeight: 20 }
  }
};

One source, three surfaces

Developers were not expected to infer values from screenshots. The same semantic token drove the Figma component, the CSS variable, and the JavaScript theme object used in the application.

What the system actually covered

Forms & inputs

Text fields, selects, date-pickers, radio groups, and checkboxes, all with focus states, error states, and ARIA labels baked in from day one.

Data tables

Sortable, filterable, with bulk-action selection, sticky headers, and status-badge integration, the backbone of every queue and list view.

Confidence badges

High / Medium / Low labels replacing opaque percentages, designed so agents see why the system thinks something, not just a score.

Alerts & notifications

Consistent patterns cover success, error, warning, and information states. Icons reinforce color, while ARIA roles announce each state to screen readers.

Dispute queue table

The table spec covered the conditions analysts actually handled: high-volume queues, batch selection, SLA urgency, sticky headers, long chargeback reasons, row actions, loading states, and keyboard focus.

Clear annotations on every component

Figma annotations documented exact spacing, CSS properties, and state conditions, which gave developers clear implementation guidance.

One-on-ones with senior devs

I involved senior developers in naming decisions early. Two became informal advocates who flagged off-system work during code review.

Acceptance criteria = delivery requirement

WCAG compliance went into sprint acceptance criteria. I framed it as preventing future rework, not adding new work. That reframe changed the conversation.

Mandate the system and developers resent it as imposed process; leave it optional and nobody adopts it. No Storybook, no token pipeline to lean on.

Make the system easier to use than not: clear annotations, exact CSS values, and senior devs pulled into naming decisions. Adoption became a design problem, not a mandate.

Tokens first, always

They're what made the system resilient to the changes that always come. One variable update instead of hundreds of component edits. I'd do this even earlier on the next project.

Ship V1, then improve it

Perfect doesn't get used. Components that ship and get used get better through real feedback. That feedback made the system better than any amount of upfront planning would have.

Adoption is a design problem

A design system only works when teams use it. I should have documented more of the reasoning behind each decision, which would have helped future designers more than adding components.

Engineering input earlier

Some component decisions I made unilaterally were harder to implement than necessary. A conversation with the tech lead at the token-naming stage would have saved two sprint cycles.