How might we create an effective, efficient and painless process for automotive refinancing conversions?
How might we create an effective, efficient and painless process for automotive refinancing conversions?
Auto Approve Engine 2.0: Auto refinancing team management and customer service platform
Auto Approve Engine 2.0: Auto refinancing team management and customer service platform
Most of Auto Approve‘s profits come from their service sales. Their old software, Approve Engine 1.0, was designed by a previous agency to meet sales goals. However, the team at K+C observed that the existing product UI was not intuitive and its UX was poor, thus, AA wasn’t meeting their desired metrics outcomes and planned business scaling was blocked. We asked ourselves: “How might we improve the product so that loan consultants are more successful selecting the right warranty option for their customers and, therefore, increase sales?”
Client
Sector
Agency
Challenge
Auto Approve’s loan agents are struggling with conversion, drop-off, and customer satisfaction.
My Role(s)
UX Design, User Research & Testing, Prototyping, Client Demos
Project Objective
Auto Approve’s Approve Engine 1.0 required an extensive redesign to boost key business metrics that were in decline. The software was bloated, confusing and causing too many blockers for AA agents to get their work done efficiently, frustrating both them and their customers. The main business goal was to increase lead conversion. 🚀
The legacy software underwent an in-depth UX audit to surface user pain-points and areas for improvements and opportunities.
During the lead profile audit, we worked out where each step was in the process, so that we could better organize and streamline the loan agent workflow. This produced our lovely audit map:
If that hasn’t already sufficiently scared you, take a look at this:
The existing system was so overly complex and outdated, to the point that loan agents relied on physical worksheets to navigate the process. This presented a clear opportunity for improvement. By embedding structured guidance directly into the software, we could streamline the workflow, reducing cognitive load through intuitive form fields, clearly defined required steps, contextual help text, and constructive error messaging.
RESEARCH & USER TYPES
Auto Approve’s basic processes involved finding and converting leads, using various lead sources (such as their largest sources LendingTree and MailerList, as well as from referrals, for example). Leads also had statuses (such as new lead or hot lead), depending on where they were in the contact or conversion stage. 💭
Our team mapped out several user and process flows to begin our feature planning. We started by understanding the fundamental workflows of loan consultants, loan processors and loan support specialists, the main roles of agents within this discipline of Auto Approve’s business services. Within these roles, there were also managers, who needed their own custom approaches to govern their teams.
🧑🏻💻 User Roles:
- Loan consultant: 🔄 Responsible for assisting customers with initial automotive loan and refinancing decisions (converting leads)
- Loan processor: ✍️ Responsible for auditing the deal, handling documents and forms
- Loan support specialist: 🔍 Responsible for assisting LCs and LPs in quality assurance of the deal
- Managers: 📋 Govern and manage their team of LCs, LPs and LSSs.
DESIGN
👯♀️ DESIGN TEAM
When I started on this project, we were given initial wireframes done by another company, which the AA team did not continue to work with. These wireframes were rudimentary, and did not provide any solutions the client was looking for. We basically scrapped these and started over from scratch, referencing the old AE 1.0 to make a sitemap, user comments and feedback, and UX best practices to build out the proper framework we needed. I lead Mariella and Gadiel, with oversight from UX Principals JB and Christian (the latter who joined the project briefly during a rough transition period of staffing), in putting together greyscale wireframes. Our UX Researcher Katie provided a lot of user insights that guided this process.
A lot of our focus was on really nailing down the lead profile, since this was the meat 🍖 of the product – the main stage for the loan agents to convert leads into customers. We initially divided the process into four stages: Lead, Qualifying, Application, and Processing.
We leveraged existing users to test our work against, iterating on their feedback and addressing their many concerns with AE 1.0.
The following are some early versions of an agent’s possible workflow, including a lead profile, the lead management page, and the agent management pages.
HI-FI Mockups & Prototyping
We built Approve Engine 2.0 using Material UI, customizing where needed (brand colors, fonts, and some custom component solutions – Ring Central 📞 integrations and stipulations cards, for example).
This allowed quick design iteration and dev implementation.
If we ever made a custom component, it was well documented within Figma and Jira/Confluence.
Lead Profile
The Lead Profile is the bread 🍞 & butter 🧈 of Approve Engine 2.0 – where all the magic happens. This is where the loan consultant, loan support specialist and loan processor can see all the potential customer’s information at a glance and complete their processes for lead conversion. We had to make a product that captured the relevant information while not being overwhelming so as to block an agent’s progress or unnecessarily bloat their time on task. ⏱️
The main header contains the most valuable info – lead name, car and loan specs, as well as lending information.
Then, we tabbed the application process into stages – Pre-Qual, Deal Structure, and Processing. There is also a side panel/drawer for documents/stips management as well as for communicating with the customer and with fellow loan agents.
Lead Profile
The Lead Profile is the bread & butter of Approve Engine 2.0 – where all the magic happens. This is where the loan consultant, loan support specialist and loan processor can see all the potential customer’s information at a glance and complete their processes for lead conversion. We had to make a product that captured the relevant information while not being overwhelming so as to block an agent’s progress or unnecessarily bloat their time on task. ⏱️
The main header contains the most valuable info – lead name, car and loan specs, as well as lending information.
Then, we tabbed the application process into stages – Pre-Qual, Deal Structure, and Processing. There is also a side panel/drawer for documents/stips management as well as for communicating with the customer and with fellow loan agents.
Lead Profile - Pre-Qualification stage
The pre-qualification stage is where the loan consultant gathers all their client’s preliminary data as an initial step towards making sure they meet requirements for auto refinancing.
During this workflow, the LC will usually be on call with the client, filling out their data for them over the phone ☎️ through integration with Ring Central.
We designed pop-up toasts to show this integration and built out log-in screens as well.
Side Drawer
Loan consultants, loan processors and loan support specialists all have a vast amount of tasks they have to do and manage to complete a customer’s profile and auto refinancing processes. I had the idea to put a lot of these processes into a centralized drawer.
❓Problem statement: As an LC or other AA Agent, I want all features of Lead Profile management to be curated in a dedicated space that allows me to work within a lead’s Personal information at the same time as being able to access that lead’s activity log, customer stips, communication, notes, reminders, and assigned team members.
Key Objectives:
1️⃣ Organize the required Lead Profile features in a cohesive and productive way so an AA Agent can access the customer’s Pre-Qualification details or Deal Structure simultaneously
2️⃣ Provide an affordance for the AA Agent so they can easily see if a certain feature has a notification that requires their attention
3️⃣ Consider common breakpoints and design for the best experience for a typical AA Agent
Prototype showing the use of the side drawer communications section
Documents and Stips
One big roadblock for loan agents was collecting required documents and stipulations from the customer. The old process relied on customers to email the agent directly, and the agent would download and upload the files to the software. This method often caused files to be lost, or uploaded accidentally to the wrong users.
We reduced this flow and eliminated these errors by creating a way for the loan agent to simply send a “File Request” link to the customer through the communications drawer, having the customer upload their files to a Box link that would automatically link their stips to their profile. Easy peasy! The LSS would then merely need to review stips in the customer profile for accuracy.
Box integration saved the loan agents a lot of time and effort requesting docs from customers.
Credit Report Pull
In order to pull a customer’s credit report, the loan consultant is required to get their consent. 🙆♂️
They first read an authorization script to the customer, then manually confirm they have done so by checking the confirmation line.
After that, the SSN field populates, prompting the LC to gather it from the customer. Once entered, the report can be pulled. There are several bureaus the agent can pull from, including TransUnion, Equifax or Experian.
The report has to be manually pulled each time for a specific bureau, with the customer’s consent so that the agent isn’t running more checks than the customer wants them to.
Deal Structure
After the Pre-Qualification stage, where a loan consultant collects the basic customer data, they move on to the Deal Structure. This is where the LC finds the best deal for their customer, saving them precious money! (And increasing profits for Auto Approve in the process.) 💰
Deal Structure
After the Pre-Qualification stage, where a loan consultant collects the basic customer data, they move on to the Deal Structure. This is where the LC finds the best deal for their customer, saving them precious money! (And increasing profits for Auto Approve in the process.) 💰
Manager Desk
The manager desk provides AA managers a place for team management. They can review active or inactive team members and apply filters to find their required agents.
Manager Desk
The manager desk provides AA managers a place for team management. They can review active or inactive team members and apply filters to find their required agents.
Key Metrics
Auto Approve’s main goal was to convert leads to customers. They tracked leads through various sources, with the goal of increasing these conversions and overall customer satisfaction. 😊👍
We could boost these numbers by making the conversion process as easy and efficient as possible for AA agents, and in turn, their clients as well.
Flair
Providing a detail-oriented, fully fleshed out product was a point of pride for our team. We took extra care to document our design features for developers by providing explanations for error states, active states and custom components. We also made sure to build in custom loading scrims and missing pages as well. You can see a few examples of that below.
Outcome
Overall, Approve Engine 2.0 was a marked improvement over their first implementation.
Our client loved our work and could easily see how it improved their agents’ workflows and time on task metrics.
The testing we did among users proved successful and many agreed they were more productive on the new engine.
