carVertical: Running costs section
Design task completed for carVertical
I received an assignment from carVertical to create a new section for their vehicle report. The task was to design a Car Running Costs section - something that could help users better understand long-term ownership expenses and make more confident budgeting decisions.
carVertical - Home Assignment
Task is to design a new carVertical report section - Car running costs. Running costs is a feature designed to provide an overview of estimated annual car ownership costs in a specific country. The goal is to equip users with a realistic estimate of recurring car ownership costs to aid in purchasing and budgeting decisions.
Reference: use Sample Report as an example.
Scope: car running cost section (no need to design or change other sections).
Task time: up to 8 hours.
Please address the following in your solution:
- Find an option to allow users to specify their mileage per year or month, so the running costs information better reflects their individual usage.
- There are two cases. When we have costs and when we predict. We should indicate that.
- CO2 taxes should probably be included in the same section, even though there is a dedicated, more detailed section for it.
- Insurance cost.
- Other running costs? Freedom for suggestions.
Here’s my design approach.
My goal was to structure everything so the information is clear at a glance and doesn’t create uncertainty. Each card includes short explanations, and key interactive elements - the unit switcher and the monthly/yearly toggle - are visually highlighted so they’re easy to notice and interact with.
I followed carVertical’s existing design system, using their typography, spacing, components, and styling to make the new section blend naturally into the product.
The location is pre-filled based on the user’s IP address, but I left the option to change it manually.
If no data is provided, the card displays average monthly costs for the selected country. Once the user inputs their own mileage, the card instantly recalculates and presents a personalized estimate.
To avoid confusion, both the title and the description text change dynamically - clearly indicating whether the user is seeing general averages or their own calculated costs.
Below is how the section appears in the report.
Martynas Guliokas
Reach out
carVertical: Running costs section
Design task completed for carVertical
I received an assignment from carVertical to create a new section for their vehicle report. The task was to design a Car Running Costs section - something that could help users better understand long-term ownership expenses and make more confident budgeting decisions.
carVertical - Home Assignment
Task is to design a new carVertical report section - Car running costs. Running costs is a feature designed to provide an overview of estimated annual car ownership costs in a specific country. The goal is to equip users with a realistic estimate of recurring car ownership costs to aid in purchasing and budgeting decisions.
Reference: use Sample Report as an example.
Scope: car running cost section (no need to design or change other sections).
Task time: up to 8 hours.
Please address the following in your solution:
- Find an option to allow users to specify their mileage per year or month, so the running costs information better reflects their individual usage.
- There are two cases. When we have costs and when we predict. We should indicate that.
- CO2 taxes should probably be included in the same section, even though there is a dedicated, more detailed section for it.
- Insurance cost.
- Other running costs? Freedom for suggestions.
Here’s my design approach.
My goal was to structure everything so the information is clear at a glance and doesn’t create uncertainty. Each card includes short explanations, and key interactive elements - the unit switcher and the monthly/yearly toggle - are visually highlighted so they’re easy to notice and interact with.
I followed carVertical’s existing design system, using their typography, spacing, components, and styling to make the new section blend naturally into the product.
The location is pre-filled based on the user’s IP address, but I left the option to change it manually.
If no data is provided, the card displays average monthly costs for the selected country. Once the user inputs their own mileage, the card instantly recalculates and presents a personalized estimate.
To avoid confusion, both the title and the description text change dynamically - clearly indicating whether the user is seeing general averages or their own calculated costs.
Below is how the section appears in the report.
Martynas Guliokas
Reach out
carVertical: Running costs section
Design task completed for carVertical
I received an assignment from carVertical to create a new section for their vehicle report. The task was to design a Car Running Costs section - something that could help users better understand long-term ownership expenses and make more confident budgeting decisions.
carVertical - Home Assignment
Task is to design a new carVertical report section - Car running costs. Running costs is a feature designed to provide an overview of estimated annual car ownership costs in a specific country. The goal is to equip users with a realistic estimate of recurring car ownership costs to aid in purchasing and budgeting decisions.
Reference: use Sample Report as an example.
Scope: car running cost section (no need to design or change other sections).
Task time: up to 8 hours.
Please address the following in your solution:
- Find an option to allow users to specify their mileage per year or month, so the running costs information better reflects their individual usage.
- There are two cases. When we have costs and when we predict. We should indicate that.
- CO2 taxes should probably be included in the same section, even though there is a dedicated, more detailed section for it.
- Insurance cost.
- Other running costs? Freedom for suggestions.
Here’s my design approach.
My goal was to structure everything so the information is clear at a glance and doesn’t create uncertainty. Each card includes short explanations, and key interactive elements - the unit switcher and the monthly/yearly toggle - are visually highlighted so they’re easy to notice and interact with.
I followed carVertical’s existing design system, using their typography, spacing, components, and styling to make the new section blend naturally into the product.
The location is pre-filled based on the user’s IP address, but I left the option to change it manually.
If no data is provided, the card displays average monthly costs for the selected country. Once the user inputs their own mileage, the card instantly recalculates and presents a personalized estimate.
To avoid confusion, both the title and the description text change dynamically - clearly indicating whether the user is seeing general averages or their own calculated costs.
Below is how the section appears in the report.
Martynas Guliokas
Reach out