CAR COST CALCULATOR

view prototype
What I did
UX Research
Wireframing
Responsive design
User Testing
Prototyping
time
March 2022
5 months
180 hours
Team
Me
Client
Tools
Figma/FigJam
Zeroheight
Whimsical
Photoshop
About HoppyGo
HoppyGo is an open car sharing platform, allowing car owners to safely rent their vehicles when they don’t need them. And those that don’t own a car or need a different one can easily rent one.
With more than 100 000 users and 2 300 vehicles, the HoppyGo platform is the biggest player in the car sharing market within Central Europe and has been successfully changing the car ownership status quo.
Background
The client published a blog article where they explained what the running costs of car were and how surprisingly high they might be.
This article gained lot of visits and sprung an idea to provide people with a tool which would help people to calculate their running cost in an easy and understandable way in form of calculator.
Client brief
Design calculators that help people count running cost of their car and shows how high the operational cost of car could get.
Project goals: High-Level Objectives
Brand building and brand awareness
The page with calculators will be shared with thematically related media as automotive, finance, lifestyle, but also with institutions that deal with financial literacy to educate people about the operational cost of a car.
Get registration of car owners
To introduce them to HoppyGo as an option how to save money on running cost of their car.
Problem statement
Due to a lack of awareness about operation car costs, the car owners underestimate the height of the operational car costs and thus lose money by having their car sitting in the garage unused.
Research strategy
The client has done very basic research in the past which they shared with me. On top of that, I suggested to do a market research to explore how the topic of “car running costs” was integrated in the communication on the websites of our competitors.
Objectives
1
Find out what were the main motives and fears of people who registered their car on the platform.
2
Determine what role the operational cost of car play in overall willingness to share the car on the platform HoppyGo.
3
Explore how other subjects communicate car cost
4
Find out how people perceive operational cost of their car
Methodologies
Surveys
The surveys were carried out with current users registered on the platform and aimed to explore motives and fears related to usage of the platform.
Market research
There are plenty subjects communicating operational cost of a car in form of calculator. I focused on exploring the angle how the calculator was done and witch features and functionalities were present.
Surveys
There were two surveys which the client provided,  I used affinity mapping to analyze them and based on the goals of the research and tried to derive some patterns and insights.
Key findings
People are using HoppyGo more as chance to make money than save money.  To make money is more important for the active users than to save it.
Based on the data from the survey, the cost of car or potential money made, weren’t the main motives to register on HoppyGo, but they played significant role worth exploring.
How did others communicate running costs of car on their websites?
As my client didn’t have any detailed data on how operational cost were communicated across the web, I researched the web looking for any other subjects which communicated “operational car costs” in form of calculator.
I found two kinds of companies/websites:
1. similar companies operating abroad (like Turo, Amovens, GetAround etc.) and
2. local financial portals or indirect competitors (mainly focused on finances) which in very detailed way, uncovered every possible item which could be considered as car operational cost.
Market research: Key findings
Similar companies abroad and indirect competitors communicate “How much people can EARN” on their calculators instead of how much you can save with the service.
Turo and Carnextdoor focus on a business potential of renting the car.
Simplicity of calculator
Similar companies abroad use a simple version of calculator with at max 4 fields to be filled in by user, no advanced options.
They use pop-up windows to explain where they explain how the result number was calculated
Period of time
They provide aggregated values of how much a given model of car can make if rented for some given time
GetAround, Amovens communicate how much you can make in a month, HoppyGo aggregates it in a year.
Benchmarking
Only Turo communicates the top earning cars and the most popular cars
Defining the user
I analyzed the surveys provided by client and based on the goals of the research and tried to derive some patterns and insights which would help me to understand what the needs and pains of the user could be.
Since I don’t fully use my car and it stands in my garage, I would like to rent it and make some money with it.
Karel, 30
Karel comes from South Bohemia. After graduating from university he stayed in Prague as he got a job there. On weekends, he travels outside of Prague, but during the week he has no need for his car.
As the highest cost of having a car he considers petrol and regular service - he neglects the fact of depreciation which is incomprehensible to him.
He would register his car on HoppyGo, but he is quite worried about the car being damaged. Furthermore, he is not sure  how much it would pay off.
His awareness about the operational car costs
quite low
Pain points
He is worried his car would get damaged
The calculation of the car running costs is too complicated
He is unsure how much it would pay off to rent his car
goals
To make money
To be 100% sure his car won't be returned damaged
The main functionalities of the calculator
Having all the data gathered and analyzed, I created a set of features to be included in the calculator. Closely examining the research data and after a discussion with my client, we assigned each feature a priority and decided to start designing having the high priority features strongly in mind.
Deciding the level of detail
As the research uncovered two different poles of level of detail of the calculators, we had to revisit the goals of the project and decide about the complexity of our calculator.
Reflecting the business goals and user needs discovered in the research, I recommended to have two versions of the calculator: basic version and advanced version.

First High-fidelity Wireframes
As the client has been on the market for some time, I was briefed to use the current website (www.hoppygo.com) to derive the appearance of the elements and for not defined features look into the new work-in-progress design system. (At the moment of working on the project, the client was just in process of redesign of their entire website and establishing design system.)I used all the provided assets above and jumped straight into creating wireframes in high-fidelity.
1. basic calculator
To offer the result very quickly to people who are not particularly interested in what the running costs are.
2. advanced calculator
Where people will be able to edit some of the fields to get more tailored result.
‍
Iterations: bringing designs to the perfection
Over span of 3 months, I was getting feedback from the client, so I iterated on the designs until the client was happy. You can find some of the comments are requirements below:
1
The value of the comparison line wasn't that big either for user or for the client, so it was decided to remove it.
2
Based on the development resources and seeing how the project was shaping, the client decided to design only one calculator.
One of the outcomes of the research was a difference in people’s perceptions of words “make money” and “save money” in relations to car costs. To factor this in, I initially suggested to design three different calculators and three different personas and projects. Considering the development costs and the research outcome, I suggested to design just one which would primarily focus on communicating running cost. That being said, I removed the menu on the top of the page and replaced it by a photo which was coherent with the style guide.
3
There was a need to communicate what the running costs consist of
Based on the presentation of the design to stakeholders, there was an important comment on the way the results of the calculator are presented. They wanted to show that operational car costs aren't just fuel, but other more important items, right in the result box of the basic calculator
4
Changes in the algorithm of calculator
The client decided to have more fields in the basic version of calculator.
1. basic calculator
2. advanced calculator
Final version of High-fidelity Designs
There are two possible ways how visitor can get to the goal (Find out more about HoppyGo for car owners.):
1. thought basic calculator
2. through advanced calculator
1. basic calculator
In the basic version of calculator, people can very quickly find out how much the operating costs of their car are. They only fill in 3 basic fields and get the results. Right after that, they are encouraged to scroll down to learn more about how to save some of the costs by registering on HoppyGo.
There is an option to chose the time period at each input of calculator which’s unit of measure is time. People save their time and effort calculating everything in their heads, they just enter the number in the time period which works for them.
To set off the height of the running costs, we provided people with an option to see how much the running costs are for a month or an entire year.
We displayed the running costs into two sections as we wanted people to realize that operational costs aren't just fuel but they consist of other items which could be found explained in the advanced calculator.
We are providing people with an example how much thy can make by renting they car on HoppyGo and inviting them to find out more detailed information.
People can fill in the numbers and get more tailored estimate how much they would make if they rent their car on HoppyGo.
Based on the numbers which people entered on the left, they will get an estimation how much they could make. The result is broken up into covered/saved costs and extra money they could make.
2. advanced calculator
The main goal of the advanced calculator is to provide people with detailed breakdown what exactly the running costs are and give them an option to make some edits to get numbers which are more tailored to their car.
Setting the expectations and providing with an explanation how to use the advanced calculator.
There is option to chose the time period at each input of calculator which’s unit of measure is time. People save their time and effort calculating everything in their heads, they just enter the number in the time period which works for them.
Depreciation is the most important part of running costs but only little people is aware how substantial amount they “pay” or loose by just owning the car.  Based on the data from the research, we decided to leave the explanation open without having have to hover over info icon.
As the researched showed, people don’t know that exactly running costs are, thus we implemented info icons which will clarify what exactly is meant by each input.
User flow + Prototype
To get a sense what the possible scenarios and user journeys are, I put together user flow based on which I created detailed prototype that demonstrated the exact functionality of calculator to all stakeholders.
User Testing
Objectives
1
Identify if people understand how the car costs calculator works and uncover potential issues
2
Determine if the information presented in the calculator is comprehensive
3
Collect people’s overall impression of the website
Methodologies
Video calls – people shared their screens with me and I observed their actions.
Participants
4 people (car owners)
Test subject
high fidelity prototype in Figma
Findings of User testing
In the video calls with my testees, I gathered very valuable comments which I analyzed using affinity mapping which you can see here. From the user testing, I derived 9 key points which I presented client in the Figma slide deck. You can see few examples below:
Implemented changes
In the basic version of calculator, people can very quickly find out how much the operating costs of their car are. They only fill in 3 basic fields and get the results. Right after that, they are encouraged to scroll down to learn more about how to save some of the costs by registering on HoppyGo.
Before
After
Final designs
Together with client, it was established which action points were to implement and which to put on hold. The final designs below.
view prototype
Reflection
1
Define what happens when the data/materials provided by client aren’t sufficient
My client provided me with few surveys but after a thorough analysis, I found out that the data I was looking for weren’t sufficient so we worked on some assumptions made based on the numbers from Google Analytics. On the next project, I will clarify in advance what we do when the research data provided by the client won’t be sufficient.
2
Always check that the main message and goal didn’t get get lost in the design
My perfectionism to have a very polished UI design sometimes makes me forget why I am creating the designs at the first place. It’s very important always check if the main features are clearly presented and the main message is the most prominent element of the design.
3
Step away and test – users know more than you do!
Very often a quick feedback when work in progress from a stakeholder or user is more valuable then spending hours trying it figure out by yourself. So it’s better to step away and reach out for feedback and then get stuck on something for hours.
Thank you for reading
my workabout meLinkedin
© 2022 Sarka Kortanova
© 2022 Sarka Kortanova