Credit application redesign @Vroom
In order to help customers secure financing for their used car purchase completely online, I redesigned the Vroom Financing application form in the checkout flow. This resulted in a 40% reduction in form length and 6% increase in submission rate and submission success on mobile devices.
Time: 1.5 months (Aug 2021)
Role: Sole interaction/visual designer, collaborated with a team of PM, engineers and QA
Platform: Web (Desktop, Tablet & Mobile)
Release status: Live
Success metrics: Application submission rate, submission success rate
Prototype demo
Customers were hesitant to complete the credit application online, so they were calling customer support for help.
Funnel data
70% choose to finance with Vroom
46% unable to submit application successfully
40% highest drop off rate at one step
16% called customer support despite successful submission
Main reasons for calling
Page errored out/timed out
Unsure how to answer a question
Unhappy with the loan offer
Financing with Vroom is the major payment method and revenue driver for Vroom purchases. However, the credit application in the online checkout flow had major usability and navigation challenges, especially on mobile which accounted for 70% of total traffic. The copy was ambiguous, causing confusion. Tech debt and bugs caused by the outdated backend architecture was becoming unmanageable.
The goal of the redesign was to:
Empower customers to self serve through the app and enter information correctly, so that they could secure a good financing offer with Vroom and move along the checkout flow.
I spoke to stakeholders in engineering and business to understand how the application FE and BE pass application data between each other, as well as regulations in consumer financing.
I compared the main competitor (Carvana) and several analogous competitors (NerdWallet, LendingTree, SoFi). While the general financing application UX and flows were largely similar and should adhere closely to web form best practices, layout and visual treatment (e.g., trackers, sliders) granted some room for exploration. It should help ease the weight of a major financing move—some competitors achieve this by using a conversational tone and format.
Testing one at a time
PAIN POINTS The field labels were long and confusing, making customers input information that misaligned with their real situation.
Too many fields were displayed when actually unnecessary.
The form wasn’t accessible via keyboard navigation. Tap areas for checkboxes and tooltip icons were too small.
The overall visual design was outdated and failed to invoke a sense of trust.
DESIGN DECISIONSRewrite labels as concise phrases instead of full questions; also rework placeholders to set the right examples.
Set up conditional logic so that fields only showed up when relevant to particular answers to the previous question.
Use the latest design system components that were audited and implemented to meet accessibility standards.
Apply color, spacing and visual hierarchy thoughtfully to establish a confident and straightforward visual rhythm.
BEFOREAFTERI started playing with the “Employment and Income” section, the one with the highest drop-off rate. I was able to reduce its length by 40% on mobile.
This new version was A/B tested with the hypotheses that drop off rate and time spent on the section would decrease—and both were validated with statistically significant results.
At this point, I revisited the project scope with my team and decided that phase 1 should focus on the identified UX improvements and not pursue any new features or flows. This was for two reasons:
Time. Engineering needed to focus on refactoring the code (while also managing bugs) which was the biggest lift of all. This could also buy me some time to vet more ideas to prioritize for the next phase.
Constraint. Reliance on a third-party backend service meant that we didn’t have control over the questions and response options that must be included.
Mobile customers became more likely to submit application successfully
WIth confidence from initial experiment results, I paired up with engineering to review the validation rules for each field, the conditional logic, and treatment of edge cases. I also helped QA test out some of the dozens of possible flows and scenarios.
The result was a single-page application with sections all broken down into views, allowing customers to focus on one section at a time and avoiding expanding/collapsing and scrolling excessively with the accordion layout. The new design was faster to load and submission rate and submission success rate were ~6% higher on mobile devices. Interestingly, results on desktop were rather flat, perhaps because navigation and scrolling issues weren’t as major.
Next steps
I conducted user testing of the whole checkout process to understand what’s working and what’s not. Checkout had always been conceptualized as a linear, transactional experience, whereas findings showed that customers desired something more flexible that they would complete in multiple visits. I’ve been using these findings to challenge how we might envision a truly self-service checkout.
Specified error messages for each scenario to inform resubmissions. This included customer education tips on improving chance of approval.
Bring loan offer page in house. Loan offers were displayed in a third party iframe, creating a jarring experience. As Vroom acquired United Auto Credit (subprime auto lender), there was business viability to display at least one offer in a native format. This WIP explored an interim solution where the UAC offer was highlighted while the ‘More financing options’ button would launch the iframe.
Enable rehashing offers online. The credit application could only take one input each for down payment and term length to generate offers, yet customers usually had some flexibility and expressed desire to adjust these parameters to see how the monthly payment and financing breakdown would change. This could also become viable with UACC.
