← Back to work

Case study · UI/UX

SpeedRack

A high-performance e-commerce experience for die-cast car collectors — a premium storefront built around racing culture, rarity and collecting.

SpeedRack homepage with Speed Unleashed hero
Homepage — enter the garage

01

Project overview

Project

SpeedRack

Category

E-commerce / Collectibles

Role

UI/UX · Visual Design · Design System

Platform

Responsive Web

Direction

Motorsport × Premium Collectibles

Palette

Racing Red + Electric Cyan

The objective

Build a platform where commerce functionality and emotional storytelling carry equal weight.

Discover limited-edition die-cast cars
Explore individual vehicles in detail
Filter and browse a growing collection
Build a personal garage / wishlist
Purchase through a frictionless checkout
Track orders after purchase
Access collector support
Feel part of a collector community

02

The design challenge

How do you make shopping for miniature cars feel like entering a racing garage? The interface had to say speed → performance → rarity → collection → community while staying as usable as any modern store.

01

Product discovery

A large catalogue had to stay easy to explore without overwhelming collectors.

02

Product desirability

Product pages needed to make individual cars feel premium and collectible.

03

Conversion

Discovery → cart → checkout needed to be extremely clear.

04

Brand differentiation

A recognizable visual language instead of a generic online store.

05

Collector retention

Wishlist, Collector Club, reviews, support and tracking extend the relationship.

03

Experience strategy

Discover → Explore → Collect → Checkout → Return

Discovery

Landing page and shop introduce the world of SpeedRack.

Exploration

Cards, categories, filters and detail pages help collectors evaluate cars.

Collection

Wishlist and Collector Club turn purchases into an ongoing collection.

Conversion

Cart and checkout simplify the final transaction.

Retention

Confirmation, support, reviews and racing updates bring customers back.

04

Homepage — enter the garage

A dark racing environment, motion-inspired background, high-contrast typography and a featured collectible. Instead of leading with a product grid, the page builds desire first, then moves through collector spotlight, trending cars, reviews and the Elite Garage Pack: brand → product → social proof → collection.

05

Shop experience

SpeedRack shop listing page with filters and product grid
Shop listing — filters, sorting and product cards

Category, price, series and release-year filters sit in a dedicated sidebar so the grid keeps full visual focus on the cars. Every card follows one hierarchy — image → badge → name → description → price → cart action — which makes scanning the collection extremely fast.

06

Product detail experience

Night Shifter product detail page with gallery and specifications
Product detail — gallery, colorways, specs and track mates

Large photography, a limited-production badge, colorway selection, specifications, collector notes and matching track mates. Editorial copy replaces spec-sheet language so each car reads as part of a racing universe rather than an inventory row.

07

Shopping cart

SpeedRack shopping cart with order summary
Cart — product, price, quantity, total and an isolated checkout CTA

Deliberately minimal. Cyan pricing separates product information from conversion actions, and the primary CTA — Proceed to Secure Checkout — is isolated inside the summary panel.

08

Checkout & confirmation

Three-step progression

01 Shipping information → 02 Secure payment → 03 Review & place order. A two-column layout keeps a persistent order review beside the form, plus trust signals: secure payment treatment, card iconography, shipping status and tax breakdown.

Order placed successfully

Order ID, estimated delivery, total paid, purchased products, shipping and payment recaps — with two live next steps: Track your order, or Continue shopping.

09

Garage, support & brand story

Your Dream Garage

Wishlist reframed as a personal collection, with an empty state that offers new arrivals or restoring a previous session.

SpeedRack Pit Crew

Support form, FAQ accordion, telemetry chat and dispatch centre — customer service in the brand's own vocabulary.

Built for speed since 1968

A 1968 → 1984 → 2001 → 2026 timeline gives the products cultural context and the brand credibility.

10

Design system

Racing Red

#FF1822 · Primary CTA / brand accent

Electric Cyan

#00E5FF · Secondary accent / interactive

Pure White

#FFFFFF · Primary typography

Midnight

#050508 · Primary background

Dark Surface

#0A0A0F · Page sections

Card Surface

#0C0C12 · Cards / panels

Muted

#A3A3B3 · Secondary typography

SpeedRack colour palette design system board
Colour palette
SpeedRack typography scale board
Typography — Unbounded for display, Geist for interface copy
SpeedRack spacing, radius and component board
Spacing 8/16/24/32/48/64/96 · radius 4→8→12→16→pill · button hierarchy

11

Visual language

01

Speed

Large condensed headlines, sharp contrast and strong CTAs create movement.

02

Precision

Grid layouts, consistent spacing and technical specs communicate engineering.

03

Exclusivity

Limited-production badges, club messaging and curated drops create scarcity.

12

Information architecture

HOME
├── DIE-CAST CARS
│   ├── Product Listing
│   └── Product Detail
├── TRACK SETS
├── COLLECTOR CLUB
│   └── Dream Garage
├── CART
│   └── CHECKOUT
│       └── ORDER CONFIRMATION
├── ABOUT
└── PIT CREW SUPPORT

13

Complete user journey

01 — DiscoverUser enters through the cinematic SpeedRack homepage.
02 — ExploreFeatured cars and trending products create curiosity.
03 — FilterShop experience narrows down the catalogue.
04 — EvaluateDetail pages provide imagery, specs, reviews and variants.
05 — CollectCar is added to the Racing Cart or Dream Garage.
06 — PurchaseStreamlined cart and checkout reduce friction.
07 — ConfirmConfirmation provides delivery and payment information.
08 — ReturnClub, support and new drops encourage continued engagement.

14

Key takeaways

Strong brand identity

A red/cyan night-racing language separates SpeedRack from generic stores.

Conversion-focused UX

The path from discovery to checkout is short and predictable.

Collector-centric

Wishlist, club, reviews and limited drops make collecting central.

Scalable system

Tokens for color, type, spacing, radius and buttons scale the ecosystem.

Consistent story

Even checkout, support and confirmation keep the racing vocabulary.

SpeedRack was designed as more than an online store — a digital garage where every interaction reinforces the excitement of speed, rarity and collecting.

Discover. Collect. Race. Repeat.