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.

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.
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.
Product discovery
A large catalogue had to stay easy to explore without overwhelming collectors.
Product desirability
Product pages needed to make individual cars feel premium and collectible.
Conversion
Discovery → cart → checkout needed to be extremely clear.
Brand differentiation
A recognizable visual language instead of a generic online store.
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

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

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

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



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
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.