City Center Doha:
Digital Transformation.
Reimagining Qatar's premier retail destination for the digital age through high-performance architecture and fluid localization.
Role
UX/UI Lead & Full Stack Developer
Impact
2x Leads, 100% Directional Fluidity
Strategic Objectives
Enhance Digital Presence
Modernizing the mall's digital core to match its status as a premier retail destination in Qatar.
Customer Navigation
Improving event discovery and spatial navigation through intuitive digital interfaces and real-time updates.
Retailer Visibility
Supporting 350+ tenants through improved digital discoverability and high-impact placement within the platform.
Mission & Strategic Context.
The challenge was to modernize a legacy platform for one of Qatar's largest malls, ensuring high stability while delivering a unified, localized experience for both English and Arabic speakers.
The Friction
- Users struggled to discover stores efficiently across 350+ tenants
- Mobile experience caused drop-offs in navigation flows
- Lack of real-time updates reduced engagement during events
Strategic Trade-offs
- Prioritized fast discovery over deep filtering to improve navigation speed
- Limited heavy animations to maintain performance across low-end mobile devices
Designed for
Retail Excellence.
A high-performance digital ecosystem optimized for every touchpoint. From large-scale mall directories to swipe-friendly tenant highlights on mobile devices.
Main Portal
1920×1080
Tablet View
768×1024
Mobile App
375×812
Responsiveness
Agility
Standards
Discovery & Spatial Strategy.
How we engineered a fluid discovery system for over 350+ retailers. The challenge was balancing immediate search accessibility with intuitive category exploration.
Key Insight"Users preferred quick scanning over deep exploration, which led to prioritizing visual grids and instant search over layered navigation."
Global Instant Search
Predictive shop results with real-time indexing.
Smart Categorization
Hierarchical taxonomy for seamless browsing.
Fluid Grid System
Responsive shop cards that adapt to viewport density.
2️⃣ Localization:
Fluid Interface Inversion.
Native LTR to RTL Architecture
// Directional Logic
.ui-adaptive {
direction: var(--interface-dir);
text-align: var(--alignment);
padding-inline-start: 2rem;
}
/* Mirrors padding, margins, and flex-flow seamlessly */
Interactive Content Toggle
Experience how the entire interface adapts to regional requirements. Toggle between English (LTR) and Arabic (RTL) to see the dynamic inversion of visual components and content hierarchy.
Mirroring Active
direction: ltr; // Standard
3️⃣ Key Metrics
Stability
Ensuring zero downtime during peak retail seasons and massive marketing campaigns.
Leasing Leads
Integrated robust lead capture workflows via SMTP, doubling high-value conversion rates.
Efficiency
Reduction in content update turnaround time via custom component-based ACF management.
Visual Context.
"Bridging the physical and digital retail experience."
Omnichannel Strategy
Unified design system across web, mobile, and in-mall digital signage.
Design System & Style Guide
The visual language that defines City Center Doha's digital presence.
Typography
Aa
Myriad Pro
Primary Heading
Medium 48px
Digital Destination.
Sub-headings
Medium 28-36px
Retail Excellence Reimagined.
Body & UI
Regular 16-18px
Designed for readability and accessibility across all touchpoints, from digital directories to mobile navigation.
Color Palette
#263A7C
Brand Identity
Primary Blue
#61CE70
Action/Accent
Emerald Green
#CCD0DD
Secondary
Cool Silver
#484848
Text/Contrast
Dark Grey
#E9EBEF
Surface/Bg
Brand Light
#1B1B1E
Main Background
Ebony Dark
The Outcome
The digital transformation has created a future-ready ecosystem that enhances the shopping experience while driving measurable value for retailers.
Created a scalable digital platform for the mall ecosystem
Enabled multilingual access for international visitors
Improved mobile accessibility for shoppers on the go