Union Home Mortgage

Designing a Scalable System for Internal Mortgage Lending Applications

Increase Productivity

Empower the in-house engineering team with presentation layer education to expand their skill sets to relieve roadblocks.

Standardize Common Elements

Create a scalable atomic foundation to build upon so that components become reuseable.

Advocate good design

Maximize the opportunity to provide some reasoning behind "the why?" in many design decisions with a foundational review of UX best practices.

The
Situation.

I found myself coming into a team that had no previous design or UX input. A vast majority of engineers on the team were backend and database-focused .NET developers and very talented in that arena, though none were fluent with customer-facing or presentation layer fundamentals, frameworks and patterns.

I saw first-hand how this lack of focused experience could drastically slow down development, introduce more inefficiencies, make bug squashing a full-time job, and created friction between teams due to the lengthy backlog.

Teams required better alignment

  • Common misunderstandings
  • Productivity was affected
  • Relationships were getting strained

Advocate for design and level-up the larger cross-functional team on the foundations

To bridge these gaps, I began having some strategic conversations to cultivate a shared understanding of what good UX and process, best practices, cross-functional collaboration, and the many benefits of a systematic front-end framework can provide. This will — and did — take a lot of honest communication, understanding of shared and non-shared pain points, and a two-way sharing of knowledge.

Given the team's foundational skill sets residing mainly in the backend and database engineering, the first thing that surfaced was it served as an excellent opportunity to share the underlying principles behind Design, why they matter, and its value to the business.

The
Challenge.

I defined, delivered, and iterated on an Atomic Design-based UI kit that became the foundation for a scalable, cross-platform design system. The goal was to create a flexible framework—themeable, accessible, and built to evolve with the product.

By embedding UX and process best practices directly into the system's core, the work established alignment across teams and set a unified standard for future design and development.

Create alignment and spread design thinking

  • Documentation
  • MVP applications
  • Scalable Foundation
  • Iterative Approach

The
Path
Forward.

To ensure consistency, scalability, and accessibility across all interfaces, I established a set of core design principles and standards. This included a modular component approach, a consistent spacing system, clear typographic hierarchies, controlled versioning, and an accessible color palette—laying the foundation for a unified, flexible design system.

Establish Design Principles

  • Atomic Design
  • 8px Grid System
  • Color System
  • Typographic Hierarchy
  • Versioning Control

The foundational concepts of what makes a good UI are provided, as well as a crash course in the Atomic Design Methodology. By providing this information as a resource, not only are we are doing so for our engineering and design partners but it serves to empower other users of our system about the importance of usability and why the details matter.

Design System Documentation index screen

Atomic Design Principles

Utilized a modular approach to design, breaking down interfaces into fundamental components to ensure consistency and reusability.

8px Grid System

Adopted a consistent spacing system to maintain alignment and visual harmony across all interfaces.

Typography

Selected a grotesk sans-serif typeface prioritizing legibility and scalability, establishing clear typographic hierarchies to guide users through data-heavy content.

Color System

Developed a shared color scale using the brand's primary and secondary colors, along with a complementary tertiary palette. Automated tools ensured WCAG 2.0 contrast ratios of 4.5:1 for accessibility compliance.

Versioning

Introduced thoughtful versioning of the design system to address legacy application compatibility, allowing for a controlled rollout and smooth transition to the new system.

Establishing Visual Harmony Through a Unified Color System

To help create consistency across all applications, a shared color scale was developed using the brand's primary and secondary colors. Along with a complementary tertiary palette that bridged the two. This ensured every visual element, regardless of application, felt like part of the same cohesive system.

From a design perspective, this strengthened output consistency and reduced time spent with developers adjusting colors. For developers, it simplified implementation by providing a standardized set of tokens, reducing guesswork and increasing efficiency across teams.

Color System Scales and Values for multiple levels

Fundamental Understanding

Each parent color was broken into lighter and darker shades, 100-900 with 500 being the primary, via automation. This helps to ensure consistent visuals across the platform.

Unified Purpose for Color

Each parent color was broken into lighter and darker shades, 100-900 with 500 being the primary, via automation. This helps to ensure consistent visuals across the platform.

Creating Clarity with Purposeful Typography

Typography is foundational to establishing visual hierarchy, guiding users through dense information with clarity and ease. Given the internal, data-heavy nature of these applications, we prioritized scannability and readability over flourish.

A grotesk san serif typeface was determined the be the best path forward. Possessing a wider character width and taller x-height it was well-suited for density rich data-driven applications.

Well-defined typographic styles not only help users process content more efficiently but also streamline development by standardizing styles across screens and components.

Color System Scales and Values for multiple levels

Why Typography Matters

Effective typography structures content, guides attention, and helps users scan information quickly—crucial in internal tools where speed and precision matter.

Type Scales with a Purpose

Using atomic design principles, we built a scalable typographic system that ensures consistency, reinforces hierarchy, and supports efficient flows for internal partners.

The
Results.

Enhanced Productivity Across Teams, Streamlined Development Processes, and Evolved the Design Culture

Following implementation, productivity improved significantly, and release timelines were cut nearly in half. One of the biggest challenges—legacy application compatibility—was addressed through thoughtful versioning of the design system. While the introduction of new styles and naming conventions introduced major breaking changes, the approach allowed for a controlled rollout. Remaining applications were triaged and prioritized based on business needs, ensuring a smooth and scalable transition that maintained development momentum throughout the process.

This project reinforced the value of a unified design system in streamlining workflows, improving cross-team collaboration, and strengthening overall product consistency. By creating a shared design foundation, teams were able to deliver faster, reduce friction, and provide users with a more cohesive, trustworthy experience across every touchpoint.

Establish Design Principles

  • Atomic Design
  • 8px Grid System
  • Color System
  • Typographic Hierarchy
  • Versioning Control

Increased Productivity

Development time was reduced by nearly half, allowing for faster delivery of new features and updates.

Consistency Across Applications

The unified design system ensured a cohesive user experience across all mortgage applications, reducing inconsistencies and improving user satisfaction.

Scalable Transition

The thoughtful versioning of the design system facilitated a smooth transition, addressing legacy application compatibility and enabling scalable growth.

Early Integration

Integrating design systems early in the development process can prevent inconsistencies and reduce rework.

Accessibility Standards

Prioritizing accessibility ensures that applications are usable by a broader audience, enhancing user satisfaction.

Continuous Improvement

Regularly updating and refining the design system is crucial to accommodate evolving user needs and technological advancements.

Next
Steps?

This project underscored the importance of foundational design elements in creating a cohesive and user-friendly experience. By focusing on atomic design principles and collaborating closely with engineering and product teams, we were able to deliver a solution that not only met but exceeded partner expectations.

Future enhancements could include integrating AI-driven assistance during the account opening process and expanding the platform's capabilities to support additional financial products.

Future Enhancements

  • Explore AI-driven assistance
  • Additional Product Support
  • Digital Document upload