Background information

LoanLogics, Inc. is a mortgage software company in the RegTech space specializing in loan quality automation for the full lifecycle of a loan. Security is paramount to the continued success of the company and trust by its customers.

One of their products is IDEA™ (Intelligent Data Extraction and Automation) OnDemand (aka "IOD"). This platform allows customers to quickly scale and efficiently manage loan submission volume. They upload their loans and the system will automatically classify the documents and extract the data in seconds.

The customer pain point

After the product was released in 2020, clients needed to use the company SFTP site to upload their loans. That is a normal business practice, but eventually, some LoanLogics' customers requested a more seamless API integration for greater security and control of their loan submissions.

"We need a way to integrate LoanLogics' IDEA™ OnDemand document processing automation features into our own applications to satisfy the ever increasing security measures our sellers demand."

- Large LoanLogics Customer Administrator

Steps towards the solution

The start of this project began like most other ones while serving as the UX/UI Designer at LoanLogics. In this scenario, the executives met with our IOD Product Manager to discuss the requirements for this software enhancement.

Research

My first thoughts about the task given to me were "what is an API tool?" and "what does does it look like?" I talked with several team members from the development group, including the product manager himself. They gave me interesting technical insight, but I still needed to know what it looked like. After spending an hour looking online for examples, I found some inside several cryptocurrency websites.

Image
Create API page in Kucoin
Image
Create API page in Binance

I gathered my snapshots and reviewed them with the team during one of our semi-weekly requirements calls. They sort of agreed with what I was showing them, but they couldn't envision how it would translate to what we needed to build. Next step, time to think about who would potentially be using this new tool.

Personas

Years ago, I created 34 different personas of various people who work within the mortgage space. This has been helpful for me to think about what might be tough or easy for each user. For example, I considered Bonnie and Penny. These ladies each have their technological strenths and weaknesses, so what would be an easy user flow for them to quickly and efficiently use this new API tool.

Image
SVP user from a QC company
Image
Product Manager from a Correspondent Investor company

User Flow

With some help from the product manager and several developers in one of our daily agile stand-up meetings, I asked them to help me flush out an expected user flow. What would be a simple course of action? Here is basically what we came up with.

Image
Rough sketch drawn during meeting
Image
Lucidchart used to create cleaner user flow

Sketches and wireframing

When it comes time to begin creating the initial visuals, I like to use a variety of methods. Sometimes I draw on stickies creating what's known as paper prototyping. Other times I go straight to Adobe XD and whip out some basic lo-fidelity wireframes. In this scenario, I decided to use a popular wireframing program called Balsamiq. It's fast, rapid way to create crude wireframes that help you get those visions into the computer.

Image
Create new API slides in from the right
Image
Last page showing completed API creation

The value in using Balsamiq to create these rough wireframes is so the people reviewing them will not be distracted with colors, fonts or any other kind of styling. They're solely thinking about the workflow. In my case, I created what would be a cool way for the user to access the API creation tool.

I thought having a smoothly animated sidebar sliding out from the right would be fun. The developers reminded me that we do not have that functionality anywhere else in the platform, and this new feature styling could confuse the user. Back to the drawing board...

Prototype iterations

At the risk of overwhelming you with a vast amount of screenshots showing all the changes made, I'm going to go straight to the final product. The process was the same as always... create a prototype in Adobe XD, share it with the various tech team members, get their feedback, apply the changes, repeat the process.

Final design

In the end, I designed a user experience that stayed true to the design system of standard components built for our software. Our customers will be familiar with this process and comfortable clicking through until completion.

Image
Underwhelming but efficient three step process to create a new API client

Summary

"We are pleased with the new LoanLogics API management tool. It ensures a secure responsive integration to our software, which enhances our sellers' experience and meets their demand for high security measures."

- Large LoanLogics Customer Administrator

Even though my original vision did not get approved and built, I still consider this project a success. I know this isn't a very exciting project to read about, but I wanted to showcase the process I go through for any design request, big or small. I did not face very many hurdles during this project. It was pretty smooth, and I gained a deeper understanding about the value of API integrations. Here are some other things I learned...

Keep it simple

Don't over think the design. How can you reduce the workflow by one more click?

Research thoroughly

Reach out to the experts, take lots of notes and enjoy the learning process!

UX wins the day

Keep your personas in mind and they will help you design a better experience.

More success stories

⇐ Case Study: Freddie Mac FAST®

Written by Chris Metzner
Image
Using modern project management methodologies, I can translate a client’s user requirements into visually appealing interfaces and positive experiences that align with project UI specifications.