Maxwell - Mortgage Application 2.0
Maxwell was a mortgage startup providing services and a platform for 3rd party mortgage brokers. Brokers could manage their mortgage pipeline from lead generation to application to closing. However, Maxwell needed to catch up to their competitors, who had product and engineering teams 3x the size at the time. We had to be ruthless about what we prioritized, and it wasn't enough to deliver; we had to be innovative and differentiating.
The Problem
Maxwell's loan application was costing them customers; It was slow and odious to complete, and dropdowns would work one way in one section and completely different in another. It wasn't white-labeled, so it was always in Maxwell's branding. Its responsive implementation needed to be more mature, with patterns breaking (even unusable) in some viewports.
With clients leaving and lost sales, Maxwell knew that the loan application needed to be rebuilt from the ground up.
The Design
During this process, we developed a new design system for Maxwell, using Loan Application 2.0 (LA2) to produce and mature the patterns in the framework, with white labeling as a foundational feature.
PROGRESSIVE DISCLOSURE, USER PRIMING, & MATH
Mortgage applications rarely describe the *why* behind a question or document request. This can leave borrowers needing clarification and erode confidence. In this online mortgage world, they rarely see their broker or processor's faces, which can dehumanize them and not build a collaborative environment.
We were proactive in explaining the purpose of every request not self-evident, and primed users for future information or document needs throughout the application.
Users of financial systems routinely have to check their own math, especially when inputting personal information. This increases cognitive load and errors - as a solution, we provided clear, real-time tallies of everything the user entered, in easily scannable positions.
Using the HSL color functional in CSS meant that we could dynamically produce coherent, aesthetically pleasing color palettes that didn’t feel out of place or generate usability issues. We just needed primary and primary accent hue and saturation values and BLAMO! We had a color palette.
WHITE-LABEL COLOR SCHEMING
Many white-label platforms allow customers to customize colors, fonts, etc. The problem is that much control in the hands of an inexperienced person can lead to significant usability issues.
Using the HSL CSS functional, we developed a color scheming system that allowed for brand colors (primary and accent) to be entered and then extrapolated to an entire palette. We had default saturation and lightness values; the hue was the only variable being replaced (in some instances, saturation had to be overridden, but it was an edge case).
We even ensured the color scheming was expressed in our SVG animated illustrations. This system ensured design integrity and usability since contrast and saturation were predictable, leading to more cohesive brand experiences.
PRUDENT RESPONSIVE DESIGN
A general axiom I follow is that for every viewport you must support, add 25% to effort and time at every phase. With that in mind, I developed a layout system that natively supported two major viewports ('landscape' and mobile) but was fluid enough to appear to support all viewports natively. We used a 16-column layout to make the collapsing of components and patterns predictable and scalable up and down the viewport stack.
The trick here is to design for the bottom end of a given viewport's dimensions rather than the most common (which is a trap many designers fall into). If 1080 width is supported, scaling up to 1280 or even 1440 (which should be the upper limit of *any* interface, but I digress) is easily done via flexible components. The same goes for mobile - if I design an interface for 320px and it works, it will scale up to even 500px without any noticeable issues in the layout.
This meant that components didn't have to scale or collapse until the mobile viewport. This reduced QA support and testing, technical debt, and design support.
THE RESULT
Maxwell had a hit on their hands - clients were willing to stay on, excited that Maxwell was producing a featureset that spoke to their needs (to say nothing of the conversion boost), and new prospects signed on eager for a feature that would differentiate from their competitors.
