Auto Enhance
Online retail for automotive parts, structured for fitment and clarity.
- Role
- UX/UI Design
- Type
- E-commerce storefront
- Focus
- Fitment · Technical detail · Trust
- Year
- 2024
About
An e-commerce project shaped by the automotive customer — technical buyers who need to confirm fitment and trust the detail before they buy.
Auto Enhance needed a storefront that could carry an automotive catalogue without losing the technical detail that customers rely on to buy.
The work covered the full customer-facing experience — discovery, fitment confidence, product detail, cart, and checkout — with each surface designed around the specific information a buyer needs at that moment. Automotive retail puts more weight on the product page than almost any other vertical: a buyer needs to see what a part is, what it's compatible with, and what fits their specific vehicle before they add it to the cart.
The whole system bends around making the fitment decision easier.
Outcomes
PLACEHOLDER — owner to supply real outcome metrics.
—
Headline metric one
PLACEHOLDER — owner to supply.
—
Headline metric two
PLACEHOLDER — owner to supply.
—
Headline metric three
PLACEHOLDER — owner to supply.
—
Secondary metric
—
Secondary metric
—
Secondary metric
—
Secondary metric
PLACEHOLDER — secondary metrics, owner to supply.
Phase one · The brief
Fitment, without ambiguity.
The site needed to:
- Make fitment unambiguous — a customer needs to know quickly whether a part fits their vehicle.
- Carry deep technical detail on each product without burying the buying decision.
- Compose a consistent product page pattern that works across very different product categories.
- Read as expert and trustworthy — the audience can tell when retail design hides a thin catalogue behind decorative copy.
Phase two · The people
Who the storefront is for.
PLACEHOLDER — a short framing sentence introducing the three buyer types the storefront was designed to serve (e.g. DIY enthusiasts, workshops, trade).
Persona one
Role / buyer type
PLACEHOLDER — who this buyer is, their context, and what brings them to the store.
What they need
PLACEHOLDER — the primary need or job this buyer brings to the experience.
Persona two
Role / buyer type
PLACEHOLDER — who this buyer is, their context, and what brings them to the store.
What they need
PLACEHOLDER — the primary need or job this buyer brings to the experience.
Persona three
Role / buyer type
PLACEHOLDER — who this buyer is, their context, and what brings them to the store.
What they need
PLACEHOLDER — the primary need or job this buyer brings to the experience.
Phase three · Approach
Start at the product page.
The work started with the product page, because in automotive retail that's where the sale happens. Every other surface composes from patterns established there. The structural decisions:
- How fitment surfaces on the product card itself — visible at the listing level, so a customer can rule out non-matches before they click.
- How a product detail page paces information — the primary buying decision first (image, fitment, price, add-to-cart), supporting detail below.
- How listing and category pages use filtering and sort the way automotive buyers actually search — by vehicle, not abstract category.
Phase four · Design system
A system built around detail.
A system built around technical detail. The automotive buyer expects expert-feeling content; the system foregrounds typographic hierarchy and lets neutral surfaces carry detailed product photography without competition.
- Typography — headings carry the brand, body reads as expert, tighter scales for specs, fitment chips, and application notes
- Colour — near-neutral foundation with a confident accent for primary actions and fitment / availability states
- Layout — stable rhythm across product detail pages; sticky surfaces (add-to-cart, fitment, price) hold their position
- Components — product card with fitment chip, product detail block with spec table, fitment filter group, comparison row, application list
Figma asset — Design system showcase — typography ramp, colour palette, spacing scale, and core component patterns including product cards and fitment chips
Phase five · Selected screens
Selected screens.
The key surfaces at a glance.
Auto Enhance homepage
Homepage — hero and featured categories. Lead with the buyer's vehicle, not a generic banner.
Domain-specific UI deserves first-class design attention, not a generic component bent into shape. Product detail in automotive retail is the same problem as a complex configuration screen in B2B SaaS.
— Reflections
More case studies
