Overview

Mortgage application process is complex, time-consuming, and confusing. Mortgage Processing inefficiencies cause frustration on every level of the process, in all the parties involved.

RealKey is a SaaS model startup that works on creating an Automated Lending Platform that aims to address the issue of inefficiency and improve the loan processing experience for Mortgage Brokers and their borrowers.

My role
  • Product Design
  • Visual design
Length of project

8 month

Tools used
  • Figma
Team
  • 1 Principal Designer
  • 1 Product Designer

Overall Constraints

This was my first time experience working for a startup. Naturally, I didn’t know what to expect. However, my previous experience working in the financial sector made it easier to understand the terms, the complexities and idiosyncrasies of the Mortgage Application process, and its users.

 

I got to wear many hats: from building personas, to usability testing, to UI and interaction design.

Overall constraints:
  • Limited user data
  • Limited budget
  • Current design patterns in place
  • The development is outsourced, which complicates communication and collaboration process

Persona Archetypes

When I joined, our lending platform was being developed using the vaporware prototype as a basis. Our CEO was a former Loan Officer and an in-house subject-matter expert.

The user role list was 27 entries deep, and I realized that there was a need for User Proto Personas. It would allow for a better understanding of who our users were, and what were their needs and pain points that we should be addressing.

I’ve gathered the list of all the parties involved in the mortgage process. So, I needed to simplify this and focus on those that would most commonly use the RealKey platform.

Some users would just occasionally use the platform, others would do so more often. Based on that, I’ve broken them into 2 groups — Core and Occasional Users, and have created the Proto Personas, using our CEO’s input, research, and my personal experience.

Since the User Personas are a living document, some of these personas are more developed than others, based on the opportunity to validate them.

Personas — Primary Users

(using several times a week):

  • Mortgage Loan Managers
  • Mortgage Loan Officers
  • Mortgage Loan Processors
  • Underwriters

Personas — Secodary Users

(using platform when invited to participate):

  • Closing Agent
  • Realtor
  • Borrower

Swim Lanes

RealKey platform is a complex product. As listed above, it’s being used by multiple users. To aid myself and others in understanding of how the product works and to illustrate the core user journey, the swim lanes were created.

The swim lanes also illustrate how the product works end to end.

They also have proven to be useful for the QA testing.

Detailed example of the swim lanes

These swimlanes are describing the scenario where a mortgage transaction is created, documents uploaded, but at least one condition is rejected by MLO and Underwriter.

Major Projects and Features worked on

As a product designer at Realkey, I got to work on various parts of the product and its features, and got to wear many hats. Below I listed one of the features I got to work on, but more are available upon request.

  • Individual Messaging Experience
  • Transaction Statuses
  • Condition Statuses
  • Transaction Details Updates Flow

Individual Messaging Experience

At the time, there was only the group messaging per condition that was implemented within RealKey product. Certain design patterns have already been established, certain mental models used, the interface was in the state of being coded. All of this presented a challenge and design constraints.

The requirements listed included the following:

  1. Users should be able to contact each participant directly, beyond the ability to have a group discussion on a particular condition
  2. Visual enhancements to how the time stamp and names are being displayed
  3. The feature should allow to switch the between condition-specific group chat and an individual chat between two users

I have started the process with looking at the common conventions employed by other messaging components and products —  LinkedIn, Facebook, Slack, Messages.

Then I explored various approaches to RealKey messaging using digital sketches and wireframes.

Wireframes

Once the direction has been established, I’ve built out the wireframes for the screens, developing the elements further.

The next step was to create a high fidelity screens and interaction prototypes to explain the interaction and the sequence of steps/actions.

Mortgage process primary users

The following are a few requirements that were included for the Loan Officer and Borrower role view:

  • A way to differentiate individual vs group messages
  • A way to highlight that a new message was sent
  • Create a relevant date stamp
  • A way to differentiate between group and chat messages
  • Limit certain users in ability to start the conversation first

The constraints:

  • The solution has to work within the established mental model and design patterns and without major overhaul of the interface
  • No in-app or email notifications available at the moment, as the notification feature design and development has been postponed
Play Video
Play Video

Borrower and Co-Borrower users

For the borrower and co-borrower view, there was an additional requirement that has been identified:

  • Limit borrower’s permissions on starting a conversation with an UW, unless the UW initiated the conversation first

The accepted solution was to gray out UW selector and display a tooltip on hover

What I've learned

Working at RealKey was challenging in many ways. This experience was very important for me to grow as a designer and provided a variety of work and challenges.

We had to stay lean in our spending, tools and staff. Having limited resources forced me to be more creative in many ways, and I got to wear many hats as a product designer.

I had to really familiarize myself with the product, and its users, their pain points and dig deep in my memory for my previous mortgage experience.

Furthermore, I came across the responsibilities I wouldn’t have possibly in a narrower specialty role — from user acceptance testing and bug reporting, to conducting user research, writing implementation rules, testing scenarios, and writing tickets, to supporting Marketing efforts.