Car import & showroom · Bilingual RTL · Self-initiated concept

Al-Shazly Group

An Egyptian luxury car importer with a flagship showroom in Mivida and 83.2K followers on Instagram was sending phone visitors into a slow logistics template with no prices and nowhere to submit a build code. I rebuilt the entire pre-contract journey for a phone.

Role
Diagnosis + UX/UI + 38-page static build
Category
Luxury car import · Showroom
Platform
Vanilla JS · Node.js generator · Bilingual AR/EN
Overview

استورد سيارتك من موبايلك.

Al-Shazly Group has imported luxury cars on behalf of clients since 2013, growing out of Egyptian ports into branches in New Cairo (Mivida), Alexandria and Sharjah. Outside their New Cairo storefront sit real Bentley Bentaygas, Lexus LX 700s, Maybach V-Classes and sold Ferrari and Lamborghini supercars.

Their existing website told a completely different story: a generic logistics template with zero prices, stat counters stuck at 0%, a 3.3 MB initial load across 102 requests, and a "Design your car" page that sent buyers to German configurators telling them to return with the configuration code while offering no field on the page to paste it.

I rebuilt the whole pre-contract journey across 38 static pages in Arabic and English: browse ready showroom cars with an estimated landed range, calculate the landed cost of any car line by line, paste a maker build code into a 4-step order wizard that issues a reference number, and track a shipment by the last 6 digits of its VIN.

Diagnosis

Three questions every buyer asks before visiting a branch

A buyer arriving from Instagram on a phone wants to know what the car will cost landed and registered, how long the import takes, and how their money is protected. The old site left all three unanswered.

01

A configurator bridge with no landing

The old "Design your car" page linked out to 18 manufacturer configurators and instructed the visitor to come back with the configuration code or PDF. Returning visitors found no input field, no upload button and no form to receive that code.

02

Opaque import math

Because exchange rates move daily, the old site hid prices entirely. That forced every curious visitor into a manual WhatsApp loop while giving serious buyers no way to compare European EUR.1 customs relief against Gulf import duties.

03

102 requests on mobile cellular

Nearly all traffic comes from social links on a phone, yet the old homepage loaded 3.3 MB across 102 requests before settling. The new build ships zero frontend libraries and loads in 14 requests at roughly 450 KB.

The experience

The Mivida showroom, translated to a phone screen

Storefront black panels carry the cars, warm Egyptian sandstone fields carry the explanations, and a paper build sheet carries every number.

01

Parked across the seam

Real cars photographed outside the Mivida showroom were cut out and parked across the black-to-sandstone border on the hero stage and every showroom card, paired with an estimated landed range in EGP.

02

Price structure before pressure

The estimator takes the home-market price in EUR, USD or AED, engine displacement and origin, then prints a line-by-line build sheet: car price, sea freight, customs and taxes, clearance, and service fee.

03

From build code to VIN tracking

A sticky paste bar on the configurator page sends the maker build code into a 4-step order wizard that generates a reference number and routes WhatsApp orders to Cairo or Sharjah, followed by a 7-stage VIN tracker.

Al-Shazly Group redesigned Arabic homepage: stage car, two paths, showroom inventory, landed-cost estimator, 5-stop import route, trust checks, VIN tracker, FAQ and branches
The full Arabic homepage: showroom stage, ready inventory, live landed-cost estimator, five-stop import route and trust checklist.
Mobile-first

Every pre-contract step, one-handed on a phone

From browsing two-column showroom cards to estimating customs and checking where a car carrier is in the Mediterranean.

Al-Shazly mobile showroom cards with parked cutouts and estimated price ranges
Showroom: compact two-column cards with estimated landed ranges
Al-Shazly mobile landed-cost estimator build sheet
Estimator: itemized customs, freight and registration sheet
Al-Shazly mobile 7-stage VIN shipment tracker
VIN tracker: seven dated milestones from dealer to delivery
A walkthrough of the mobile showroom, landed-cost estimator, 4-step order flow and VIN tracker.
Where it goes next

The 38-page static site is ready to deploy on any edge host. The 4-step order wizard already supports a JSON webhook attribute so a CRM can be wired in without changing the frontend, while keeping the formatted WhatsApp handoff as a reliable fallback.

Connecting the live customs coefficients, confirmed showroom ranges and internal shipment database turns the preview into the production flagship.

Demo

Walk through the showroom on your phone.