Mortgage
recommendation guide
Habito | Internal Tools | Mid 2020 - Early 2021Overview
The project's overarching aim was to increase the operational efficiency of Habito’s Mortgage Experts (referred to more generally as Brokers) by improving their tools.
As Habito had scaled, the internal systems were mainly produced solely by engineers to fit a new need in a short space of time. This project was one of the first where our back office tools would be given the same UX rigor as the customer-facing journey.
About Habito
Habito is a digital service designed to make the home-buying experience as painless as possible. The core mission is to match customers with their perfect mortgage and take care of the rest of the legal process of buying a home.
When customers sign up to Habito they fill in some information about their situation and are then matched with a mortgage expert. The expert reviews the case then finds a deal using the internal tools.
This project was centered around that first interaction and conversation with a mortgage expert and the view of a customer's case.
The team
As the newly embedded designer within the Brokerage Operations crew, I lead the project from discovery to delivery.
This was the first large and complex project we had worked on during COVID-19. Getting used to fully remote working methods proved a challenge initially. Still, with a high-functioning team, regular communication practices, and documentation, this became one of the most smoothly delivered projects for some time at Habito.
Brokerage Operations team
Paolo Riozzi
Lead Product DesignerChristine Lejenue
Senior Product ManagerBastien Louërat
Senior EngineerWill Rhind
Head of Mortgage Advice
Our users
The primary user and key stakeholder for this project were our team of mortgage experts. The team is 20-30 strong, and they are a crucial part of the customer journey at Habito. Aside from our support team they are typically the first human they interact with in the experience.
Each one of them is trained and qualified as a financial advisor. The advice they give to customers is regulated by the Financial Conduct Authority and audited by our internal compliance team.
Existing tool and main actions
Below represents a simple breakdown of the existing ‘Customer Details‘ view in the back office, this is the view that we would improve with this project.
Key actions;
Assign themselves to a case as a new customer is sent to them via intercom
Review customer details in the scorecard view
Update any information that could be missing, incomplete, or contains errors
Findings
Disparate information, a 'long way to travel'
We lacked a compact clear, triaged view of customer data.
A lot of effort to investigate while keeping customer engaged
The data could contain flags for things that need to raised with the customer as a priority
Things are manual
Continue to build more automated/more accessible ways of getting the customer to the next step easily and smoothly.
Lots of tools, none is the master
By nature of the workflow tool, it should be the central tool, replacing all others in the long term.
I produced a user flow the visualise the mortgage experts general process for you typical case. The red areas highlight where most of the effort is involved, with the yellow highlighting the customer outcomes or the goal of each interaction.
Research themes and user stories
Speed of workflow & interactions
As a mortgage expert…
I want to see the high-level information about a customer quickly so that I can start a relevant conversation about their situation.As a mortgage expert…
I want our tools to be fast and reliable so that it doesn’t slow down my ability to serve our customers well.
Data & reliability
As a mortgage expert…
I want to see clearly all the ‘red flags’ on a customer's case so that I can make sure I raise them quickly
Design principles
1. Get context, fast
Fast comprehension of the most relevant data, make data visual where possible minimise cognitive effort on consuming it
2. Be action orientated
Remove any obstacles to enable the user to take relevant action as efficiently as possible, use visual cues and interaction patterns that speed up decision making. Useful actions should be seeded throughout the experience.
3. Show what matters most
Remove extraenous information show data and most relevant or critical pieces of information
Goal definition
To increase efficiency in getting customers to a mortgage recommendation accepted.
To decrease our 'Cost To Serve' metric by reducing the length of time needed with a customer to make the initial recommendation.
Early explorations
The operations team lead and product manager came up with some early concepts to illustrate what was in their heads, this helped me to grasp the type of view they felt would be useful. It also helped to information architecture needed to support it the tool.
Realizing the enormity of the task and the range of complexities in mapping the data, I explored a lean option in the early stages to see if we could build something small that only handled flagged data rather than replaying the entirety of a customer case.
While this would be easier to deliver, the team and our stakeholders felt this might be too simplistic and not get to the heart of the deeper problem we were trying to address. We decided to absorb the effort and cost of redesigning the view from the ground up.
Initial concepts
With a clear list of defined problems, goals and user needs I began working on wireframe concepts for the new tools.
Concept 1
Improving the customer details page as it is but significantly enhancing the scorecard and the form interactions.
Demonstrating how the tool could scale in the future to give a comprehensive overview of the case and incorporate other tools such as affordability.
Concept 2
Show the high-level customer flags only then focus more on the next actions on the case.
The actions would comprise items that needed investigation with the customer or data that needed to be updated such as;
High debt to income ratio
Unusual features such as a prefer for an ‘interest only’ mortgage
Missing fields
Stakeholder feedback
Design reviews and critiques were held over Zoom using Google Jamboards as the medium to capture feedback. I facilitated feedback sessions with Mortgage Experts, VP of Operations, Chief Operating Officer, Engineering team, and the design team to reach a consensus.
We decided to develop concept one further as it would constitute a less major change to the operations team's existing workflow.
Google Jamboard’s with stakeholder feedback
Defining the MVP
We needed to pair back the concept to something that would be feasible to deliver within a couple of months and start to deliver value for the mortgage experts.
What we would deliver;
Improve the customer details scorecard
Re-order the data into a view that was chunked out and easier to process visually.
Remap customer data collected to a new ‘Recommendation API’ service
An engineering-focused objective and essential to delivering the new tool. This would be reusable for future projects by many teams.
Improve the form experience
In a similar vain to the scorecard; re-order the data to be easier to process and improve the UX to make it easier to navigate.
A dedicated view of customer debt
This was a frequent request in research and one we were able to add at the end of the project with relative easy due to the improved data mapping
What we wouldn’t deliver;
Task workflows
As desirable as the feature would be it was deemed to complicated to deliver in a first version. The work done to map our customer data would unlock this as an opportunity later.
Improving the scorecard
The scorecard is the first view of the case the mortgage expert sees, the pain points observed are detailed here;
Lots of useful information is missing
Poor information hierachy and taxonomies
Visually unbalanced
The existing scorecard
Customer data flags
One feature that came up consistently in feedback sessions was the notion of flags on customer data to quickly let the expert know what needed attention on a case.
We worked with our experts to develop a RAG system to map which fields required flags and the threshold values to visualize the alerts.
A tracking doc to capture the RAG status for data flags
Design iterations
Early exploration of the scorecard
Further iteration exploration of the scorecard applying more structure
Final iteration of the scorecard
Improving the form experience
Pain points and areas for improvementl
Long distance to travel, producing high interaction cost
We wanted to condense the form where we could
Polluted view with lots of irrelevant fields
Poor labelling, error handling and information hierachy increasing chance of human error
Auditing the form
We knew from research that many fields in the form were rarely updated such as basic information around personal details. We gathered data to determine which fields were frequently updated. Once we identified fields that were rarely updated we put them into a read-view format with the option to update the info via modal. This saved space and condensed the form considerably.
Example view of data and design translations
The final design
Before and after of Personal Details section
Before and after of Transaction section
Before and after of Employment section
User Testing
Testing an internal tool that required real live data to test its robustness and usability was not the most straightforward task.
How we approached it
Ran sample live cases with odd circumstances through the Figma design, this helped uncover missing fields or display issues.
Prototyped the form interactions and tested with experts
Shipped the scorecard incrementally so Ops Team Leads could view live customer details and report issues before we had shipped to everyone.
Added a link to a google feedback form from the go live so we could track issues and respond quickly.
What they said…
In general, Operations need time to get used to new tools and workflow changes. Typically they receive a frosty reception until they warm up to how they work.
We received several requests for additional fields to be displayed in the scorecard
They wanted more visual contrast around the scorecard, the level of whitespace made it hard for them to focus on the data
They requested a dedicated view of customer debt beneath the scorecard as a faster reference than the form. We were able to accommodate this relatively quickly for them in the first version.
The final iteration
Development Handoff
Due to the new remote ways of working, it was important to document the hand-off for each of the deliverables in good detail. This gave the engineers as much context as was reasonable to start their work.
There were of course frequent questions to be answered and we mostly dealt with these in team refinement, ad-hoc zoom calls, or slack conversations.
Summary
Reflections on the project
All-in-all, this project took roughly nine months to deliver. This was mostly due to the extensive data mapping work required. Each field had to be understood in the context of 6 - 7 different types of home purchase or remortgage transactions.
The team developed strong working relationships, processes, and documentation practices during the project. Many of the performance learnings were carried over to other crews afterward as a model of excellence.
It was one of the most complex projects I’ve been involved with and the most highly motivated teams I’ve had the pleasure to work with.
Impact
It is hard to quantify the direct impact of this tool on the performance of the operational tool, particularly during the tumultuous landscape of COVID-19.
There are so many variables in a Mortgage Experts’ workflow, and each one works differently.
We saw record numbers of recommendations and mortgage submissions during the months proceeding to the launch of the recommendation guide.
This tool undoubtedly improved the efficiency of dealing with record-breaking application volumes.
What happened next
We continued to build on this new tool by adding an automated mortgage recommendation feature, which lets the expert know the best type of product for the customer.
We continue to refine the design and add new fields and features requested from our experts via a dedicated feedback channel in slack.