Case Study — E-Commerce & UX Design

Beltrán
Motors

A luxury e-commerce concept for classic automobile parts — designed to serve collectors and restorers who demand precision in every detail, both on the car and on screen.

Role
UX/UI Design + Frontend
Timeline
2+ Weeks
Stack
Figma · HTML · Tailwind CSS
Type
Portfolio Concept
Scroll
Design Challenge

The market gap I set
out to solve

Classic car enthusiasts spend thousands of dollars on components — but most e-commerce platforms that serve them look like they were built in 2009. The brief I wrote for myself: design a purchasing experience that matches the premium nature of the products being sold.

01
Trust & Credibility
Buyers spending $1,000–$15,000 on a single part need to feel confident before they click "add to cart." Generic UI destroys that confidence instantly.
02
Technical Complexity
Classic parts have deep spec sheets — displacement, torque, compatibility. The UI must present this data clearly without sacrificing visual quality.
03
Emotional Connection
Collectors are passionate. The interface needs to speak their language — editorial, heritage-aware — not the sterile efficiency of a B2B catalog.
04
Full Purchase Flow
Beyond the homepage, the challenge was to design a coherent flow: catalog → product detail → cart → checkout, each screen reinforcing the brand.
Design Decisions

Every choice has
a reason

Direction
Grand Touring Modernity
I defined the aesthetic as "Grand Touring Modernity" — a deliberate collision between heritage editorial design and precision digital engineering. This meant treating the UI like an automotive magazine from the 1960s, but rebuilt in code. The dark obsidian palette provides depth. The gold accents signal luxury without being ostentatious. The red is reserved exclusively for CTAs — high-urgency, no ambiguity.
Typography
Three-font system with purpose
Bodoni Moda carries the brand voice — high-contrast serif with dramatic thick-to-thin strokes, evoking luxury print. It's used exclusively for headlines and product names. Geist handles body copy and UI — precision engineering made legible. JetBrains Mono is reserved for technical data: part numbers, prices, specifications. Reading specs in monospace creates the mental model of a blueprint or dashboard display, which is exactly right for this audience.
Elevation
Glassmorphism over drop shadows
Traditional card elevation with drop shadows would feel corporate. Instead, I used glassmorphism with 20px backdrop blur and hairline 1px borders to simulate polished chrome and windshield surfaces. This creates hierarchy through material translucency rather than depth — more sophisticated, more on-brand. Every layer references a physical material: glass, steel, machined aluminum.
Information
Specs as a design element
Product detail pages in this niche usually bury specs in a collapsed accordion. I elevated them to a primary design element — bold monospace tables with striped rows, gold values on dark backgrounds, displayed above the fold alongside the price. For a buyer evaluating a $12,000 V8 engine, the specs are the product. Hiding them is a conversion killer.
Display / Hero
High-Performance V8
Body / UI
Hand-assembled by master technicians in our Madrid workshop. Every bolt, every stitch — built to perform.
Data / Specs
405 HP @ 5800 RPM · 460 LB-FT @ 4400 · PART-V8-9.7-HB
#0E0E0E — Obsidian
#131313 — Surface
#1C1B1B — Container
#2A2A2A — Elevated
#99907C — Outline
#D4AF37 — Gold Dim
#F2CA50 — Gold Primary
#AD0224 — Performance Red
Screen Design

Four screens,
one coherent flow

The full purchase journey was designed as a connected system — each screen reinforces the brand voice and passes context to the next, reducing cognitive friction at every step.

≡
Restauración
& Accesorios
Clásicos
COMPRAR
FEATURED CATEGORIES
Engine Parts
Precision Performance
Exterior Trim
Authentic Restoration
01 — Homepage
MASTERFULLY RESTORED
Classic Components
1969 ×
Exterior ×
Machined Heritage Rims
$1,250.00
Precision Analog Trio
$2,100.00
02 — Catalog
High-Performance
V8 Engine
$12,450.00
DISPLACEMENT
350 ci / 5.7L
HORSEPOWER
405 HP
TORQUE
460 LB-FT
COMPRESSION
10.5:1
ADD TO GARAGE
03 — Product Detail
Shopping Cart
Precision Cast Rim
$1,250.00
LED Retrofit Headlight
$840.00
Subtotal
$2,090
Shipping
$120
$2,210.00
PROCEED TO CHECKOUT
04 — Cart
Process

How it was built

A self-directed 2+ week sprint from brief to coded prototype, treating this as a real client engagement from day one.

01
Research & Brief
Analyzed 6 competitors in the classic auto space. Defined target user: collector, 35–60, high disposable income, detail-obsessed.
02
Design System
Built tokens first: color ramps, typography scale, spacing units. Design system documented in YAML before any screens were designed.
03
Screen Design
Figma-first. Four primary screens with all states: default, hover, active, empty states, loading skeletons.
04
Frontend Build
Coded in HTML + Tailwind CSS with custom config. Pixel-precise implementation from Figma. Glassmorphism, transitions, responsive layout.
05
Flow Testing
Walked through the full purchase flow 3 times, identifying friction points in the CTA hierarchy and spec presentation.
Outcomes & Metrics

What this project
demonstrates

As a concept project, success is measured in design decisions made, skills demonstrated, and the quality of the thinking behind each screen.

4
Complete screens designed & coded
HOME · CATALOG · DETAIL · CART
3
Typefaces in a strategic hierarchy
BODONI · GEIST · JETBRAINS MONO
2+
Weeks from brief to coded prototype
FIGMA → HTML → TAILWIND
Key Learnings

What I took away

01
Design systems before screens
Building the token system in YAML first — before opening Figma — forced me to make intentional decisions about color, type, and spacing that held up across all four screens without rework.
02
Technical data is an asset, not a burden
Most designers treat spec sheets as a problem to hide. Presenting them as a primary design element — in monospace, visually prominent — actually strengthens trust and differentiates the product.
03
Glassmorphism requires restraint
The effect works when it references a physical material. Applied carelessly it becomes noise. Every translucent layer in this project corresponds to a real-world material: glass, steel, aluminum.
04
Brief writing shapes design quality
Writing a real brief for a concept project — including user persona, tone of voice, and constraints — forced the same rigorous thinking I'd apply to a paying client. The output reflects that discipline.
Let's work together

Ready to build something
this precise?

I design and build full-stack UI products — from design systems to coded prototypes. Available for project-based work and retainer engagements.

Get in touch ↗ View more work