theSarmad
0%
Home/Case Studies

Web Design & SEO Case Studies

Real-world web design and custom development case studies. Objectives, work completed and process documented.

Dubai Guide Tours website homepage — 162-page tour booking platform
Web Design · Custom Development · SEO

Dubai Guide Tours — 162-Page Tourism Platform

Client
Tour operator · Dubai, UAE
Objective
Build a complete tour booking platform that showcases 100+ Dubai experiences across 13 categories — without relying on WordPress or any third-party page builder.
Challenges
  • 162 pages needed a scalable, maintainable structure — templates wouldn't cut it
  • Required a custom booking flow with coupons, currency options and WhatsApp integration
  • Needed strong SEO from day one: schema markup, sitemap, canonical tags across all pages
  • Dark luxury aesthetic had to stay consistent across dozens of page types
Work Completed
  • Custom design system — dark theme + gold accents, glassmorphism cards, Playfair Display + Inter typography
  • 162 handcrafted pages — 9 root, 13 category pages, 121 individual tour pages, 6 blog posts, 13 misc pages
  • 4-step booking wizard — from experience selection to WhatsApp confirmation
  • Coupon system — 7 working discount codes (WELCOME10, DUBAI15, VIP25) using localStorage
  • Personalization features — wishlist page, recently viewed tours, currency selector
  • Live filters — 13 categories, price ranges, sort options across tour listings
  • Social proof elements — booking counter, urgency messages, live viewer ticker, review carousel
  • SEO foundation — schema markup, 140+ URL sitemap, canonical tags, FAQ schema, unique meta descriptions per page
  • Mobile-first responsive — 5 breakpoints, sticky mobile book bar, WhatsApp floating button
Tech Stack
HTML5 (162 pages) · CSS3 (16 modular files) · Vanilla JavaScript (17 modules, no libraries) · Font Awesome · Google Fonts · localStorage for client-side state · Static hosting
Timeline
Multi-week phased build — architecture, tour pages, booking system, optimization
Outcome
Delivered a fully self-contained tour booking website without any backend dependency — every feature works from static files, deployable to any host. The site remains one of the largest single-project builds in my portfolio.

Client metrics not disclosed at time of publication.
Published with client permission Visit live site
Desert Dinner Dubai website homepage — luxury desert dining experience
Web Design · Luxury Branding · Custom Booking

Desert Dinner Dubai — Luxury Desert Dining Platform

Client
Luxury desert dining brand · Dubai, UAE
Objective
Design and build a premium, custom-coded website for luxury private desert dinners — with a 9-step booking wizard, coupon system and full engagement features. No WordPress, no page builders.
Challenges
  • Luxury positioning required restraint — dark theme, sand/cream palette, Arabian aesthetic
  • 9-step booking wizard needed to handle multiple experience types and pricing models
  • 18 individual experience pages had to share a consistent structure while staying unique
  • Images were originally 116 MB — needed 80% compression without losing visual quality
Work Completed
  • Premium design system — Cormorant Garamond + Inter, cream/sand/navy/gold palette, thin gold borders, uppercase labels
  • 47 handcrafted pages — 9 core + 18 experience pages + 5 destination pages + 4 blog + 7 legal pages
  • 9-step booking wizard — Experience → Date → Guests → Occasion → Setup → Extras → Pickup → Details → Review
  • Smart Book — URL-based auto-prefill (book.html?package=X&coupon=Y)
  • Quick Book — inline form on all 18 experience pages
  • 17-coupon system — DESERT10, ROMANTIC15, VIP500, LUXURY500 and more
  • Group booking calculator — instant price estimate for large groups
  • Engagement systems — live booking notifications, exit-intent popup, availability badges, flash sale countdown
  • Image optimization — 116 MB → 22.5 MB (80% reduction via PowerShell + cwebp)
  • Global features — currency selector (AED/USD/EUR/GBP), language selector, timezone display, Google Maps embed
  • Responsive v3 — mobile-first CSS overrides, iOS 100svh fix, sticky mobile CTA bar
  • SEO + Analytics — schema markup, OG tags, canonical URLs, GA4 (G-MEYHW0H1NE) on all 47 pages
Tech Stack
HTML5 · CSS3 (12 modular files) · Vanilla JavaScript (11 modules) · Google Fonts · GA4 tracking · Image optimization pipeline (cwebp + PowerShell) · Static hosting (Hostinger)
Timeline
Phased build — brand system, experience pages, booking wizard, engagement systems, image compression, responsive refinement
Outcome
A luxury-focused brand experience delivered entirely with hand-written code — no CMS, no framework, no plugins. The 9-step wizard handles complex booking flows from static files, and the site remains fast despite handling heavy image content.

Client metrics not disclosed at time of publication.
Published with client permission Visit live site
Start a Project

Want a website like
these? Let's talk.

Tell me about your project. I'll come back with a clear scope and honest timeline.

Start a Project WhatsApp