Design Standards Website
Read time:
6 min
Company:
United Wholesale Mortgage
Industry:
Mortgage
Start: May 2022
End: Aug. 2022
Duration:
4 months
Before UWM's Dream Design System existed, UWM needed a way to show the organization what a design system could be. As a UX intern, I was tasked with designing a website that would introduce employees, designers, and developers to UWM's design standards and demonstrate how they could be used to create consistent, cohesive products. Working alongside UX designers, engineers, architects, and senior leaders, I led the research, wireframing, user testing, and high-fidelity prototype for the desktop experience. 12 weeks of work culminated in a presentation to the entire IT floor that helped lay the groundwork for what would eventually become the Dream Design System.
My Role
I led the research and design of the desktop version of the design system website. This included conducting discussions with developers, designers, and marketing professionals across UWM to identify pain points, creating lo-fidelity wireframes, running usability tests with 8 participants, synthesizing findings into an affinity diagram, and designing the final high-fidelity prototype. I also presented the work to the IT department at the end of the 12 week internship.
Problem
UWM had no unified design standard. Designers worked from different sources of truth, applications looked like they came from completely different companies, and there were no centralized guidelines for color, typography, or components. Before a design system could be built, the organization needed to understand why one was necessary and what it would look like. The website was the answer to that question.
Every department had their own color & typohgraphy guidelines. None of them matched.
"We had a few different color palette documents but nothing centralized. Everyone was working from something slightly different."
UWM StakeholderResearch
Three methods to understand the organization, test the design, and map the path forward.
Click any phase to explore
The solution was a documentation website that gave every designer, developer, and stakeholder at UWM a single place to understand the design standards. The site covered color, typography, and components, each with clear guidelines, usage examples, and specifications. Navigation was organized around how people actually worked, not how the system was structured. A site map defined the content hierarchy, wireframes were tested with real users before moving to high fidelity, and the final prototype addressed friction points surfaced during testing.
From site map to high-fidelity prototype.
Click a step to explore
Before any screen was designed, the content hierarchy was mapped out to ensure intuitive navigation. The site organized into four key sections: Home, Design, Components, and Resources, each with clear sub-pages beneath.
Impact
At the end of 12 weeks, we presented the design standards website to the entire IT floor at United Wholesale Mortgage. The project was not immediately implemented, but it made the case for why UWM needed a unified design standard.
Two years later, that conviction became the Dream Design System as UWM knows it today. Dream went on to be adopted across 40+ internal projects, ship 60+ components, and become the shared foundation that UWM's entire digital product organization builds on.
Some outcomes take time.