Car Design History

thumbnail

As a car-obsessed designer, I spend countless hours browsing the internet for car design icons. In doing so, I noticed that I often miss the context of a particular design. Who designed it and how did it relate to other cars of the time? How cool would it be if you could see all of these cars throughout time with relevant information?

Year

2021

Length

4 months

Role

Designer & Developer

Location

Berlin 🇩🇪

The first interest in this project came from the fact that I often look up historic cars and their designers. I often have difficulty understanding the context of a single car or period in the career of a designer. I wanted to create Car Design History to give this context.

Initially, I had the idea to focus on the different designers. I had this picture in my head of a timeline with time on the x-axis and design studios on the y-axis. In theory, it would give a great insight into how the career of a designer developed, where they worked and what they did at each studio.

I started by creating a very basic prototype in Figma to explore if my idea had the desired outcome. In the first version, I placed time on the x-axis and the designers on the y-axis. Each bar signifies employment at a company and by clicking on a bar you would see the work of the designer at that studio.

When first playing with this limited prototype, I was positive that it would have the desired outcome. But to get a final judgment, I wanted to add some real data. And that is when I ran into the limitations of this visualization. In theory, this idea works well, but in practice, the career tracks of these designers are complex and non-linear. Immediately, I ran into some questions like how to deal with freelance work and consultancy jobs? I struggled to come up with a good answer on how to visualize this. And if I struggle to get good results, the visitors of the website will definitely struggle too. I, therefore, decided to change the focus to the two variables that were much clearer defined: time and cars. Instead of plotting the designers, I changed to car models. At this point, I started looking for possible ways to develop this. I am a designer and not a developer by profession so my software development skills are a design limitation. While browsing the documentation of D3 I came across the swarm plot and a couple of examples of websites that applied it very well. To start with the swarm plot, I created a small data set of a couple of cars. For each car I logged the following:

Make
Model
Image (from Wikipedia commons)
Designer
Design studio
Wikipedia link
Production number
Youtube video (if available)

After plotting a couple of cars, I started refining the design. First, I added colored borders to each node in the graph that signifies the design studio.

The first version had a lot of visual overload
The first version had a lot of visual overload

Next, worked on ways to reduce the visual overload by using grayscale images and playing with the design studio colors.

Experimentation of the visual overload
Experimentation of the visual overload

A lot of thinking went into the color scheme. Finding a color scheme that is accessible, works well with the images, looks great, and has seven distinct colors is difficult. I spent a lot of time with coolors.io to come to this final one:

The color scheme I used
The color scheme I used

Last, I iterated on the information card design as you can see below.

The iterations of the card design
The iterations of the card design

With the main design in place, I spent many hours creating the final dataset of over 700 cars. This resulted in serious performance issues which lead me to use Cloudinary to host the images. Compared to my previous method, TinyPNG, it resulted in at least a 60% file size reduction.

You can see the final result below:

The landing page
The landing page

The final version of the data visualization
The final version of the data visualization

One of the main challenges was to get the filters to work. There are a lot of differences between browsers and also D3 has some limitations.

The filters
The filters

Below is a video of how it works today.

On launch, I shared my website on Hackernews and on Reddit. On both platforms, it managed to attract a big audience leading to more than 50,000 unique visitors. Today, 6 months after the first release, it has received 70,000 unique visitors.

VISIT CAR DESIGN HISTORY HERE