Automotive Design System

1.2

Automotive Design System

Automotive Design System

Automotive Design

System

EX90

Volvo

The all-electric SUV with room

for 7 persons

->

EX90

Volvo

The all-electric SUV with room

for 7 persons

->

EX90

Volvo

The all-electric SUV with room

for 7 persons

->

EX90

Volvo

The all-electric SUV with room for 7 persons

->

EX90

Volvo

The all-electric SUV with room for 7 persons

->

EX90

Volvo

7-seater

All-electric

600 km

Electric f1rst

Electric f1rst

Now that electric driving has taken off, the design system is focused on the electric models to show the latest developments and mutual differences.


Pick what you like, download the Figma file and electrify away. Feedback, shoutouts are welcome at @sandr.

2007, Clio III Car of the year

2007, Clio III Car of the year

In the past 16 years I have designed and built websites for many car companies (8+). Rather low level in the beginning with a simple iframe of the car range and later with complete integration of external stock systems.


In 2022, commissioned by leasing company Mobility Service (6500+ cars on the road), I have already completed the 3rd redesign for the electric branch zakelijkelektrischleasen.nl.

In the past 16 years I have designed and built websites for many car companies (8+). Rather low level in the beginning with a simple iframe of the car range and later with complete integration of external stock systems.


In 2022, commissioned by leasing company Mobility Service (6500+ cars on the road), I have already completed the 3rd redesign for the electric branch zakelijkelektrischleasen.nl.

Thx Alexander, Hilda, Tjillie!

Thx Alexander, Hilda, Tjillie!

Mobility Service Nederland is the expert in the field of mobility with services in various branches such as electric lease, short lease, financial lease, business lease and replacement transport. The design system for MS is designed to give shape and color to all 7+ websites under 1 corporate flag and appearance.

Extract Analyze Synthesize (EASY method)

Extract Analyze Synthesize (EASY method)

For the latest redesign of I performed an analysis in December to get the best practices of 7 national and international players above [cooling] water in the leasing industry. The table below shows frequently used functionalities and non-automatic anomalies. Based on the findings, I designed the Automotive Design System.

For the latest redesign of I performed an analysis in December to get the best practices of 7 national and international players above [cooling] water in the leasing industry. The table below shows frequently used functionalities and non-automatic anomalies. Based on the findings, I designed the Automotive Design System.

Do's

Do's

Horizontal filters

Apply filters horizontally instead of vertically in a column layout. For the desktop and tablet user there is more space for the auto cards. And on mobile it is also impossible to fit vertically and often present via a fold-out or popup screen.


Cards Deluxe

Apply variation to the cards of car in the offer. Show labels (new, discount, promotion) and switch using an image that fills the background. This stimulates the visitor and you don't just show 'sterile' cars.


Configurator with AI

Make your configurator smart, only show the steps that are actually relevant to the car that the user is configuring, so you streamline the flow and only show information that matters.

Don'ts

Don'ts

Avoid the carousel
Carousels are dated, research shows users perceive them as advertisement and skip the part. It has often been used to push and present slides internally from different interests.


Users' eyes respond to movement, but with all the different messages in the carousel, there are too many stimuli and it backfires.


Modal if necessary

Ideal for going into depth and explaining a functionality or term, the Modal (Popup). But showing the configurator (the sales tool of every webshop) in a modal is disastrous for 2 reasons: it is more difficult to register statistics and you give users the idea that they have to leave the modal again. A modal has the effect that you intervene and the flow is being interruppted.

Research findings

Site

Homepage

Content Home

Card

Configurator

Menu

Font Size

Remarks

Mister Green

Hero, CTA, Trustpilot

subnavigation of Tesla, other brands and van, Sections

Picture, Price, Delivery time

Hero with warranty explanation about delivery. E-mail address required for next step. 4 steps. Mobile – Fixed bottom section.

Desktop–Fixed top. 5 entries. Icon propose, icon account, icon menu with drop down for rest navigation. Mobile – Suggest icon, account icon, icon menu with drop down.

Desktop – 28 pixels height. Mobile – 25 pixels height.

No filters

Blankert Shortlease

Filter, Cards

Filter, 3 grid cards

Picture, Price, Make, Model, Type.

Request a quote instead of compiling in full screen modal.

Desktop – Icons menu, search, shopping cart and quote button + phone number, 7 menu items. Mobile – Icons menu + phone, submenu with icon + text People, Electric, Company, Actions.

Desktop – 22 pixels height. Mobile – 22 pixels height.

Athlon

Content, Images, Lists

Hero, Filter, 3 grid

Image, Brand, Model, Price

4 steps. Full-screen configurator. Steps are skipped when you can't choose. Left side vertical steps progress. Subnavigation top with model / type and duration and number of km. Bottom overlay with specifications and assemblies with all prices. Image left and options right side, request left side. Mobile – Model/Type section pinned to bottom with price and option to expand.

Desktop – Reviews, My lease car (dropdown), We are Athlon (dropdown), Language, Search, Icon Menu Mobile – Language, Search, Menu

Desktop – 32 pixels height. Mobile – 25 pixels height.

Cards interrupted with USPs block

Leaseplan

Hero, Carousel, Cards, Lists

Filter, 4-grid cards

Image, Brand, Model, Price

Hero with car in the middle and option for 360 degree view Content on the left, summary on the right Button request car goes directly to lease plan with Paint, upholstery, options, accessories such as harmonica hood. Mobile – After scrolling, a section will appear pinned to the bottom with price and Quote and Request buttons.

Desktop – 6 menu items, Service & Contact, My LeasePlan, Favorites, Language Mobile – Menu icon

Desktop – 24 pixels height. Mobile – 24 pixels height.

ANWB

Hero, 2-columns, Content, CTA

Hero, Filter, 3-grid cards

Image, Sticker, Label, Brand, Type, Model, Price

3 steps. Blocks below each other with options Mobile – Section pinned to the bottom with Total per month and ANWB membership per year and fold-out.

Desktop – Part of ANWB, no specific lease menu Mobile - Icons Login, Search, Menu

Desktop – 24 pixels height. Mobile: 24 pixels height.

DirectLease

2-columns, Cards, Hero

Hero, Filter, 3-grid cards

Picture, Model, Type, Label, 2 columns specs.

Step 1 select execution in table view. Step 2 fold out on the right with summary and content as blocks below each other. Option to leave email address and receive configuration. Option to send existing quote. Mobile – Section pinned to bottom with buttons/icons Price, Contract, Car, Quote.

Desktop – 4 menu items with dropdown. FietsLease, MotorLease + login. Button sales@directlease.nl and button telephone number Mobile – Icons Menu, Search, Login

Desktop – 21 pixels height. Mobile – 21 pixels height.

Alphabet

Hero, Cards

Filter, 4-grid cards

Image, Brand, Model, Labels

On the left content, summary car and options on the right Compose -> contract options -> Your data Horizontal steps navigation Mobile – Section at the bottom with Price and buttons Request quote and Request lease contract.

Desktop – 5 menu items, search, My Alphabet Mobile – Search and Menu

Desktop – 28 pixels height. Mobile – 28 pixels height.

Sander van der Kolk is

a designer and developer

Open to Work

Konstruktiv B.V.

Sander van der Kolk is

a designer and developer

Open to Work

Konstruktiv B.V.