Sensitive information needs more than security, it needs clarity.
View project
Union Home Mortgage · UI kit and design system
The team was building fast. There was no system to support it.
Union Home Mortgage was building a set of internal applications to replace parts of a larger, more complex lending platform. Each tool was being developed independently, with little shared structure across the experience. As the number of applications grew, so did the gaps between them.
Consistency didn't exist across the applications.
Interfaces varied widely from one application to another, with no shared patterns for layout, hierarchy, or interaction. For a team made up primarily of backend engineers, usability and presentation weren't a primary focus, leading to inconsistency and added cognitive load for users.
Without a shared structure, every decision had to be made from scratch. That made the applications harder to build, harder to scale, and ultimately harder to use.
The work focused on creating a system the team could actually use.
The goal was to introduce a shared foundation that would bring consistency to the UI, reduce decision-making overhead, and make it easier to build new applications.
That meant rethinking the presentation layer, simplifying application flows, and introducing a more flexible system for branding and configuration.
The system needed to be practical, not theoretical.
I built a UI kit and design system to support real development workflows, focusing on reusable components, clear patterns, and straightforward implementation.
Working closely with a backend-focused team, I focused on making the system something they could rely on, not something they had to interpret.
Atomic design principles
A modular approach that broke interfaces down into fundamental components, keeping them consistent and reusable.
Grid system
A consistent structure for organizing content, so every layout stayed visually coherent across applications.
Typography
A grotesk sans-serif typeface chosen for legibility and scalability, with clear hierarchy through data-heavy content.
Color palette
A shared color scale from the brand's primary and secondary colors, checked automatically against the WCAG 2.0 4.5:1 contrast ratio.
Clear structure made the applications easier to build, and easier to use.
Shared components reduced the need to recreate patterns across applications, improving efficiency and alignment.
Layouts and hierarchy became more predictable, making interfaces easier to scan and understand. Tools that had previously felt disconnected now felt like part of the same system.
The team could now move faster without sacrificing usability.
With a shared system in place, new applications could be built more efficiently and with greater consistency.
The experience became easier to navigate and more reliable for internal users, while reducing the effort required from the team to design and build each new tool.
Systems create more than consistency, they create momentum. Giving the team the foundation they needed made it easier to build better tools.
Next project