Don't have time to read everything? Skim colored text to get the gist.
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.
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.
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.
HOW I GOT THERE
Creating a streamlined platform for such a complicated process required a systematic approach, one step at a time.
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.
Interview Flow Diagram
Low-Fi Interview Wireframe
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
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
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
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.
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.