A flexible design system for fast Italian cars ↴

I came close to driving an Alfa a couple years ago...

Toronto Auto Show — 2018

...however the rental shop didn't have any left when I got there, so I settled for an Audi A4 Wagon, which mind you, grips the asphalt like you wouldn't believe.

Anyway...I had this idea to fly to Milan, rent a penthouse with a balcony, drive an Alfa and pretend to be Italian for a summer (...live a little). I was also looking forward to working on this project as you don't often get the chance to design something that wears the four-leaf clover insigne.

One afternoon, I prototyped what is now the Cinematic Hero component while sipping amaro Lucano. A visit to the Fiat plant nearby was in the plans, but instead I drove to see friends in Geneva. You could say it was a great trip.

I'd like to thank Graham Ameron for the creative jams and guidance, and Dave Jackson for his openness and collaboration.

Below, is a recollection of the decisions I've made while building the experience strategy and design system for Quadrifoglio, the performance branch of Alfa Romeo 🍀

I came close to driving an Alfa a couple years ago...

...however the rental shop didn't have any left when I got there, so I settled for an Audi A4 Wagon, which mind you, grips the asphalt like you wouldn't believe.

Anyway...I had this idea to fly to Milan, rent a penthouse with a balcony, drive an Alfa and pretend to be Italian for a summer (...live a little). I was also looking forward to working on this project as you don't often get the chance to design something that wears the four-leaf clover insigne.

One afternoon, I prototyped what is now the Cinematic Hero component while sipping amaro Lucano. A visit to the Fiat plant nearby was in the plans, but instead I drove to see friends in Geneva. You could say it was a great trip.

I'd like to thank Graham Ameron for the creative jams and guidance, and Dave Jackson for his openness and collaboration.

Below, is a recollection of the decisions I've made while building the experience strategy and design system for Quadrifoglio, the performance branch of Alfa Romeo 🍀

Toronto Auto Show — 2018
Pardon my crooked hand writing.

On a single page, you'll probably experience moments which have lots of interactive content, and others when things are a bit more quiet. This balance of loud and quiet moments creates a rhythm which is something that people experience while scrolling through the content and down the page.

Originally to keep efforts relatively low, the goal was to leverage existing components (while also enhancing just a few).

The picture here shows the plan we had early on; a breakdown of some new, enhanced and existing components that would be used to build a single vehicle page.

We instead got carte blanche to create whatever was necessary, which ultimately gave way to a more flexible and future-proof cross-brand design.

On a single page, you'll probably experience moments which have lots of interactive content, and others when things are a bit more quiet. This balance of loud and quiet moments creates a rhythm which is something that people experience while scrolling through the content and down the page.

Originally to keep efforts relatively low, the goal was to leverage existing components (while also enhancing just a few).

Pardon my crooked hand writing.

The picture here shows the plan we had early on; a breakdown of some new, enhanced and existing components that would be used to build a single vehicle page.

We instead got carte blanche to create whatever was necessary, which ultimately gave way to a more flexible and future-proof cross-brand design.

The design system

Containers & Sections

This system uses 2 main types of components.

A Section is a container that houses content. These containers control the size, position and animation of the content within them, but can also be used to nest sub-containers. They additionally determine which pieces of content work in conjunction.

Content

The second type is a Block, which is the content itself. This can range across image file types, videos, text and UI elements.

A content Block can have required or optional fields. Those fields can also be made authorable (using a CMS), which is the functionality that modular design systems rely on the most.

This is what creates large amounts of permutations so that design layouts can vary per page and per amount of content.

Nesting levels

This type of system relies on nesting sub-elements (or @includes).

It's important to note that for enterprise level systems, it’s all noticeably flexible if the nesting architecture goes up to 3 levels.

Anything that goes beyond 3 levels can function and in some cases is required, but it's best to avoid it where possible.

This may be an over simplification, but based on my experience, too much nesting compounds issues in development and during regression testing. This also makes change requests less expensive and less taxing on the entire system.

Flexible & sustainable

When creating a component, it’s obvious that we have to design atomic elements directly in the parent component — instead of treating them separately and @include —ing them.

At the same time, this all has to be flexible enough to endure massive amounts of content and variations of layout, hacks and take-overs, authoring interfaces and human error.

A system must inherently be designed to change, adapt and expand. The worst kind of system is one that's too rigid.

Core components

Section Block

Handles space, size, position, alignment and transitions.

Media Block

Displays all types of images and videos.

Description Block

Has 20 authorable fields that, for example, allow double-weighted headlines, pre and post headers, body copy, buttons, audio triggers, timestamps, etc.

Accessibility Controls

These are included inside of Media Blocks that require accessibility controls. In this case, there's Play/Pause, Volume on/off and a transcript modal.

Media & Copy

One of the most commonly used components on this site, Media & Copy displays image or video assets inline with a Description Block.

There's a variety of alignment options illustrated further below.

Offset and Full-Height Containers

The Offset Container lets components overlap one another.

While the Full-Height container fills the device viewport with an image or video.

Multi-panel Layout

An elaborate layout component that displays multiple animated Offset Containers, which themselves house Media & Copy components.

Sticky Container

A series of corresponding Media Blocks and Description Blocks that cycle in and out of view, when the user scrolls.

The Media Block can also display specific timestamps in a video file, making it look like the user is rotating a 3D image (like seen in the Ram example further down the page).

Sticky Hotspots

Behaves like the Sticky Container, but has accessible Hotspots which display a point of interest on top of the image, corresponding to the Description Block that's in view. This allows a keyboard user for example, to cycle the element focus through the hotspots

Scrolling Media

Cycles through an array of images to create the illusion that a 3D asset is floating or rotating. This all happens as the user scrolls up or down the page.

Cinematic Hero

An immersive component with background videos that are triggered depending on the mouse position.

Navigation

On desktop, scrolling up and down the page will update the status indicator in the navigation.

On mobile, the same navigation opens an accessible overlay to let users jump to other sections of the page.

Column range

Row alignment

Offsets

Floats

The Design System

1. Containers & Sections

This system uses 2 main types of components.

A Section is a container that houses content. These containers control the size, position and animation of the content within them, but can also be used to nest sub-containers. They additionally determine which pieces of content work in conjunction.

2. Content

The second type is a Block, which is the content itself. This can range across image file types, videos, text and UI elements.

A content Block can have required or optional fields. Those fields can also be made authorable (using a CMS), which is the functionality that modular design systems rely on the most.

This is what creates large amounts of permutations so that design layouts can vary per page and per amount of content.

3. Nesting levels

This type of system relies on nesting sub-elements (or @includes).

It's important to note that for enterprise level systems, it’s all noticeably flexible if the nesting architecture goes up to 3 levels.

Anything that goes beyond 3 levels can function and in some cases is required, but it's best to avoid it where possible.

This may be an over simplification, but based on my experience, too much nesting compounds issues in development and during regression testing. This also makes change requests less expensive and less taxing on the entire system.

4. Flexible & sustainable

When creating a component, it’s obvious that we have to design atomic elements directly in the parent component — instead of treating them separately and @include —ing them.

At the same time, this all has to be flexible enough to endure massive amounts of content and variations of layout, hacks and take-overs, authoring interfaces and human error.

A system must inherently be designed to change, adapt and expand. The worst kind of system is one that's too rigid.

← Swipe
Core Components

5. Section Block

Handles space, size, position, alignment and transitions.

6. Media Block

Displays all types of images and videos.

7. Description Block

Has 20 authorable fields that, for example, allow double-weighted headlines, pre and post headers, body copy, buttons, audio triggers, timestamps, etc.

8. Accessibility Controls

These are included inside of Media Blocks that require accessibility controls. In this case, there's Play/Pause, Volume on/off and a transcript modal.

← Swipe

9. Media & Copy

One of the most commonly used components on this site, Media & Copy displays image or video assets inline with a Description Block.

There's a variety of alignment options illustrated further below.

10. Offset and Full-Height Containers

The Offset Container lets components overlap one another.

While the Full-Height container fills the device viewport with an image or video.

11. Multi-panel Layout

An elaborate layout component that displays multiple animated Offset Containers, which themselves house Media & Copy components.

12. Sticky Container

A series of corresponding Media Blocks and Description Blocks that cycle in and out of view, when the user scrolls.

The Media Block can also display specific timestamps in a video file, making it look like the user is rotating a 3D image (like seen in the Ram example further down the page).

← Swipe

13. Sticky Hotspots

Behaves like the Sticky Container, but has accessible Hotspots which display a point of interest on top of the image, corresponding to the Description Block that's in view. This allows a keyboard user for example, to cycle the element focus through the hotspots

14. Scrolling Media

Cycles through an array of images to create the illusion that a 3D asset is floating or rotating. This all happens as the user scrolls up or down the page.

15. Cinematic Hero

An immersive component with background videos that are triggered depending on the mouse position.

16. Navigation

On desktop, scrolling up and down the page will update the status indicator in the navigation.

On mobile, the same navigation opens an accessible overlay to let users jump to other sections of the page.

← Swipe

17. Column range

18. Row alignment

19. Offsets

20. Floats

← Swipe
Show me what it looks like, already.
← Swipe
Jeep and Ram started using the new components a few months later.
Explore other projects

Alfa Romeo configurator.
Behind the scenes ↴

TRX Augmented Reality
Mobile App ↴
home info