KEYVANY UAEAUTOMOTIVE SHOWROOM + CONFIGURATOR
Automotive theatre becomes useful when original vehicle evidence, exact commercial status and a structured path to specification share one restrained digital environment.
A private automotive atelier translated into two clear digital routes: inspect a finished build or configure a vehicle-specific specification for atelier review.
- STATUS
- LIVE / CLIENT WORK
- SECTOR
- AUTOMOTIVE / LUXURY / CONFIGURATION
- ROLE
- CREATIVE DIRECTION + UX/UI + DEVELOPMENT
- DELIVERED
- DIGITAL DIRECTION / SHOWROOM UX / RESPONSIVE NEXT.JS BUILD
PROJECT NOTELIVE CLIENT WEBSITE / PRICE, AVAILABILITY AND FITMENT REQUIRE ATELIER CONFIRMATION / MEDIA RIGHTS REQUIRE CLIENT CONFIRMATION.
THE PROJECT IN CONTEXT
What the site had to solve.
KEYVANY UAE needed a digital atelier that could present photographed complete builds and guide owners toward model-specific carbon, wheel and interior programmes.
How can an automotive website deliver cinematic desire while separating real showroom evidence, configurable scope and the exact point where human review begins?
- AUDIENCE
- UAE and international owners or buyers considering a finished KEYVANY vehicle, a body programme or a model-specific custom build.
- PRIMARY JOB
- Understand the available work, evaluate a real vehicle and send the Dubai team one structured, commercially useful enquiry.
- CORE CONSTRAINT
- Finished cars and made-to-order programmes require different decisions, while premium visual drama cannot obscure price status, fitment or the route to a reviewed quotation.
- BIMZI ROLE
- CREATIVE DIRECTION + UX/UI + DEVELOPMENT
- PUBLICATION STATE
- LIVE / CLIENT WORK
Design is the decisions between screens.
These are qualitative interface changes, not invented performance metrics.
- 01PRESSURE
A finished vehicle and a custom build are not the same purchase decision.
DECISIONSeparate the showroom from the configuration route at the first meaningful choice.
CHANGEVisitors can evaluate a real car or begin their own specification without crossing two competing catalogues.
- 02PRESSURE
Luxury claims are weak without visible proof and clear commercial status.
DECISIONUse original build photography, model-specific galleries and price-on-request labels as the evidence layer.
CHANGEThe product story stays cinematic while the visitor can identify what is real and what still requires quotation.
- 03PRESSURE
An open-ended enquiry often reaches the atelier without enough detail to review.
DECISIONCollect the vehicle, intended scope and preferred response path before the quotation handoff.
CHANGEInterest becomes a structured brief that the Dubai team can evaluate and continue.
CINEMATIC AUTOMOTIVE PRECISION
A system, not a moodboard.
- TYPE
- Instrument Sans spans monumental editorial display, compact uppercase evidence labels and calm product copy.
- COMPOSITION
- Full-bleed vehicle photography and dark showroom chapters alternate with pearl specification and configurator surfaces.
- SIGNATURE
- Copper signals and restrained lines turn technical selection into an atelier interface without generic dashboard chrome.
- GRAPHITE#08090A
Primary showroom canvas and cinematic depth
MEASURED / keyvany-final-release/src/app/globals.css - PEARL#EBE8E1
Configurator workspace and evidence surface
MEASURED / keyvany-final-release/src/app/globals.css - WHITE#F8F6F1
Primary inverse text and action surface
MEASURED / keyvany-final-release/src/app/globals.css - COPPER#D48A43
Selected state, metadata and atelier signal
MEASURED / keyvany-final-release/src/app/globals.css
This is BIMZI's evidence-led case analysis, not an official client brand guide. Source-code facts are marked MEASURED; independent audit, licensing and field-performance gaps remain explicit.
Typography
- FAMILYMEASURED
Instrument Sans Variable for display, body and metadata
SOURCE / keyvany-final-release/src/app/globals.css - DISPLAYMEASURED
500 weight, −0.032em tracking and 0.97 line height
SOURCE / keyvany-final-release/src/app/globals.css - EVIDENCEOBSERVED
Small uppercase labels with wide tracking separate model, status and action
SOURCE / keyvany.ae live site, observed 2026-09-01
Grid & spacing
- HOMEOBSERVED
Full-viewport vehicle stage with two explicit route entrances
SOURCE / https://keyvany.ae/ - SHOWROOMOBSERVED
Vehicle-led catalogue followed by dedicated build stories and galleries
SOURCE / https://keyvany.ae/complete-cars/ - WORKSPACEOBSERVED
Dark editorial browsing changes to a light specification environment
SOURCE / https://keyvany.ae/configure/
Components
- SHOWROOM CARDOBSERVED
Original vehicle media, segment, model and price-on-request status
SOURCE / https://keyvany.ae/complete-cars/ - BUILD STORYOBSERVED
Model overview, at-a-glance specification and controlled gallery
SOURCE / keyvany.ae live build detail, observed 2026-09-01 - CONFIGURATOROBSERVED
Vehicle-first parts selection and structured enquiry output
SOURCE / https://keyvany.ae/configure/
Responsive
- HEROOBSERVED
Vehicle focal point and action hierarchy are art-directed for narrow screens
SOURCE / KEYVANY live mobile review, 2026-09-01 - CONFIGURATIONOBSERVED
Selection stages become a linear touch-first specification path
SOURCE / KEYVANY live mobile review, 2026-09-01 - MOTIONMEASURED
Brand intro and reveals retain non-moving reduced-motion fallbacks
SOURCE / keyvany-final-release/src
Implementation
- STACKMEASURED
Next.js 16.2 / React 19.2 / TypeScript 6
SOURCE / keyvany-final-release/package.json - MEDIAMEASURED
Responsive WebP vehicle sources and model-specific gallery data
SOURCE / keyvany-final-release/src - HOSTINGOBSERVED
Netlify production with security headers and static route output
SOURCE / keyvany.ae response headers, observed 2026-09-01
Quality status
- ACCESSIBILITY / CONDITIONALOBSERVED
Skip link, visible focus, carousel semantics and reduced motion are present
SOURCE / KEYVANY live source review, 2026-09-01 - COMMERCIAL CLARITYOBSERVED
Finished builds expose price-on-request and quotation-dependent status
SOURCE / https://keyvany.ae/complete-cars/ - FIELD PERFORMANCENOT VERIFIED
Core Web Vitals, enquiry completion and showroom engagement
SOURCE / BIMZI case audit
The path through the product.
The visual system supports this route; it does not replace it.
- 01Choose finished car or custom programme
- 02Inspect a vehicle or select the base model
- 03Review evidence, parts and commercial status
- 04Define the desired scope
- 05Send a structured enquiry for atelier review
Selected screens.
Direct captures of the working website, shown across desktop and mobile.
What BIMZI made, and what is not claimed.
The live English-language UAE website connects editorial vehicle stories, an eight-car showroom, model-based configuration and private enquiry in one consistent journey.
Contribution
- Creative direction
- Showroom information architecture
- Configurator UX/UI
- Responsive Next.js development
- Launch verification and Netlify delivery
Known unknowns
- The public website does not independently verify BIMZI authorship or project credits.
- Vehicle price, availability, fitment and build-slot timing require atelier confirmation.
- Vehicle photography and KEYVANY brand-asset reuse permission require client confirmation.
- No enquiry, sales or field Core Web Vitals data was supplied.
06 / WHY THIS CASE MATTERS