Heron – mortgage management
6 months / UI/UX / ~230 screens / Designed from scratch / Sketch, Invision, Axure
~ 5:30 mins reading time
- User Experience Design
- User Interface Design
- Responsive Design
- Interaction Design
- Information Architecture
- Design system
- Style guides
User interface designs
- High and low-fidelity prototypes
- Final designs and interactions
- Heron improved and automated their working process and now can handle more clients.
- Thanks to the simple and useful design, clients can manage their mortgage application easily and securely.
Heron Financial is a mortgage and insurance broker who works hard to simplify the mortgage process and create excellent relationships with each of his clients.
I joined the Sprint Innovations team as a freelance UI/UX designer to build Heron’s application. During that time, Heron was doing their job on paper, excel sheets, and emails. They lacked a systematic digital approach. Instead of using third-party solutions, they decided to build their system from scratch.
The new application will unify the Heron team, the clients, and the referral agents, in an easy-to-use, responsive experience.
- Heron has to organize its referral agents’ reports and commissions, but it is hard to do it by phone and excel sheet.
- When a Heron client applies for a mortgage, he has to fill a massive form on paper, which slows down the process and brings errors.
- There are no third-party solutions that present the functionality Heron needs.
- Heron’s team, clients, and referral agents need to manage the core functionality form mobile devices.
- We created a responsive application that translates their manual process into an automated and easy to use experience.
- Defining the Heron’s client’s needs lead us to redesign the mortgage submission journey into a streamlined and simplified experience.
- Exploring Heron’s specific business structure helped us to determine the pain points and produce clean and informative mortgage application tracking.
1 / Discover
- User Interviews
- Competitors Analysis
2 / Define
User Roles & Information Architecture
- Wireframing & Prototyping
- User flows
3 / Design
- Visual guidelines & Components Library
- High-fidelity designs & Prototypes
4 / Test
- We do testing through all the processes. We check our concepts, prototypes, high-fidelity mockups, and user flows.
1 / Discover
The research is related to the mortgage industry. We found the different channels people use to get a mortgage. We understood what a typical mortgage application experience is and what are the different stages.
We talked to Heron’s team to understand what is their day to day work. We realized what parts of the process make sense and which not.
Customers said they struggle to find previously filled information and sometimes have many questions for a particular section.
We found the two most big competitors and carefully examined their products. We gathered insides for the industry. We saw what works and whatnot.
2 / Define
User Roles & Information Architecture
Role-based access control – Admin, Customer, and Referral Agent with a couple of sub-roles.
The research sessions and Heron’s staff interviews helped us to define the information flow. We used a unified approach to present the same pages with different content for different user roles.
Wireframing & Prototyping
To focus first on the most content-heavy user flow is a key strategy to cover 99% of the UI elements and interactions in all user flows. We started with 11 pages mortgage application form.
The next step is to analyze every piece of the form. After a couple of meetings, we understood each element’s purpose, the kind of data we have to support, and the dependencies. We summarized this in a google sheet and used it through the process.
It is crucial to determine the level of fidelity of the prototype. Mid-fidelity did a great job here, as we had to present the interface’s specific features that depend on the visuals. Based on the form’s complexity, we created a set of input types, typography scale, and buttons hierarchy.
How to reduce the chance for errors and minimize the cognitive load? – Minimum free-type inputs. We created an interface with Single/Multi-select buttons groups that convert questions in simple answers. They work for mobile and desktop and can appear in different layout variations.
The client has to add multiple blocks of information with similar details. We created a card-based UX. The card is versatile and handles all the interface dependencies. In the design stage, the card changed into a brief preview entry point to a page, where users can edit the data, add new cards or delete the card.
A simple strategy – Divide the information in small meaningful chunks. We created a step-by-step process that converts the big-paper form into a smooth mobile experience.
The core is the client management procedure. Heron has a well-defined flow they polished through the years. At first glance, it seemed extensive and straightforward. We dug deeper. We spend time together to finetune and get a more understandable and straight forward version of the initial flow.
In collaboration with the product management team, we created the Add/Edit/Delete Mortgage, Add, Edit, Delete Introducer, Add/Edit/Delete Client, Add/Edit/Delete Referral Agent flows as well as the Mortgage Journey flow.
3 / Design
Visual guidelines & Components Library
We started by exploring the visual design of some core elements and pages. The approach is to emphasize the inputs the client has to fill. To make them accessible on mobile and to provide maximum clarity. The client must see what is filled correctly and what left to be filled. Below is was our first attempt:
After a couple of feedback sessions, the styles started to emerge. In parallel with that, we removed the multi-purpose card and changed it with a details row and option to add more rows. Things began to look a bit more polished:
We listen, we think, and we update until perfection. The final UI styles match the clarity we’are aiming for. We designed a clean and modern interface that scales from mobile to desktop with no change in form or interaction.
The next step is to create the complete visual guidelines – Colors, Typography, Icons, Spacing System, Components library, Styles. We handle this with great respect and care.
High-fidelity user flows and prototypes
It’s time to get the final designs in high-fidelity. We created complete high-fidelity click-through workflows in Invision for every task the users have to do.
Below you can see key screens of some of the essential workflows for desktop and mobile plus option to play with the real prototypes.
A core workflow for adding an introducer. Standardized table view & controllers, typeahead search, and export capabilities. Stacked side panes and task segmentation experiences.
Standardized table view with mortgage status highlights. Two columns side pane experience. The left one is to select options, and the right one is to add appropriate people to it.
We see a presentation of the mortgage details screen with status tracking & action cards. The versatile stacked side panes experience accommodates even a date picker.
Return Mortgage Application Form
The admin can see a client’s mortgage application form and return it if the client needs to update some parts of the info. We see three columns side pane experience, where the admin can preview each part of the form and see if there are any issues.
The admin can see reports as a summary or by divisions. The admin can filter by introducer and date range. The table has an option for two docked columns, the first and last one.
Admin Mobile Mockups
A summary of admin mobile mockups below:
Client Mobile Mockups
An overview of client mobile mockups below:
Interaction design is something that we do throughout the whole process. It’s an undividable part of the user experience. The interaction design here is related to the button groups, the “add rows” pattern, the stacked side panes interaction. It’s an essential part of the requirements to make this app work perfectly on mobile too.
Stacked Side pane interaction helps to segment the tasks and remove the cognitive load of the users. It helps them to focus on a single task while still keep a sense of context and idea of where they are and what they have to do.
Below is the stacked side pane interaction in action.
4 / Test
We started with the tests early in the process. After the first low-fi wireframe, we understood we have an issue with the layout and problems with information discovery. Observing how people operate with our interface helped us fix the underlying issues.
We tested lots of color combinations and appearances with various user groups with different disabilities when we explored the colors and styles.
With Heron’s team testing, we validated the idea of the Stacked Side Pane interaction. It confirmed our belief that segmenting the actions brings simplicity and ease of use.
- A robust desktop/mobile software system that improves how Heron staff manages their business.
- We converted tedious and lengthy to fill mortgage form into a smooth user journey with a delightful experience, which leads to more successful mortgage applications.
- A flexible user interface that works on desktop and mobile with minimum experience differences.
What we learned
- Communication is essential. Communicate early, communicate more. We had almost daily meetings that kept everybody engaged and on the same page.
- Think hard at the beginning pays back later. The extensive research, analysis, and brainstorming, we did help us make the right decisions early and move the project forward pretty quickly.
Next is more usability testing, which will lead to more optimizations. The flexible design system and interaction models implemented, allow Heron to add new features, and to scale the application quickly. After the MVP, we’ll create new modules and functionality to support the Heron’s evolving business.