CarZone: From Logo to Production Showroom
CLIENT
CarZone
ROLE
Design & Development
DURATION
2025 - 2026
TECH_STACK
PROJECT_URL
view_siteEnd-to-end
Brand to ship
Conversion
Prerender
Production
Showroom
Design system
CONTEXT
CarZone is a premium car-accessories showroom in Delhi. Buyers browse audio, lighting, floor mats, and fitment work on mobile, often between errands or in a parking lot. They want to compare products, trust the install quality, and reach the shop without creating an account or fighting a checkout flow. The client needed a web presence that felt like walking into a clean, daylight showroom, not another dark neon garage site.
THE CHALLENGE
The hard part was defining a brand and UI that could carry premium positioning without copying marketplace templates or racing aesthetics. Success meant enquiry volume through WhatsApp, not online sales. That constraint shaped everything: no cart, no forms as the primary CTA, category-first navigation, and motion that feels cinematic without punishing Core Web Vitals or users who prefer reduced motion.
APPROACH
I owned the full path from logo treatment and design tokens through production Nuxt 4 code. The site is a persuasive catalog: cinematic homepage, category telemetry grid, product detail with pre-filled WhatsApp quotes, and showroom story pages. All prerendered for fast first paint on mobile networks.
Showroom Ivory design system
Warm OKLCH ivory surfaces, Bricolage Grotesque + Albert Sans, accent sampled from hero video red. Documented in DESIGN.md and enforced through tokens.css. Product photography carries color. The UI stays quiet.
WhatsApp as the only conversion path
Every product and category ends in a deep link with context pre-filled. Sticky FAB on all pages. Real links with accessible names, not JavaScript-only buttons.
Nuxt Content + Zod catalog
Categories and products live as validated JSON under content/. The client can extend the catalog without touching Vue components. useCatalog composable keeps pages thin.
Cinematic motion with guardrails
GSAP for homepage boot loader, partner marquees, bento gallery chapters, and full-screen mobile nav. ScrollTrigger reveals respect prefers-reduced-motion globally.
TECHNICAL HIGHLIGHTS
Signature UX pieces that sell the showroom feel without bloating the stack.
- Studio boot loader: homepage-only cinematic intro with critical CSS inlined in nuxt.config head
- CinematicHero with video backdrop and staggered GSAP entrance after boot completes
- PartnerWall dual-row marquee with per-brand typography for install partners (JBL, Pioneer, etc.)
- BentoGallery scroll chapters tied to studio story data and showroom photography
- MobileNavOverlay: full-screen GSAP scene transitions with scroll lock and reduced-motion fallback
- F1-inspired category grid on /categories: telemetry UI without abandoning the ivory brand
- Nitro prerender rules for /, /about, /contact, /categories/**, and /products/** with crawlLinks
OUTCOME
The site is live on staging at carzone.mhdyousuf.me while the client finalizes their production domain. Built for one-click deploy to Vercel, Netlify, or Cloudflare Pages. The brand reads premium in daylight, the catalog is browsable without login, and every product path lands in WhatsApp with enough context for the shop to quote quickly.
LIVE PREVIEW
Browse the staging build. Cinematic homepage, category grid, product catalog, and WhatsApp CTAs.
LEARNINGS
- When conversion is WhatsApp, design the entire IA backwards from the pre-filled message. Specs, category, and product slug should survive the handoff
- Premium automotive retail fails when the UI competes with product photography. Ivory surfaces and restrained motion let the installs speak
- A boot loader only works if it is homepage-only and has a reduced-motion exit. Return visitors should not wait through theatre twice
- Client catalogs in JSON + Zod beat a CMS for v1. Fewer moving parts, faster ship, and the schema documents what each product needs