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,
Google Agent
Google Agent