Facilitating small business loans.

Online Lending

Project Overview

client

novatraq

my role

ui designer

ux engineer

information architect

duration

15 months

Don't have time to read everything? Skim colored text to get the gist.

THE SETUP

Novatraq facilitates the lending process between banks and small business owners through a cloud-based platform called Fundingtraq. This platform automates as much of the process as possible.

The loan process has six stages in all, from the preliminary interview to loan closing.

The two modules I worked on include the preliminary interview and formal application. The interview is where small business owners answer questions to determine their eligibility for a loan. The second step, formal application, begins once eligibility has been established. It consists of systems for uploading required documents, communicating with lenders, and reviewing progress via a dashboard.

Original Interface

THE CHALLENGE

User Needs

The process of getting a loan is time-consuming and costly for banks and business owners alike. With some loans potentially requiring more than a hundred documents and months of back and forth, the conventional application process is tedious and inefficient.

Original Interface

The original interface was created by the development team, as Novatraq had never employed a designer before I joined. While it was functionally robust, the app had an austere visual style and confusing navigation. Moreover, there were still some key features yet to be designed and implemented.

MY SOLUTION

The solutions to these problems lied in improving the workflow of each stage, by updating the architecture and visuals. My work included redesigning the borrower-facing app, improving its usability as well as designing new features.

Interview-Landing-Cropped.gif

Landing Page

HOW I GOT THERE

Creating a streamlined platform for such a complicated process required a systematic approach, one step at a time.

Information Architecture

The first step towards redesigning Fundingtraq was to reorganize the navigation and content of each page, and to present information in chunks that were easy to read and understand.

In order to make sense of the interview, I mapped out every possible question in a flow diagram based on a spreadsheet given to me. Then each set of questions needed to be visualized in a way that is easy get through, minimizing fatigue.

This meant arranging over a hundred questions into smaller groups, placing related form fields into categorized modules. Since some questions depended on the responses to others, these questions were hidden until they became relevant.

Preliminary Interview

Interview Questions

Interview Flow Diagram

Low-Fi Interview Wireframe

Hi-Fi Interview

Formal Application

Dashboard

On the dashboard, the most important and relevant information is shown first, like loan details and the current step in the process.

Dashboard after the preliminary interview

Documents Page

On the documents page, the main objective was to expedite the task of finding a specific document and uploading it. To that end, the control bar allows users to filter through files and directly search for documents by name.

Documents page, part of the formal application

Timeline Page

In addition to redesigning preexisting pages, new features were also being implemented, including a messaging system and a timeline of the user’s journey thus far.

Timeline page, tracks the user's progress with respect to time

(Micro) Interaction Design

The goal when designing the interactions was to make the app intuitive and engaging, without being intrusive. Each prototype incorporates interactions best suited for the respective device. Furthermore, animations and visual affordances give users feedforward and feedback, reassuring them of their actions while adding variety and flair.

Preliminary interview, first steps of loan application

Error Recovery

In order to make it easier for users to keep track of errors on the page, I designed a system of markers that continuously point to their respective fields, no matter where you are.

Using simple trigonometry and scroll position, each marker tracks its respective field.

Visual Design

The visuals feature solid colors, simple layouts, sleek fonts, and lots of white space. Together these characteristics produce a beautiful, clean interface that is both practical and delightful.

Style guide for the interface.

© 2018

email  I  rpm2011@gmail.com

  • LinkedIn Social Icon
  • 1_emiGsBgJu2KHWyjluhKXQw
  • Instagram Social Icon