CALCULATOR
RELAUNCH
Online Finances made simple.
SHORTS
Client
heycar group
Duration
6 month
My Role
Concept & Design Lead
INTRO 💻
As an integral part of the automotive industry, one of heycar’s fundamental business models involves collaborating with OEMs (Original Equipment Manufacturers), such as Volkswagen Bank, to cater to customers‘ financing needs. A pivotal user touchpoint in this regard is the financing calculator, which was still at its initial version when the project commenced. Our primary objective was to boost our share of financing leads by enhancing the accessibility of our financing calculator and fortifying our financing journey.
INITIAL SITUATION
Share of Leads
~ 20% Fincancing Leads
Research
0 usability research
Architecture
FE & BE act seperately
STARTING POINT
Within the financing section, users can customize their preferred financing terms and initiate the financing application process.
Previously, it did not fully utilize the available width on larger viewports and was designed primarily as a translation of backend responses rather than a fully designed product.
RESERACH 🔬
My first step was to gauge the current user perception of the initial calculator integration and their comprehension of the available options. Users were directed to heycar and tasked with finding a car for financing and completing the financing application.
Additional questions about their financing knowledge and preferences were used to gain further insights.
THE SETUP
10
Total participants
55
Years of average age
7
Days of testing and evaluating
PAIN POINTS
The calculator didn’t fit the viewport, causing excessive scrolling, overlooking the CTA, and confusion.
The scrolling sidebar overloaded the desktop with multiple CTAs, including messages, calls, and financing.
We lacked clear explanations for financing products and an effective overview.
Some users had trouble identifying the CTAs, and some were unsure of their destination.
In general, the calculator’s design appeared chaotic, making it challenging for users to distinguish key information.
PRODUCT PRINCIPLES
LEARNINGS & DESIGN BRIEF
Understanding drives usage.
Users don’t use what they don’t understand. We should explain what’s not understood.
Users need clear focus.
Too many options to choose from lead to not choosing any at all.
Users need hierarchies.
Just throwing inputs on them causes overwhelming. We should sort them.
Users need transparency.
Unclear financing overview can be even considered as fraud. We have to give it order.
Users need guidance.
Only a clear CTA will be recognized and announce the further journey.
Now we knew where we had to improve not only the design, but the whole product in general.
Let’s get our hands dirty!
DESIGN EXPLORATION
Throughout the design process, several UI approaches were tested, ranging from implementations such as overlays over slidable tiles to various UI elements like toggles, input fields, and info buttons.
DESKTOP FULL WIDTH
Optimizing space improves focus. In the previous desktop version, the calculator utilized only 2/3 of the page’s width due to a sticky sidebar for the main CTAs. The current full-width calculator reduces confusion and enhances the focus on the financing application.
EXPLANATORY TILES
We reduce conversion barriers by providing clear explanations of the available options.
Financing and upselling products now feature concise explanations within the selectable tiles. For those seeking more information, users can explore additional details through overlays accessed via prominent text links.
CLEAR CTA & JOURNEY
The CTA has undergone a transformation. Users now consistently see the total costs, as the CTA automatically presents the monthly rate and duration, adapting with each interaction. On mobile devices, the button remains visible as long as the calculator is within the viewport, ensuring a singular focus on the financing application.
Upon clicking, the user is directed to a user-friendly form that conveniently displays their previously entered financing information, enhancing transparency.
TRANSPARENT OVERVIEW
What you see is what you get – the financing overview has been thoroughly restructured to offer maximum transparency. Each item is now logically arranged, much like an invoice, making it easy to understand the precise calculations. Furthermore, all items automatically adapt to each user interaction in the calculator, encouraging users to explore and discover their desired conditions with ease.
VALIDATION BY RESEARCH
To ensure that the implemented changes deliver the desired improvements prior to the final launch, we repeated the same user test used to identify pain points in the old calculator. Just as before, users were assigned the task of searching for a car to finance and completing the financing application. However, this time, the testing environment was not yet live.
SETUP
13
Total participants
34
Years of average age
8
Days of testing and evaluating
POSITIVE
KEY INSIGHTS
„Applying for a finance is easy. Took me just about a minute.“
„I can see all of my totals costs on one sight.“
The introduction of new elements was well-received and positively influenced users‘ perception of the calculator. Additionally, the explanatory tiles were deemed helpful, leading to an enhanced overall understanding of the tool.
Notably, on mobile devices, users appreciated the guidance provided by the different sections and the permanent visibility of the CTA. They also liked interacting with the calculator and grasped the concept of user interaction resulting in a changing CTA.
Furthermore, the financing overview received high praise for its transparency in displaying all associated costs.
Negative feedback primarily highlighted minor issues that were addressed later for improvement. Biggest issue was the scrolling behavior on desktop, causing confusion as users didn’t realize they were still on the same.
Additionally, some wording and copy needed optimization for better product understanding.
THINGS TO IMPROVE
“I am bit confused now where I am. I did not click leaving the site.”
About me
I am a Designer at heart with over 12 years of experience. I am dedicated to creating well-crafted products that inspire users, customers, and brands.
Vita
Discover my journey from a passionate design enthusiast to becoming an expert in Design and Product.
Questions?
Send me a message!
Meet me
Click here to set a meeting.
Call me
+49 176 676 606 10
Write me
martin.thiel.berlin@gmail.com