Four leafs plant
WaiLAW

Supporting CX Led Companies

About

Book me

Four leafs plant
WaiLAW

CX First

About

Book me

Autobarn

Product Cards for the People

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

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

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.

Reduce friction

Surface decision-critical information before a tap or click is ever needed.

Customer Confidence

Make fitment, value and availability visible. This reduces hesitation and provides conviction to buy.

Consistency

A single component for every scenario. Customers learn the layout once and trust it everywhere.

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.

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.


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.


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.

Outcome

The Solution

A single card component shaped to fit multiple uses.

Testing in the Wild

Add to Wishlist

The refreshed product card was piloted during the wishlist experience initiative. The save to wishlist action now lives on every card variant.

Not every customer is ready to buy straight away. Wishlists transform the product card from a transactional prompt into a personalised, persistent shopping tool. It lets customers plan at their own pace and return with confidence. The intention was to re-engage at the right moment by notifying customers are when the price drops or stock changes which would motivate customers to come to the point in which they left off.

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

Portfolio Thumbnail

Case Study

No-Code Brand Portal

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

Portfolio Thumbnail

Case Study

Optimising Self Service

Engaging 170,000 residents

Create a free website with Framer, the website builder loved by startups, designers and agencies.