ENHANCED THE loan application USER INTERFACE THAT HELPS borrowers GAIN QUICK ACCESS TO FINANCING OPTIONS THAT THEY NEED.
Objective was to make the application more consistent with the brand and seamless for the borrower to complete the application. Fulfilling these objectives led to an increased completion rate of the application.
OLD DESIGN
The design of the application showcased a user-friendly interface following a structured layout with a consistent blue color scheme. Each screen displayed a single step in the application process, minimizing cognitive load for borrowers and helps streamline the experience. The use of bold labeled blue buttons enhanced readability and ensured easy navigation.
Additionally, the interface includes a progress bar above each step that communicates with the borrower a sense of accomplishment. Displaying a phone number in the header for customer support reinforces accessibility and user assistance. The overall design is minimalistic and efficient, focusing on clarity and ease of use.
NEW DESIGN
Based on feedback collected from UX research and the user base, the progressive approach giving information step-by-step was kept. Areas of optimization that I identified was removing spatial constraints and unnecessary material, establishing new typographic hierarchy, and incorporating visual elements.
Each step was visually constrained by a white container. This was limiting the scale of buttons and important text for borrowers to interact act with that can cause frustration and errors. I removed the container and gave the buttons more optimal size with greater touch area by expanding the width to the margins. Additionally, I moved the progress bar to the top underneath the header bar and made it full width. This gives the bar a more prominent position for borrower’s to track.
The heading text of questions/requests for each step lacked visual importance, having a lighter weight than the buttons and equal weight with input fields. The heading should contain the most important information to draw the reader's attention. To make the heading more compelling, I applied the design system’s H3 heading to the text.
I then styled buttons when listed with multiple options to not be blue, but rather have a white fill with a gray border. It puts less strain on the borrower’s eyes. Additionally, I added blue icons next to the labels to serve as visual cues and enhancing aesthetic appeal.
