Built a Mobile Finance Calculator Prototype for CarGurus’ 45M+ Monthly Users

CarGurus finance calculator

CarGurus is one of the largest online automotive marketplaces in the U.S. I collaborated with teammates on research and served as lead designer for a Mobile Finance Calculator, creating the primary wireframes in Figma and builing the final prototype with Lovable.

Visit Site

9

Concepts explored
(led to Finance Calculator)

2

Pain points addressed
(transparency & efficiency)

1

Deployed prototype
(handed off to CarGurus)

CarGurus finance calculator in action
Finance Calculator Prototype

Problem

Few buyers used the CarGurus app at dealerships, revealing an opportunity to design a new use case for mobile users. We also discovered buyers struggled with hidden fees and confusing financing paperwork at dealerships.

Unclear icon

Lack of information transparency

80% of buyers said hidden fees and unclear pricing caused major stress

Missing icon

Slow and difficult negotiation process

Confusing paperwork left only 9.7% of buyers confident they got the best deal

Lack icon

Outdated tools with no customization

Generic calculators and undetailed listings failed to show true out-the-door cost

Car buyers order process 1
Buyers Order A
Thumbs down icon

Multiple handwritten payment options made it unclear which cost was final

Thumbs down icon

Key numbers like trade-in, cash down, and price were scattered across different boxes

Car buyers order process 2
Buyers Order B
Thumbs down icon

Dense text and itemized fees overwhelmed buyers with too many numbers

Thumbs down icon

Total sale price was buried, making it hard to find the real out-the-door cost

Goal

How might we empower buyers with clear financing information and motivate them to use the CarGurus app at dealerships, while still supporting dealer relationships?

1

Provide transparent cost estimates

2

Simplify financing steps and paperwork

3

Build and maintain trust with buyers & dealers

Solution

After exploring 9 different concepts, we built a Finance Calculator prototype that gives buyers a clear breakdown of all costs, boosting confidence during onsite negotiations. I led the design direction through several iterations in Figma and developed the final prototype with Lovable.

Prototype available upon request

01 - Finance Customization

Select and compare financing options

A clear entry point where buyers choose dealer financing, outside loan, or cash, giving them control over how to structure their deal and start estimating with confidence.

Finance customization screenshot 1 Finance customization screenshot 2 Finance customization screenshot 3

02 - Cost Breakdown

View all hidden fees and calculations

A receipt-style breakdown of taxes, fees, and dealer add-ons that replaces scattered paperwork with one transparent view, reducing confusion and hidden cost stress.

Cost breakdown screenshot 1 Cost breakdown screenshot 2 Cost breakdown screenshot 3

03 - Estimate Summary

Prepare for dealer negotiations confidently

A summarized cost and monthly payment range that buyers can save or share, helping them enter negotiations informed and reducing decision fatigue at the dealership.

Estimate summary screenshot 1 Estimate summary screenshot 2 Estimate summary screenshot 3

Takeaways

I learned how far AI tools can be pushed and where they break. Using Lovable to build from just prompting showed me the importance of context in guiding outputs, and that the final 10% of polish requires the most effort.

Future iterations could expand features and strengthen trust. If I had more time, I would manually refine the last 10% of the design, build out leasing flows, and collaborate with dealers on incentives that preserve trust.