MTrac

Proprietary Loan Origination Software for Mortgage Brokers

Majestic Home Loan

B2B Mortgage Lender

UI/UX Designer

with 1 Back-end Engineer

UI/UX Design, UX Research

Adobe Xd, HTML/CSS, SQL, ASP

2020 - 2022

Background

Excessive Support Tickets Dragging Multiple Teams' Performance

Majestic Home Loan, a small wholesale mortgage lender, lacked a dedicated customer support team. Instead, brokers with issues reached out to various departments—sales, underwriting, or even to me, a UX designer. The company had no plans to hire a support team or invest in user research, so the burden fell on already overworked staff.

Most of the support tickets are related to the proprietary loan origination software, especially about locating loans and asking the current status in the system.

Although I was hired to improve marketing aspects, such as the company website and landing pages, I recognized this issue was affecting the brokers and internal teams. I decided to address the root causes by improving the legacy enterprise software.

Research Process

Understanding the Industry

I educated myself through independent research and interviews with the operations manager to better understand the wholesale mortgage industry. Unlike typical B2B SaaS products like HubSpot, Jira, or ADP, mortgage brokers don’t stick to one software. Instead, they use multiple wholesale lenders’ platforms depending on loan scenarios—choosing Lender A for government loan cases and Lender B for expedited loan cases.This insight helped me understand the software's role within a broker's broader workflow. I hypothesized that enhancing external consistency through smaller UX improvements would be beneficial.

Understanding the Mortgage Operation Process

I expanded my understanding of the mortgage process by watching YouTube tutorials for loan officers, underwriters, closers, and secondary marketers. Afterward, I asked targeted questions to department managers at Majestic Home Loan to fill knowledge gaps.I documented these findings and created a simple workflow diagram for myself and to be shared with the development team.

Competitor Analysis

In this niche industry, public resources were limited. I analyzed competitor UI/UX designs by checking on the tutorials on their websites and their YouTube channels. Recreating competitor interfaces and flows enhanced my understanding of industry standards and trends, building a valuable resource library.

Extra Efforts

Without user tracking tools in the software, I analyzed server logs to identify user flows and feature traffic. This gave me a clearer picture of how brokers interacted with the software and where friction occurred.The dashboard had the second-highest traffic, followed by key areas like loan registration, underwriting conditions reply, and the secondary department for locking interest rates.Furthermore, I recorded how each department works, thanks to the operations manager, I could see how a loan is registered and submitted, initial documents were generated, underwritten, closed, and funded.

Design Process

Focus on the External Consistency in Mortgage Industry

I revisited my research notes to understand why competitors made specific design decisions. Most competitor dashboards relied heavily on table-based layouts. Interviews with sales representatives confirmed this was to facilitate communication both within broker companies and between brokers and sales reps. For example, brokers often print the dashboards to facilitate discussions and share updates more effectively.I also ensured that terminology matched industry standards, making the interface familiar and lowering the learning curve for brokers.

Personas

Using the gathered information, I created personas for different user types.:Mega broker companies with multiple user roles.Owner of the companyLoan OfficerLoan Officer Assistant (multiple in some cases)Small broker companies where one person wears multiple hats.Loan OfficerAssistantI considered different default view settings of ordering items by role. However, to minimize the confusion and maintain communication across roles, I decided not to implement this but noted it as a potential future update.These personas contributed to the later projects. Particularly during reorganizing information architecture of the software.

Prototype and User Testing

I built a web prototype and tested it with sales representatives who had prior loan officer experience, which is very similar to our customers, mortgage brokers. This approach provided a broker-like perspective without direct access to customers.The test involved tasks such as locating specific loans, navigating to particular pages, and remembering loan details. Afterward, I conducted interviews to gather improvement suggestions.

Final Design and Deployment

Presentation for Sales Representatives

I held a short presentation with the operations manager, for the sales team to explain the new features, release plan, and how to communicate these updates to brokers. Making sure our sales team can support the customers effectively.

Incremental Deployment

Instead of all-at-once deployment, the deployment started with smaller broker companies, I stayed online 24/7 to assist sales reps and customers. The initial feedback was positive, and I implemented minor adjustments, such as adjusting the number of loans displayed and adding extra filter items. After these refinements, I rolled out the update to larger broker companies.

Result

-90 % Decrease

in Support Requests

Changes in Organic Visitors, from Dec 2019 to Nov 2020

100 % Increase

in Condition Reply Speed from Brokers

Changes in Organic Visitors, from Dec 2019 to Nov 2020

More Updates

What I valued the most that I gained from this quick project was the trust from the senior management. Thanks to their trust and support, I was able to start implementing other UX improvements.

Product Finder Update

As the next short-term project, a senior programmer and I re-designed another single page feature. This page was connected to multiple major steps in loan process, registering loan, selecting rate & pricing, and locking rate.For readability and marketing purpose, I highlighted the pricing information and displaying tips to maximize the potential that the loan scenario has. For usability, I placed the default value that are most common per each product categories (Conventional / Non-QM / FHA-VA), minimizing inputs, and adding tool-tips for the new brokers in the industry.

Loan Detail Screen Update

Accommodating to the national mortgage application change(GSE to URLA), I worked with senior programmer to create loan detail page. This page resembles the URLA format so that brokers can easily edit their loans without a stiff initial learning curves.

Loan Registration Process Update

Similar to a common product fidner you can find in retail markets, I added seamless step-by-step loan registration feature into the software. It had multiple automated features that I developed with RPA (WinAutomation, currently Microsoft Power Automate), such as loan imports from other loan origination software through industry standard format (MISMO 3.2 and 3.4).

MTrac Design System for LOS and Mobile App

Lastly, in 2022, I started creating MTrac design system based on Material Design 3 for UI design & front-end overhaul of MTrac and its mobile application.

Company Website

Retail mortgage company transitioning into a B2B lender

Majestic Home Loan

B2B Mortgage Lender

UI/UX Designer

CEO, IT Department Manager

Website Development

Adobe Xd, Photoshop, Illustrator, After Effects, Wordpress, HTML/CSS, JS

Jan 2020

Overview

MHL, a mortgage lender, was switching business target from retail mortgage borrowers to wholesale mortgage brokers.

As the sole designer, I created a company website, contents, and marketing materials.

Research Process

Competitor Analysis

I started by analyzing top wholesale mortgage companies and the ones similar to MHL. Focusing on the characteristics and the differences.This research helped identify industry trends, broker preferences, and key differentiators.

Stakeholder Interview

To align the website with business goals, I conducted stakeholder interviews with product owners, executives, and sales leads.These interviews revealed the importance of showcasing MHL’s unique values, such as niche mortgage products, competitive rates, and broker support, while addressing pain points like unclear navigation and insufficient resources for the new brokers.

Design Process

Based on insights from research, I prepared three design concepts that reflected:- MHL’s business position in the wholesale mortgage industry.

- The needs and behaviors of current and target customers.

- Stakeholder priorities and feedback.

Design Presentation

I presented the three concepts to product owners, highlighting how each design could drive business outcomes.For example, one design prioritized lead generation with prominent calls-to-action, while another emphasized educational resources for brokers.

Prototyping and Testing

After receiving stakeholder feedback, I developed a high-fidelity web prototype. This prototype was tested with selected brokers, feedback was incorporated into the final design.

Final Design

Result

+ 2,143% Traffic Increase

Changes in Organic Visitors, from Dec 2019 to Nov 2020

15 Organic B2B Leads / Month

12 month average, Feb 2020 - Jan 2021

$ 1 Billion Funding Amount

Fiscal year of 2021

Kinetic Design System

In-house design system development

Cardinal Financial

Multi-channel Mortgage Company

UX Product Designer

with 3 Product Designers, 4 Front-end Engineers, and 3 Product Managers

UI Design

Figma, GitLab, Storybook

Sep 2022 - Mar 2024

Background

“White-label” an enterprise software, sell it as SaaS product.

Cardinal Financial aimed to make its loan origination software, Octane, easy to rebrand for other companies and sell as a SaaS product.

However, Octane’s front-end lacked components and design tokens, making even simple color palette changes difficult.

The company had outsourced designers but faced challenges in communication, organization, and implementation. I was hired to develop the design system and serve as an internal UX consultant for product analysts.

Challenges & Approach

Accessibility Issues

The outsourced team produced visually appealing designs, but accessibility was not considered, especially in colors. For example, text elements did not meet the required contrast ratios, occasionally falling below the 7.0 standard and sometimes even below 4.5.

Fragmented Design Elements

Despite the cohesive visual style the outsourced team had created, the design lacked a structured component library and was not optimized for development. Design elements were positioned manually with either absolute position or wrong constraints. Most of the "finished designs" were not connected to the library, making it hard to update whenever there's a design system update.

Presenting Solutions

I created WCAG 2.1-compliant color palettes, component-based design structures, and a Figma demo file. I presented it to senior management, highlighting:

The importance of accessibility in financial services and SaaS.

Future cost risks if the design system remained overlooking accessbility (e.g., a possible scenario of using the design system in customer-facing websites and getting CFPB audits).

A low-cost, structured approach to fixing these issues with the demos I prepared, showing how much time each task would cost to complete.

Process & Execution

Laying the Foundation

Before developing components, the lead front-end engineer and I defined key principles:

Audit the product’s existing components and specifications.

Prioritize small components before assembling complex components.

Record why we made the decisions and how we created the components.

Auditing the Existing Product

The goal of auditing was to map all use cases and prepare for future UX improvements. I categorized and documented existing components, layouts, and patterns. After each component's auditing is done, our team gathered and decided on the name and function of the component.

Building the Atomic Design System

With Atomic Design principles, I created tokens and atom components first, atom components were used to create bigger components, molecule and organism components. In Figma, smaller components inside of bigger components are all connected, making design updates easy.

Structured token hierarchy

The token naming convention was set for scalability, preparing future updates in components and in token structures. Initially, we used primitive tokens and two different component token types. Later, I advocated for semantic tokens to enable easier control over the components, making theming across brands faster and more precise.

Documentation with the team

At the beginning of the project, to maintain the momentum of early development and make work process better for front-end engineers, I prioritized designing. However, I documented UX considerations behind, use-cases in existing products, token values, and component structures.

We expanded the documentation as the UX/Product designer team grew, refining it collaboratively. Later, I created checklists for documentation, accessibility, usability, and Figma component setup.

Maximizing Figma’s Capabilities

Auto-Layout & Component Properties

Every component and layout pattern was built with auto-layout for scalability.

Token values were applied precisely, ensuring seamless Figma library updates.

I enforced a consistent naming convention for component properties.

Organized Design File Management

I structured Figma files to serve as the single source of truth:

Feature design files used the Figma library.

Once finalized, updates in the design files were pushed to the master design file.

And each design files have Asana task links as its thumbnail, visualize its status.

I wanted to utilize the branch feature in Figma, however, at the time, it had too many bugs and caused issues, slowing down and frustrating designers.

Advanced Figma Utilization

For rich-content components (e.g., popovers), I implemented a “slot” approach inspired by Salesforce’s Lightning Design System, allowing content swapping without detaching components.

Once Figma Variables were introduced, I quickly reorganized components and collaborated with engineers to enable JSON token exports, making design updates seamless.

Mentoring Designers & Guiding Engineers

When the team got expanded to have 3 UX/Product designers and 4 front-end engineers, I started a bi-weekly UX workshop covering UX principles, Figma techniques, and tools like ProtoPie & After Effects for designers. I created a one-page Figma guide to improve product design implementation and communication.

Results

By February 2024, the design system was adopted across four products and two brands. The design team had become proficient in utilizing the system and Figma.

Most importantly, we achieved our original goal: creating an environment optimized for white-labeling.

About

I'm a UX / Product Designer with a background in game design and over six years of experience in the financial industry.

My previous works focused on creating B2B SaaS features and design systems that help users and business achieving their goal.

In my most previous role at Cardinal Financial, I led design workshops, sharing my knowledge of Figma, Adobe Suite, and UX design principles to help teams collaborate better and streamline processes.

Experience

Freelance

Freelance

Freelance Designer

Creating websites and Figma components with 2 beautiful cats.

Jun 2024 - Current

Cardinal Financial

Multi-channel mortgage company

Senior UX Product Designer

Mentored designers and created design systems, B2C financial mobile web app in a multi-functional team.

Oct 2023 - Mar 2024

UX Product Designer

Started design system development, created numerous solutions for B2B financial web app with a front-end engineer, 2 product managers, and an outsourced design team.

Aug 2022 - Oct 2023

Majestic Home Loan

B2B Mortgage Lender

UI/UX Designer

Created B2B Software, Mobile Native App, Online Marketing (B2B) with 3 back-end engineer and a product owner.

Apr 2019 - Aug 2023

Blueside

Video Game Studio

Project Manager

managed Game Design, UI Design, and SFX Design teams for Kingdom Under Fire (Steam)

Oct 2018 - Apr 2019

Tools

Figma for UI/UX Design. Master class Figma skills with advanced features like variables, library, and branch.

ProtoPie for Prototyping. 2 Years of experience, created a customer mobile web app prototype with conditional logic.

Xd

UI/UX Design

Webflow

Low-code Platform

Framer

Low-code Platform

HTML/CSS. Helped front-end engineers to lower the complexity in HTML at Cardinal Financial.

Front-end

JavaScript

Front-end

Illustrator

Vector Design

Photoshop

Image Editing

Licenses & certifications

University of Alberta logo

Software Product Management

Software Product Management

University of AlbertaUniversity of Alberta

Issued Sep 2024Issued Sep 2024

Credential ID W1HRUOG2TJSHCredential ID W1HRUOG2TJSH

Skills: Product Management · Project Management · Agile Methodologies · Agile Project Management

Skills: Product Management · Project Management · Agile Methodologies · Agile Project Management

University of Alberta logo

Software Processes and Agile Practices

Software Processes and Agile Practices

University of AlbertaUniversity of Alberta

Issued Jul 2024Issued Jul 2024

Credential ID FNQ9KZVAC57LCredential ID FNQ9KZVAC57L

California Institute of the Arts logo

Web Design: Strategy and Information Architecture

Web Design: Strategy and Information Architecture

California Institute of the ArtsCalifornia Institute of the Arts

Issued Apr 2021Issued Apr 2021

Credential ID W9LUD494VAMCCredential ID W9LUD494VAMC

Skills: User Flows

Skills: User Flows

California Institute of the Arts logo

Visual Elements of User Interface Design

Visual Elements of User Interface Design

California Institute of the ArtsCalifornia Institute of the Arts

Issued Jul 2020Issued Jul 2020

Credential ID NKWS8NJQHMF9Credential ID NKWS8NJQHMF9

Skills: Visual Design

Skills: Visual Design

University of Michigan logo

Interactivity with JavaScript

Interactivity with JavaScript

University of MichiganUniversity of Michigan

Issued Jun 2020Issued Jun 2020

Credential ID CDK9TR47RU2W

Recommendations

Emily F

March 15, 2024, Dani was senior to Emily but didn't manage Emily directly

I have had the pleasure of working closely with Dani over the past year, and I can confidently say that she is an invaluable asset to any design team. Dani's leadership in owning and spearheading the creation of our design system has been instrumental in elevating the quality and consistency of our product's user experience. Not only did she lead this initiative with finesse, but she also took on the crucial role of educating fellow designers and stakeholders on the importance and intricacies of the system. Her ability to balance these responsibilities while still contributing to the wireframing of new feature designs speaks volumes about her dedication and multitasking skills.

One of Dani's standout qualities is her exceptional expertise in Figma. Her proficiency in the platform goes beyond mere execution; she stays abreast of its latest capabilities and features, ensuring that our team is always leveraging the tool to its fullest potential. This proactive approach not only streamlines our design processes but also fosters a culture of innovation within the team.

Furthermore, Dani's knowledge of HTML and CSS serves as a vital bridge between our design and development teams. By understanding the technical aspects of web development, she effectively communicates design requirements and collaborates seamlessly with developers, resulting in smoother implementation and fewer discrepancies between design intent and final product.

What truly sets Dani apart is her perpetual drive for improvement. She approaches every project with a critical eye, constantly seeking opportunities to enhance both our design processes and existing product designs. Her proactive attitude not only ensures that our team stays ahead of the curve but also fosters a culture of continuous learning and growth.

I have had the pleasure of working closely with Dani over the past year, and I can confidently say that she is an invaluable asset to any design team. Dani's leadership in owning and spearheading the creation of our design system has been instrumental in elevating the quality and consistency of our product's user experience. Not only did she lead this initiative with finesse, but she also took on the crucial role of educating fellow designers and stakeholders on the importance and intricacies of the system. Her ability to balance these responsibilities while still contributing to the wireframing of new feature designs speaks volumes about her dedication and multitasking skills. One of Dani's standout qualities is her exceptional expertise in Figma. Her proficiency in the platform goes beyond mere execution; she stays abreast of its latest capabilities and features, ensuring that our team is always leveraging the tool to its fullest potential. This proactive approach not only streamlines our design processes but also fosters a culture of innovation within the team. Furthermore, Dani's knowledge of HTML and CSS serves as a vital bridge between our design and development teams. By understanding the technical aspects of web development, she effectively communicates design requirements and collaborates seamlessly with developers, resulting in smoother implementation and fewer discrepancies between design intent and final product. What truly sets Dani apart is her perpetual drive for improvement. She approaches every project with a critical eye, constantly seeking opportunities to enhance both our design processes and existing product designs. Her proactive attitude not only ensures that our team stays ahead of the curve but also fosters a culture of continuous learning and growth.

Mark S

March 15, 2024, Mark managed Dani directlyMarch 15, 2024, Mark managed Dani directly

Writing a recommendation for Dani is both easy and difficult. Easy because she brought so much to our team, but difficult because it’s hard to know what skills to highlight most.

When I hired Dani as a UX Product Designer, I knew she had a background in game design and had worked as a hybrid designer/engineer in a previous role. I knew we needed her cross-functional skills to help us build an Enterprise Design System, and I knew that her experience with Loan Origination Systems would be valuable. At the time, I did not fully grasp just how fun it would be to work with Dani. She brings a thoughtful, unique perspective to everything she touches and she has an exceptional sense of humor (something I value greatly).

When tasked with creating a much-needed mobile loan application for Cardinal, Dani took it upon herself to lead a comprehensive research and competitive analysis initiative. She incorporated her findings into her design proposals and was able to easily justify good design decisions with research-based insights.

Dani was the lead designer for Kinetic, Cardinal’s Enterprise Design System. Her engineering background came through as she closely collaborated with UX engineers to align Figma variable tokens with coded system tokens. While Dani came to Cardinal with extensive Figma experience, watching her embrace and incorporate new features into her work was a thing of beauty. Never afraid to refactor (when appropriate), Dani was passionate about optimizing Figma file structure and token usage throughout the organization. As our Figma Subject Matter Expert, Dani was also passionate about sharing her knowledge with other designers and engineers on the team.

I really can’t say enough about Dani. She is a blast to collaborate with. She works hard, brings a fresh perspective to everything she does, and makes everybody around her better. If you get a chance to work with Dani, take it! You will be glad you did.

Writing a recommendation for Dani is both easy and difficult. Easy because she brought so much to our team, but difficult because it’s hard to know what skills to highlight most. When I hired Dani as a UX Product Designer, I knew she had a background in game design and had worked as a hybrid designer/engineer in a previous role. I knew we needed her cross-functional skills to help us build an Enterprise Design System, and I knew that her experience with Loan Origination Systems would be valuable. At the time, I did not fully grasp just how fun it would be to work with Dani. She brings a thoughtful, unique perspective to everything she touches and she has an exceptional sense of humor (something I value greatly). When tasked with creating a much-needed mobile loan application for Cardinal, Dani took it upon herself to lead a comprehensive research and competitive analysis initiative. She incorporated her findings into her design proposals and was able to easily justify good design decisions with research-based insights. Dani was the lead designer for Kinetic, Cardinal’s Enterprise Design System. Her engineering background came through as she closely collaborated with UX engineers to align Figma variable tokens with coded system tokens. While Dani came to Cardinal with extensive Figma experience, watching her embrace and incorporate new features into her work was a thing of beauty. Never afraid to refactor (when appropriate), Dani was passionate about optimizing Figma file structure and token usage throughout the organization. As our Figma Subject Matter Expert, Dani was also passionate about sharing her knowledge with other designers and engineers on the team. I really can’t say enough about Dani. She is a blast to collaborate with. She works hard, brings a fresh perspective to everything she does, and makes everybody around her better. If you get a chance to work with Dani, take it! You will be glad you did.

Ryan C

Engineering Leader | Front-EndEngineering Leader | Front-End

March 9, 2024, J. Ryan worked with Dani on the same team

I am excited to recommend Dani Jeon, a standout Design System designer with whom I had the pleasure of working. Dani is undeniably one of the most talented designers I've collaborated with in the Design System space.

Dani's expertise shines through in the meticulous organization and structure of her Figma files. Her commitment to precision and detail results in beautifully organized design assets, paving the way for extremely accurate code within the comps. Working with Dani, I witnessed firsthand how her design approach significantly reduces faults in the code, making the development process smoother and more reliable.

Beyond her technical prowess, Dani's creativity and innovative mindset add immense value to any project. Her designs not only meet but exceed expectations, creating a visually appealing and user-friendly experience.

It's a pleasure to recommend Dani Jeon to anyone seeking a Design System designer who not only possesses exceptional technical skills but also has the ability to elevate the quality and reliability of code through thoughtful and organized design practices.

Attention to Detail

1 endorsement

Game Development

1 endorsement

Game Design

1 endorsement

HTML5

3 endorsements

Cascading Style Sheets (CSS)

1 endorsement

Microsoft Office

1 endorsement

Adobe Photoshop

1 endorsement

Adobe Illustrator

1 endorsement

Adobe InDesign

1 endorsement

Prototyping

2 endorsements

Interaction Design

2 endorsements

Dani's hobbies are Reading design, color, psychology, , Piano, Video Games,

AI Chat Assistant
5 left
Start a conversation

Google Agent