3-Minute
Refinance Application

Neat Capital's 3-minute mortgage refinance application.

The previous UI was not accessible and not responsive. The flow was confusing and difficult to finish.

Context: Neat Capital
Refinance Application

Neat Capital is streamlining home lending with an online application and real-time loan approval. Neat Capital has decided to try and increase application completions, update the UI and become more accessible.

Time Frame

November 2020

Tools

Adobe XD, Lucid Chart, Uxfol.io

My Role

Lead Product Designer

Objective

Neat Capital was founded with a straightforward mission: to transform the home lending and real estate transaction process. Through an online application and real-time loan approval system, they aimed to streamline home lending. However, the current application, while sophisticated and well-built, appears dated in terms of its UI and lacks accessibility. The language used is plain and lacks a distinct voice, leading to a less engaging experience. Users are confronted with numerous red asterisks indicating required fields, and directions or alerts are boxed in colors that do not align with the brand's colors.

To address these issues, a possible solution is to design a more positive and user-friendly experience that adheres to WCAG guidelines. This approach will encourage users to stay engaged throughout the entire process, ultimately reducing drop-off rates and increasing conversions. Utilizing analytics, creating a distinct voice, and implementing a new design system are all vital steps in creating an excellent user experience, which will pave the way for further design iterations.

Product Requirements and Goals

Update Neat Capital's Mortgage refinance application to look current
be accessible and reduce bounce rate.

Required Features:

• Ability to fill out mortgage or refinance application -
Help the user get through a mortgage or refinance application

• Upload documents - add, delete, order
Help improve the UX for the user

• Create an account - add password, full name, delete
Capture basic information of the user to help speed up the application process

User Journey

With the Neat Capital's business goal in mind, I wanted to make sure that our users reached the end of the application without any hiccups. So, I sketched a current-state user journey map, to identify opportunities for improvement. I was able to identify 2 unnecessary steps and potential dropoff points in the flow. By eliminating these from the new design, we ended up with a much faster application experience that contributed to higher completion rates.

Design System

We set up a design system to accelerate our design process and our collaboration with the devs. First, we conducted a visual audit of the existing design, documenting all the design elements of our components, including grids, colors, typography, spacing, and sizing. Next, we made these into reusable assets in Figma. With the design system implemented, our collaborative iteration process has improved manyfold.

Tip: You can scroll through the image.

Final Designs

The current application has been updated to reflect a more positive and user-friendly experience, encouraging users to stay engaged throughout the entire process, thus reducing drop-off rates and increasing conversions. Distinguishing ourselves from competitors with friendlier language sets us apart from the competition. Utilizing analytics, creating a distinct voice, and implementing a new design system are all essential methods for creating a great user experience, and they will drive further design iterations.

The UI is intentionally kept clean and simple to minimize visual noise, allowing the user to focus on what is most important.

By turning the fields blue after the user answers the questions, we enable them to move through the application more freely, without bombarding them with numerous error messages, resulting in a more positive user experience.

A footer was added to the application with the intention of providing additional information and quick access to important links.

See the desktop prototype

click the button below to go to the XD prototype.

See Desktop Prototype

Click through the thumbnails and scroll on the device to see the updated application.
Click through the thumbnails and scroll on the device to see the updated application.
Click through the thumbnails and scroll on the device to see the updated application.
Click through the thumbnails and scroll on the device to see the updated application.
Click through the thumbnails and scroll on the device to see the updated application.