Are design systems an industrial design function of digital products?

Why I think design systems actually have more in common with an automotive assembly line than a graphics standards manual

The Wolfsburg VW factory producing the iconic split screen bus in the mid 1950s
The Wolfsburg VW factory producing the iconic split screen bus in the mid 1950s

There are two sides to the world of design systems.

One side leans towards the systematisation of graphic design, UI design or a visual language. This is to create order, meaning and harmony across design assets and to provide rules to design any new material from. I look at this as an extension of a graphic standards manual or even a detailed brand guidelines document.

The other has more of a focus on design rationalisation, standardisation, delivery and adoption. For example, making common components reusable across a product line and creating detailed usage guidelines for the design and build process. The goals for this are as much around reducing duplicate work and cost savings as they are about creating a consistent user experience.

Of course, without question all design system teams will have elements of both of these things, just to different ratios.

However, when it comes to actually funding design system teams, they tend to only exist because of the economic benefits of the latter. This is a specific function that design system team performs that is not usually covered by other areas of the business or organisation. This is the side of design system work I want to talk about today .

What is industrial design?

When you search the term ‘industrial design’ the first definition you’ll find is:

Industrial design (ID) is the professional service of creating and developing concepts and specifications that optimize the function, value and appearance of products and systems for the mutual benefit of both user and manufacturer.”

I don’t know about you, but from working in the design system space almost exclusively for the last 5 years I’d say that is a pretty good description of what design systems teams actually do.

So, could a design system be an industrial design function of a digital product?

Designing for the assembly line

If we go back to post-war Germany and look at the design and manufacture of Volkswagens you will actually start to recognise a lot of the same concepts we talk about in modern digital design systems.

For example, while not always obvious to the viewer, the component design of almost all Volkswagen models in this era are fundamentally the same.

The flagship product

The Beetle, or ‘Type 1’ was the first and only car Volkswagen produced for many years. If we think about the Beetle as an example of your flagship digital product, the approach to this product would undoubtably define the foundations for any future additions to the line.

For Volkswagen, they solved the design of the engine (flat four aircooled) and gearbox, they had chosen methods of suspension (torsion bars), brakes etc and defined an individual and instantly recognisable visual style, all with the Beetle.

A VW Beetle from 1956
A VW Beetle from 1956
A VW Beetle from 1956

Then, while on a visit to the Volkswagen factory a Dutch VW importer by the name of Ben Pon sketched out the concept of a new addition to the line. He imagined reusing the foundational design of a Beetle to create a utility vehicle.

This sketch would become the iconic Volkswagen Type 2 ‘split screen’ bus. The Type 2 would go on to sell millions of units, with just this iteration in production for over 17 years.

Image for post
Image for post
Image for post
Image for post
Ben Pon’s initial sketch side by side with an early split screen panel model

When you take a closer look at the Type 1 (Beetle) and Type 2 (Bus) side by side you start to spot these similarities.

Image for post
Image for post
Image for post
Image for post
The aircooled flat 4 engine used in both early Beetles and Buses

Not only do the vehicles share a lot of the same components and general mechanical approach, the keen eyed amongst you will notice that they also share a visual style.

The iconic “v” shape at the front of the split screen is a visual design cue from the Beetle’s bonnet, the headlights (which are the same component just turned 90 degrees) and iconic domed hubcaps make the two products feel like they are part of the same family while having completely different uses.

Extending the car line

The car platform pictured below is what a Beetle looks like without its body. Believe it or not with very little work you could actually get in and drive this off, although I’m not sure that’s a good idea.

A beetle floorpan with engine, gearbox, axles etc fitted
A beetle floorpan with engine, gearbox, axles etc fitted
A beetle floorpan with engine, gearbox, axles etc fitted

If you believe the sheer existence of a design system will limit your creativity, just take a look at these two cars pictured below. From a mechanical perspective they are both fundamentally the same as a Beetle, both built on top of the same chassis while being styled for completely different audiences and use cases.

It’s all about defining the scope of the system or at least the scope in which it benefits a specific product.

Image for post
Image for post
Image for post
Image for post
A Trekker (or “Thing”) next to a Karmann Ghia

Third party suppliers and “open source”

The Karmann Ghia pictured above was actually designed and built by third party suppliers Karmann (who were already building the Karmann Beetle Cabriolet) and the Italian design house Ghia.

Karmann and Ghia used the proven Beetle platform simply as a design constraint and developed this vehicle without literally needing to reinvent the wheel.

The prototype was presented to Volkswagen and went on to be in production for 19 years. The Karmann Ghia mirrored many mechanical upgrades made to the Beetle over the years, much like a digital product making sure they are using the latest version of the design system codebase as it improves over time.

This idea was not lost on companies and individuals who did not directly work with Volkswagen. Over the years the amount of cars that have been built upon the Beetle platform is incredible. This includes high production kit cars to completely custom one offs. Although this is obviously not really open source, it doesn’t feel that different to an open source design system being forked and becoming the foundation for another.

Image for post
Image for post
Image for post
Image for post
A “Sterling” and “Beach buggy”, two kits that used a Beetle chassis, engine and drivetrain as a foundation

Design vision vs execution and manufacture

Pushing this idea a little further, when we consider the role of the design system team through the lens of industrial design, this team would not exist to create the initial concept or broad strokes vision of the vehicle.

This team’s responsibility would be designing how that vehicle concept would actually work, how it would be manufactured in the most efficient and economic way, while adapting the design to increase its usability and meet any legal regulations of the industry.

While the construction of a vehicle may just be a collection of parts joined together, each of these component parts needs to be designed, built and tested. Months might be spent on just working out how to design the machinery to make the parts before a single panel can be made. On top of that the process would fall down without a detailed manual of corresponding guidance to aid the assembly and quality assurance process. Does this sound familiar?

This doesn’t happen by accident, this is very specific work from a dedicated team.

Exploded diagram (aftermarket) of a ‘68–’71 VW Microbus
Exploded diagram (aftermarket) of a ‘68–’71 VW Microbus
This exploded diagram shows the construction of an early 70s iteration of the VW Type 2 bus. Each panel has been designed and pressed individually. There are specific points where each panel needs to be spot welded and a defined order in which the assembly needs to happen.

Modern automotive platforms

Now I have to admit, my love of this era Volkswagens somewhat defined the story of this article but this practice was very common amongst all vehicle manufacturers.

The concept of a car platform, described as “a shared set of common design, engineering, and production efforts, as well as major components over a number of outwardly distinct models and even types of cars, often from different, but somewhat related marques.” dates back to some of the earliest examples of productionised vehicles.

In modern times this concept has been extended significantly. Major automotive groups own several brands and and they all produce multiple types of cars.

The Volkswagen Group itself now has 7 distinct platforms that are used across it’s entire range of brands. For example the VW Golf, Audi A3, SEAT Leon and the Skoda Octavia all share the same Volkswagen A series “compact” platform.

Rather than one vehicle marque like Audi having a shared platform with other Audi’s, these shared platforms are for types of vehicles (city, compact, executive etc), that cross cut all the vehicle marques. Visual language and style is obviously brand specific and shared across the line, after all if there wasn’t a need for them to appeal to different audiences and price points multiple marques would be an unnecessary waste in itself.

Base and multi-brand design systems

This concept is starting to become more prevalent in the world of design systems. The topic of multi-brand systems or brand theming of base systems (for example Base by Uber) is coming up in fairly regularly in design system discussion spaces.

Digital businesses that own more than one brand, especially when they are in the same sector are asking themselves similar questions to those in the more traditional manufacturing industry. How can we reduce waste, save money, create products with proven foundations and free up time to be spent on the things that genuinely need to be different? Not just across products within a single brand but across everything they own.

I think you will agree this has come a long way away from the concerns of a design system being an extended graphic standards manual.

Bringing it back to Design Systems

A design system team operates in a unique space, one that is often hard to define. In my opinion, a design system is not the place for the big design ideas (in the traditional art direction sense), but it can be the place to make those big ideas become a reality.

If your company or organisation has had a rebrand, the design system team can make sure the application of that rebrand meets the company’s usability and accessibility requirements, they can expose and fill the gaps in design work because they have dedicated time and knowledge to do so. They can define the process for teams to adopt the new design and benefit from any future iterations through research or changing industry regulations.

They do this all for both the end user, who experiences a high quality, functionally consistent and visually aligned product, and for the company or manufacturer who spends less money on duplication of effort and has a more optimised build process.

This article is just a suggestion of what a lot of us may already know: a designer in a dedicated design system team is doing a very different type of design to a designer in a product squad, a branding team or design agency. Not better or worse, more important or less important, it’s just a different job.

While there are undoubtably elements of product design, service design, UI design and frontend development…I’ve started to think about the work I do as a form of industrial design for digital.

Of course, I’m not suggesting anyone actually use this as a job title, but could it be useful to help define that relationship between the design system team and design in the wider organisation? Is it better for everyone that a team that is primarily concerned with design rationalisation and systemisation are not the ones providing creative direction?

I think so, how about you?

User Centred Design, Design Systems and aircooled VWs www.twitter.com/iknowdavehouse

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store