Case Study · 2026
XZone
Enter the X Zone.
All the tech in one zone — an Arabic-first public website for XZone Stores: hot drops with live EGP pricing, seven shopping zones, a repair lab with written warranty, seasonal bundles, branded reels and four Cairo branches on one map.
Zone Map
Six surfaces, one grid.
01 · The Request
One Zone For All Of It
XZone runs four consumer-electronics stores across Cairo — Maadi, Mohandeseen, Nasr City and New Cairo — selling phones, laptops, audio, watches, accessories and scooters, and repairing what it sells. Online it existed as a phone number and a stream of social posts.
The brief was a single Arabic-first site carrying the whole business: what is in stock this week, what each zone contains, what the repair lab actually does, where the branches are, and how to reach a human in under a minute.
- Arabic-first copy with English micro-labels — not a translated theme.
- Seven shopping zones, each with its own entrance.
- A repair lab that proves the work instead of claiming it.
- Four branches with directions, WhatsApp and phone on every card.
02 · The Problem
What Electronics Buyers Are Really Asking
Nobody spends a flagship budget on a phone from a site they cannot verify. Three doubts kill an electronics sale online, and all three had to be answered on the page itself.
01
Is It Actually Original?
Grey-market stock and swapped parts are the default suspicion in this market. Sealed, original and warranted has to be stated on the product card, not buried in a policy page.
02
Who Fixes It Afterwards?
Repair is where trust is won or lost. A retailer that sells and disappears is a retailer you buy from exactly once.
03
Where Is The Actual Shop?
Four real branches are the strongest asset the chain has — and the hardest thing to make felt through a product grid.
03 · Our Solution
A Storefront Built On Proof
We built one Arabic-first site where every claim has something behind it: prices printed on the cards, a drag slider showing a real repair, warranty stated in months, and four branch cards carrying directions, hours and a phone number. One orange on off-white, near-black cards, and English micro-labels holding the grid together.
Hot Drops
A weekly drops rail with zone tags, stock state and EGP prices on the card — the flagship gets a double-width stage of its own.
Seven Zones
Mobile, Laptop & Mac, Audio, Watches, Accessories, Scooters and the Repair Lab — one drag rail, seven entrances.
Repair Lab
Drag before and after, original parts, three- and six-month written warranty, and a booking console that ends in WhatsApp.
Four Branches
A custom Cairo map with four pins, each card carrying address, services, directions, WhatsApp and call.
Inside the Website
Every section, explained.
12 sections inside the XZone storefront — each one designed, built and shipped on the live site.
Scroll the reel sideways →
"
People used to call just to ask whether the phone is original. Now they send a screenshot of the page and ask which branch to pick it up from.
04 · Implementation
How We Built It
From art direction to a live Arabic-first storefront — our four-step delivery for XZone Stores.
01
Arabic-First Art Direction
We set the direction around one orange on off-white with near-black cards, then built the layout Arabic-first and let the English micro-labels act as structure rather than translation.
02
Catalogue & Zone Structure
We mapped the business into seven zones, a weekly drops rail, a campaign slot, an editorial picks block and a repair service list — all authored as editable content with prices in EGP.
03
Interaction Build
The drag zone rail, the scroll-pinned featured product, the before and after repair comparator, the reel carousel, the delivery motion path and the clickable branch map were built as reusable blocks on Laravel Blade with scoped CSS.
04
Branch Data & Launch
We loaded the four branch cards, wired every WhatsApp, call and directions route, connected the repair booking to the branch numbers, then shipped.
05 · Results
The Outcome
7
Shopping Zones
4
Cairo Branches
3 / 6
Months Written Warranty
AR / EN
Arabic-First Throughout
Four branches. One zone.
Next Project
Selling electronics people need to trust?
We build public storefronts that answer the three questions every buyer asks before they pay — is it original, who fixes it, and where are you — and put the answer on the page instead of in a policy.
