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 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 UX audit and 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:
🚀 Increase lead conversion
How might we accomplish increasing this metric through platform and process improvements?
Challenges & Opportunities
⌛ Existing software
We already had the existing Approve Engine 1.0, built by an outside agency, to reference. This came with pros and cons, believe it or not:
Pros:
Pros:
Framework: A lot of the features and information we needed was already there, and (if we were lucky🍀) just needed to be rearranged, clarified, or reordered.
User-base: Existing agents already had familiarity with using enterprise software to pursue and convert leads. ♻️ We could also leverage these users in user interviews and testing.
Brand identity: Auto Approve had an established visual identity we could work from, meaning we didn’t have to worry about introducing too many new visual design elements. 🚗
Cons:
Cons:
It’s a Trap!: We had to make sure we wouldn’t fall into the trap of leaving current features “as is”, since they already existed and users were familiar with them already. We couldn’t just copy and paste from AE 1.0 and slap a shiny new label on our product. 💄🐖 Were these features and user journeys truly the best they could be? Also, on the flip-side, we didn’t want to change anything just for the sake of changing anything. If it already worked, why reinvent the wheel? This was a delicate balance.
User-base: A double-edged sword. We had experienced users we could interview and test, which is an amazing resource. At the same time, these users could be stuck in their ways. “I know how to do it this way, why change it?” 🙅 We had to convince them through our data analysis that our methods would actually be an improvement to their workflow (with just a little adjustment to doing things a new way!)
💸 Lots of complicated financial lingo
What the heck is a loan processor vs a loan consultant? What is an LTV, DTI, PTI? Am I just making up acronyms? 🤷 I had to learn a lot of financial terms I wasn’t very familiar with, differentiating them and understanding their nuances.
🌎 Remote, multi-national team
I worked remotely from Virginia at this time, with a client based in the Midwest, a main team (including Design Lead and product team) based in Colorado and California, and design peers, developers and engineers based in Mexico, Peru, Brazil, Argentina and more. This meant A LOT of coordination amongst about a bajillion different timezones between us for team meetings and client demos. However, I also got to brush up a little on my Spanish and Portuguese slang terms, which was fun. ¡Felicidades! 🍻
Research & Requirements Gathering
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.
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.
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.
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
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.
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.
