WaiLAW

Design System Craft

About

Book me

WaiLAW

Design Systems

About

Book me

Autobarn

Product Cards for the People

Cleaning up one of the most common UI Patterns at Autobarn.

Read in 2.15 minutes

Problems

Customer Struggles

Customers need to know the right part, at the right price, will actually fit their car before they commit.

Will this part actually fit my car?

Proto personas capture a team's existing knowledge or assumptions about who their current users are

As a member am I getting the best price?

Member value was invisible at the browsing phase. Customers weren't seeing the benefit of their membership until checkout which was too late to influence their purchase decision.

Will this part actually fit my car?

Proto personas capture a team's existing knowledge or assumptions about who their current users are

Will this part actually fit my car?

Proto personas capture a team's existing knowledge or assumptions about who their current users are

Design Principles

The Big Four

Behind every design decision there were four principles to support rationale.

Inclusive by Design

Contrast, touch targets and hierarchy that serves every customer equally.

Inclusive by Design

Contrast, touch targets and hierarchy that serves every customer equally.

Inclusive by Design

Contrast, touch targets and hierarchy that serves every customer equally.

Inclusive by Design

Contrast, touch targets and hierarchy that serves every customer equally.

The basic card

Card Skeleton

From the wireframes I was able to develop a skeleton of the proposed product card. The card is simply divided in 3 sections; top, middle and bottom. This made it easier to communicate to developers and on a design level, the card could seamlessly shaped to adapt to different use cases or scenarios.

Increased Fidelity

Building Trust

Giving customers the answers to their questions, builds trust. In the shipped version of the product card below, I have illustrated the trust signals that were included.

Increased Fidelity

Building Trust

Telling the customer a part fits eliminates the most common reason for returns and cart abandonement.

Inclusive Design

“All for the drivers” as they say at Autobarn.

The product was designed for a diverse audience. Not just for the enthusiast or trade but for a the everyday driver like you and I.

Colour contrast & legibility. High-contrast text on all card surfaces. Status colours paired with icons and text labels. It was intended that colour was never used alone so the meaning is never lost for colour-blind users.

Touch-optimised targets. Intentionally sized for comfortable thumb use on mobile devices. The majority preferred device for browsing.

Consistent visual hierarchy. The structure across all variants kept uniform to aid familiar scanning.

“All for the drivers” as they say at Autobarn.

The product was designed for a diverse audience. Not just for the enthusiast or trade but for a the everyday driver like you and I.

Touch-optimised targets. Intentionally sized for comfortable thumb use on mobile devices. The majority preferred device for browsing.

Consistent visual hierarchy. The structure across all variants kept uniform to aid familiar scanning.

“All for the drivers” as they say at Autobarn.

The product was designed for a diverse audience. Not just for the enthusiast or trade but for a the everyday driver like you and I.

Touch-optimised targets. Intentionally sized for comfortable thumb use on mobile devices. The majority preferred device for browsing.

Consistent visual hierarchy. The structure across all variants kept uniform to aid familiar scanning.

Outcome

The Solution

A single card component shaped to fit multiple uses.

Result

Better for Everyone

Touch-points served by one UI component
Adaptive card variants for any screen or context
Low interaction cost. Fewer clicks needed to reach buying confidence
Consistent, trustworthy experience across the whole site

More from my portfolio

Case Study

No-Code Brand Portal

From legacy HTML builder to a seamless, collaborative digital space.

Case Study

Optimising Self Service

Engaging 170,000 residents