Overview
I led the end-to-end mobile product design, responsible for user research, bidirectional information architecture, UX flows, and production UI across 3 languages with full native Right-to-Left (RTL) support.
The project required balancing diverse user intents while maintaining natural, culturally authentic experiences for Arabic-first users.
About the Project
Diyar is a comprehensive real estate mobile application crafted for property buyers, renters, and institutional investors across North Africa.
The Problem
Fragmented Real Estate Search & Translation Gaps
People were finding homes through scattered listings and messaging groups, with little information about the property, its location, or the broker. Translation alone was not enough; reading order, navigation, and directional cues all had to work right to left.
The core design challenge: Create a high-trust, bidirectional property marketplace that feels genuinely native to Arabic-first users rather than a translated template.
Three Structural Hurdles:
1. Multi-intent fragmentation: First-time buyers, short-term renters, and commercial investors have contradictory search priorities. 2. Bidirectional layout mirroring: True RTL requires flipping layout hierarchies, directional icons, gestures, and animations. 3. Broker accountability: High rates of ghost listings demand upfront credibility indicators rather than blind inquiry forms.
The Thinking Process
Uncovering Bidirectional & Cultural Nuances
Conducted field interviews with buyers and local brokers across Casablanca, Rabat, and Marrakech.
- Users immediately detect pseudo-RTL implementations where chevrons, animations, and reading order clash.
- Complex mortgage forms with 7+ input fields caused high abandonment among serious buyers.
- Buyers prioritize agent response reliability and verified credentials over generic listing descriptions.
Bidirectional Symmetry & Progressive Math
Architected mirrored layout tokens and interactive progressive disclosure calculators.
- Designed every viewport in dual LTR and RTL layouts simultaneously to detect mirroring friction early.
- Converted complex mortgage math into a live interactive simulator that calculates payments incrementally.
- Positioned broker credibility signals (verified badges & response times) directly onto property cards.
Native Localization & Unified Component System
Delivered a production-ready mobile design system supporting Arabic, French, and English.
- Shipped synchronized directional animations and icon mirroring rules for authentic Arabic reading flow.
- Embedded contextual interactive map previews directly inside the listing stream, increasing map discovery by 3.4x.
- Unified consumer exploration tools and broker listing management on a shared component library.
Key Iterations
V1 Top-Level Map Toggles & Monolithic Loan Forms
The map view was initially hidden behind an upper header toggle that users frequently missed. The mortgage calculator presented all required inputs at once, overwhelming first-time buyers.
V2 Embedded Map Previews & Progressive Disclosures (Shipped)
Integrated interactive mini-map previews directly on listing cards. Refactored the mortgage tool to disclose down payment first, then interest rate, updating estimated monthly payments live as users type.
The Solution
#1 Both Directions, Side by Side
Every component mirrors naturally in Arabic. Navigation, swipe gestures, back transitions, and directional icons flip seamlessly to match right-to-left ergonomics.
#2 The Map Comes to You
Mini-map previews embedded inside the listing feed, making location visible while browsing and driving a 3.4x increase in map discovery.
#3 Step-by-Step Mortgage Calculator
An interactive financial calculator on property detail pages providing instant affordability insights as parameters change.
Architecture & Scale
Single Engine, Three Languages
Components are authored once with directional tokens, allowing seamless switching across Arabic, French, and English without layout breakage.
City-Adaptive Filter Surfaces
Filter defaults dynamically adjust based on active city conventions (e.g., specific amenities in Marrakech vs. commercial hubs in Casablanca).
Key Takeaways
- Localisation changes how a product works, not just how it reads.
- Comparing both directions early catches inconsistencies while they are still small.
- Location, price, and broker details work best right where people make decisions.