Dream Design System

Read time:

6 min

Company:

United Wholesale Mortgage

Industry:

Mortgage

Start: Jan. 2024

End: Ongoing

Duration:

2 years, 2 months (ongoing)

UWM had no unified design system. Designers and developers were working from inconsistent patterns, duplicating work, and shipping products that felt different across the board. I was part of the team that changed that, helping build Dream, UWM's first design system, from the ground up using React, TypeScript, MUI, and Storybook, delivering a production-ready library of 60+ components adopted across 40+ internal projects.

My Role

My role was cross-functional, contributing across the full design system lifecycle as part of a small developer-designer team. I developed 30+ of the 60+ components from design specs, ensuring pixel-accurate implementation while also contributing to design decisions, flagging inconsistencies, and bridging the gap between design and development.

I managed minor releases, team communications, and consumer support, fielding 100+ requests from developers and product teams to drive correct adoption and maintain documentation.

I also helped present the system vision to the CTO, CMO, and VPs to secure buy-in, later shared progress and adoption milestones at an All-IT Meeting, and collaborated with the A11Y team to audit accessibility across the full component library.

Problem

Without a shared foundation, UWM's digital products lacked consistency. Designers and developers worked from different sources of truth, teams solved the same problems independently, and accessibility had no formal standard. The result was duplicated effort, slower delivery, and a fragmented experience for the users navigating across those products. Dream was built to solve all of it.

Different teams. Different components. 0 consistency.

Process

Agile, iterative, and never truly finished.

Phases loop back and inform each other continuously

Phase 01Research & Discovery

Before a single component was built, we audited existing UWM products, identified UI inconsistencies, and defined what Dream needed to solve. This human-centered discovery phase ensured the system was grounded in real problems rather than assumptions.

Human-Centered DesignUI AuditProblem Framing

Phase 02Stakeholder Alignment

With a proof of concept in hand, we presented the vision for Dream to the CTO, CMO, and VPs. These conversations were about building organizational understanding of why a design system mattered, not just securing approval.

Stakeholder PresentationsExecutive CommunicationAdvocacy

Phase 03Building & Iterating

Components were built with React, TypeScript, MUI, and Storybook, each developed from Figma specifications in close collaboration with designers. Working within an Agile framework, the process was cyclical — build, review, refine, repeat.

ReactTypeScriptMUIStorybookFigmaAgile

Phase 04Documentation & Support

Storybook served as developer-facing documentation with interactive previews and code examples. A Figma guidelines file served designers with specs and usage rules. I handled 100+ support requests, ensuring every team could adopt Dream successfully.

StorybookFigma100+ Support RequestsDocumentation

Phase 05Accessibility Reviews

We partnered with the A11Y team to audit every component in Dream against accessibility standards, applying inclusive design principles across the entire library. This was an ongoing collaboration, not a one-time check.

AccessibilityInclusive DesignWCAG

Phase 06Continuous Feedback

The work does not stop at shipping. We actively listened to the teams and consumers relying on Dream every day through a dedicated Airtable feedback form where teams could submit suggestions and new component ideas directly. A consumer satisfaction survey was also released to gather broader structured feedback and surface opportunities for improvement. Because a design system is never truly done, it evolves with the people it serves.

AgileConsumer ResearchContinuous Improvement

Solution

Component Library

At the core of Dream is a library of 60+ reusable UI components built in React, TypeScript, MUI, and Storybook. Each component was developed from Figma specifications in close collaboration with designers, applying atomic design principles to ensure every piece of the system was consistent, scalable, and purposeful.

Design Tokens and Theming

Dream was built around a robust token architecture covering color, typography, and spacing. The system supported multiple themes, with distinct token sets for different product suites, each offering light and dark modes, creating a shared design language that scaled across a diverse product ecosystem.

Token Architecture

Primitives hold raw values. Semantics reference primitives and switch per theme. Colors and styles used in example below are not reflective of Dream Design System.

Select theme to explore effects:

Component

Card Title

A simple card component consuming semantic tokens.

Consuming semantic tokens

Semantic Tokens

color.button.primary

references: blue-500

color.surface.default

references: white

color.text.default

references: gray-900

color.text.subtle

references: gray-500

Semantics reference primitives. Switching themes rewires the reference, not the primitive.

Primitives

blue-500

#0066FF

blue-300

#66a3ff

green-500

#16a34a

green-300

#4ade80

gray-900

#1a1a1a

gray-500

#888888

gray-100

#f5f5f5

white

#ffffff

The colors, tokens, and styles shown here are illustrative examples only and are not reflective of the Dream design system.

Documentation

Storybook gave developers interactive component previews and code examples in a tool that fit naturally into their workflow. A Figma guidelines file gave designers component specs, usage rules, and design rationale in theirs. Both audiences had the documentation they needed without having to work in an unfamiliar tool.

Components / Button

Docs

Button

A versatile button component supporting multiple variants, sizes, and states. Built to WCAG 2.1 AA accessibility standards and available across all product suites.

Usage

import { Button } from 'dream-ui'

<Button variant="Primary" size="md" />

Preview

Primary

Secondary

Danger

Ghost

Props

variantstring"Primary"Visual style variant

sizestring"md"sm | md | lg

disabledbooleanfalseDisables interaction

onClickfunc—Click handler callback

This is an illustrative mockup and is not reflective of the Dream design system.

Support Infrastructure

A dedicated Microsoft Teams channel gave consumers a direct line for urgent requests and questions. An Airtable feedback form allowed teams to submit suggestions and new component ideas on their own time. Together these two channels ensured no one was left without a path to get help or contribute to the system.

Real-Time Support

Two dedicated channels ensured every team had a path to get help or contribute to Dream.

Microsoft Teams

#dream-support

A dedicated channel for urgent requests, bug reports, and real-time help. Teams could reach the design system directly and get a fast response.

100+requests resolved

Airtable

Component Request Form

A structured form where teams could submit new component ideas, improvements, and suggestions on their own time. Responses fed directly into the backlog.

Contribution Model

Clear contribution guidelines gave teams across UWM a path to propose, build, and submit new components to Dream, allowing the broader organization to participate in the system rather than work around it.

Propose. Build. Review. Merge.

A clear four step process so any team could contribute to Dream rather than work around it.

Propose

Submit a new component idea via the Airtable request form with a use case and priority.

Build

Approved proposals are developed against Figma specs with React, TypeScript, MUI, and Storybook.

Review

Components are reviewed for design accuracy, accessibility standards, and code quality.

Merge

Approved components are merged into Dream, versioned via SemVer, and released with change logs.

Outcome

From zero to a shared foundation trusted by the entire organization.

60+

Components

built and shipped to production

40+

Projects

adopted Dream as their foundation

100+

Requests

resolved across support channels

Major Releases

versioned and shipped with change logs

"This is the most inspiring project I've seen on this stage."

AVP — UWM All IT Meeting

Back to home