Reimagining Map Experience

Reimagining Map Experience

Reimagining Map Experience

How UX Redesign Increased Property Interactions By 60%

How UX Redesign Increased Property Interactions By 60%

How UX Redesign Increased Property Interactions By 60%

I redesigned the property map visuals and interactions in the mobile app, introducing a more user-friendly browsing experience. This led to a 60% increase in map interactions and a 35% boost in user satisfaction.

I redesigned the property map visuals and interactions in the mobile app, introducing a more user-friendly browsing experience. This led to a 60% increase in map interactions and a 35% boost in user satisfaction.

I redesigned the property map visuals and interactions in the mobile app, introducing a more user-friendly browsing experience. This led to a 60% increase in map interactions and a 35% boost in user satisfaction.

In partnership with:

My role

My role

Product designer

Timeline

Timeline

2 Months (8/2023)

Team

Team

6

The story behind

The story behind

The Spark That Started It All

The Spark That Started It All

How did it start?

How did it start?

How did it start?

When I joined DealApp as a Product Designer, in my first week there, my friend and manager, Mohammed Medhat, brought my attention to a critical issue in the app’s property browsing map. Both clients and agents were struggling with a clunky, outdated interface that made discovering properties frustrating and unintuitive.

Digging into the data, CTR, engagement metrics, and session recordings on Smartlook, it became clear: the map experience was broken. Users were bouncing almost immediately, showing signs of friction and low interaction. What should have been a key feature had become a dead zone. It was time to rethink the entire flow from the ground up.

When I joined DealApp as a Product Designer, in my first week there, my friend and manager, Mohammed Medhat, brought my attention to a critical issue in the app’s property browsing map. Both clients and agents were struggling with a clunky, outdated interface that made discovering properties frustrating and unintuitive.

Digging into the data, CTR, engagement metrics, and session recordings on Smartlook, it became clear: the map experience was broken. Users were bouncing almost immediately, showing signs of friction and low interaction. What should have been a key feature had become a dead zone. It was time to rethink the entire flow from the ground up.

When I joined DealApp as a Product Designer, in my first week there, my friend and manager, Mohammed Medhat, brought my attention to a critical issue in the app’s property browsing map. Both clients and agents were struggling with a clunky, outdated interface that made discovering properties frustrating and unintuitive.

Digging into the data, CTR, engagement metrics, and session recordings on Smartlook, it became clear: the map experience was broken. Users were bouncing almost immediately, showing signs of friction and low interaction. What should have been a key feature had become a dead zone. It was time to rethink the entire flow from the ground up.

Project summary

Project summary

A focused look at the problem, process, solution, and results.

A focused look at the problem, process, solution, and results.

User’s Problem

User’s Problem

User’s Problem

DealApp’s property map, once intended to support discovery, had become a serious usability blocker. Users, both home-seeking clients and real estate agents, entered the map and immediately hit a wall: stiff navigation, unclear filters, and a lack of guidance. Instead of helping users explore available properties, the map actively worked against them. Smartlook session recordings and in-app engagement metrics revealed a consistent pattern, high bounce rates, minimal interactions, and visible friction across sessions. The experience wasn’t just old; it was failing its purpose.

Our solution

Our solution

Our solution

I replaced the static flow with a fully interactive, map-first experience. Users can now zoom, pan, and filter listings directly on the map, with dynamic horizontal tabs and segmented filtering options, tailored to their needs, whether browsing properties, exploring requests, or locating agents. A seamless switch between map and list views enables smoother, more engaging and useful navigation.

Execution Process

Execution Process

Execution Process

To kick off the redesign, I aligned closely with both the product and business teams to surface key use cases, user needs, and context-specific pain points. I mapped out the different browsing goals for clients and agents, then designed wireframes for four distinct map views: one for exploring properties ads by area, one for client-submitted real estate requests, one for promoted listings, and one for viewing agents geographically across KSA. Each concept was rooted in real user behavior and location preferences. Feedback loops were tight, I presented iterations early, refined them collaboratively, and ensured alignment across teams before moving into high-fidelity designs.

Current solution

Current solution

Current solution

At the time, DealApp’s map feature displayed a non-interactive static map of Saudi cities. Users couldn’t zoom, scroll, or freely navigate the map. Instead, the flow was linear: tapping on a city pin opened a view of that city’s districts, and selecting a district would redirect to a property list view, with no map involved from that point on.

Design challenge

Design challenge

Design challenge

This wasn’t a minor UI tweak, it was a foundational UX problem dropped on my desk in my very first week at DealApp. The pressure was real. I had to quickly build context, think critically, and design solutions that didn’t just follow best practices, but made sense within users’ existing mental models. I ideated five distinct map exploration concepts, iterated fast, and aligned with stakeholders on the most promising direction. The challenge was not only about proposing a new interface, but securing buy-in for a completely new navigation logic that broke away from what users had been used to.

Solution Values

Solution Values

Solution Values

Location-based browsing

Intuitive navigation experience

Personalized map views

Faster access to relevant results

Numbers speaks

Numbers speaks

Numbers speaks

98.9%

98.9%

98.9%

less time to log expenses

less time to log expenses

less time to log expenses

75%

75%

75%

Less manual fin. team work

Less manual fin. team work

Less manual fin. team work

80%

80%

80%

Reduction errors and fraudulent entries

Reduction errors and fraudulent entries

Reduction errors and fraudulent entries

Tools & Practices

Tools & Practices

Blending design and product management, I led with vision and strategy, gaining confidence to explore, experiment, and learn fast.

Blending design and product management, I led with vision and strategy, gaining confidence to explore, experiment, and learn fast.

Blending design and product management, I led with vision and strategy, gaining confidence to explore, experiment, and learn fast.

Tools

Tools

To bring this redesign to life, I combined low-fi thinking with high-fi execution—balancing early sketching and ideation with collaborative design workflows. From aligning with teams to analyzing real user behavior, each tool played a key role in shaping a fast, insight-driven solution.

Notion

Figma

Pen & Paper

Zoom

Smartlook

Slack

Practices

Practices

The design approach blended user research with collaborative validation. We gathered input through interviews and surveys, analyzed behavior via session recordings, and tested early concepts to refine usability. Prioritization principles helped focus on what mattered most at each stage.

Stakeholder interviews

Surveys

User behavior recordings

Usability testing

Prioritization

Tools

To bring this redesign to life, I combined low-fi thinking with high-fi execution—balancing early sketching and ideation with collaborative design workflows. From aligning with teams to analyzing real user behavior, each tool played a key role in shaping a fast, insight-driven solution.

Notion

Figma

Pen & Paper

Zoom

Smartlook

Slack

Practices

The design approach blended user research with collaborative validation. We gathered input through interviews and surveys, analyzed behavior via session recordings, and tested early concepts to refine usability. Prioritization principles helped focus on what mattered most at each stage.

Stakeholder interviews

Surveys

User behavior recordings

Usability testing

Prioritization

Visuals

Visuals

Shaping TrustBill’s design from the ground up, without prior experience, just curiosity and persistence.

Shaping TrustBill’s design from the ground up, without prior experience, just curiosity and persistence.

Ads Map

Ads Map

An interactive property map where users can browse real estate listings by price and location, filter results, and switch views instantly. Designed for fast, intuitive exploration, whether on desktop or on the go.

Ads Map

An interactive property map where users can browse real estate listings by price and location, filter results, and switch views instantly. Designed for fast, intuitive exploration, whether on desktop or on the go.

Requests Map

Requests Map

Displays live user property requests across the map, allowing agents to explore demand by area and respond to relevant opportunities nearby.

Requests Map

Displays live user property requests across the map, allowing agents to explore demand by area and respond to relevant opportunities nearby.

Agents Map

Agents Map

Shows active real estate agents by location, helping users find nearby professionals based on their area of interest.

Agents Map

Shows active real estate agents by location, helping users find nearby professionals based on their area of interest.

Ad Preview

Ad Preview

Tapping a pin reveals key property details in a quick-view card, letting users browse nearby listings without leaving the map. Pin states update as they swipe or explore, keeping navigation smooth and focused.

Ad Preview

Tapping a pin reveals key property details in a quick-view card, letting users browse nearby listings without leaving the map. Pin states update as they swipe or explore, keeping navigation smooth and focused.

Ads List

Ads List

Accessible from the map via the “قائمة” button, this screen displays property ads in a scrollable list—perfect for users who prefer viewing details in a structured, card-based format with direct actions like sharing, saving, and WhatsApp contact.

Ads List

Accessible from the map via the “قائمة” button, this screen displays property ads in a scrollable list—perfect for users who prefer viewing details in a structured, card-based format with direct actions like sharing, saving, and WhatsApp contact.

Submit Request

Submit Request

When users can’t find what they’re looking for, tapping “اطلب عقارك” opens a smart, in-context request form. It lets them submit their needs quickly—directly within the map—making the process faster, more intuitive, and increasing engagement by converting searchers into active clients.

Submit Request

When users can’t find what they’re looking for, tapping “اطلب عقارك” opens a smart, in-context request form. It lets them submit their needs quickly—directly within the map—making the process faster, more intuitive, and increasing engagement by converting searchers into active clients.

Learnings

Learnings

Reflections, takeaways, and what I’d do differently.

Reflections, takeaways, and what I’d do differently.

What did I learn?

What did I learn?

What did I learn?

Jumping into a high-impact flow during my first week pushed me to think quickly, design more effectively, and collaborate deeply. I learned how to balance speed with structure, lean on my team, Mohammed, Somaya, Aya, and Yara, and design around real behaviors, balancing business needs with design best practices. Most importantly, I learned when to lead, when to let go, and how to keep momentum without losing clarity.

What went well?

What went well?

What went well?

Cross-team alignment made all the difference. From research to design reviews, everyone played a part. Rapid design iterations helped us find the right direction fast. The result? Higher engagement, smoother decision-making, and stronger trust across the team.

What could be improved?

What could be improved?

What could be improved?

Looking back, we could’ve pushed usability testing earlier in the process to validate edge cases. Some UI logic could’ve been simplified further, especially around agent views. And while we moved fast, I’d invest more in documenting interaction rules to make handoff smoother and decisions clearer.

Looking back, we could’ve pushed usability testing earlier in the process to validate edge cases. Some UI logic could’ve been simplified further, especially around agent views. And while we moved fast, I’d invest more in documenting interaction rules to make handoff smoother and decisions clearer.

Looking back, we could’ve pushed usability testing earlier in the process to validate edge cases. Some UI logic could’ve been simplified further, especially around agent views. And while we moved fast, I’d invest more in documenting interaction rules to make handoff smoother and decisions clearer.

Keep Exploring

Keep Exploring

More projects, more perspective—see what else is shaping the way I design.

More projects, more perspective—see what else is shaping the way I design.

More projects, more perspective—see what else is shaping the way I design.

Let's Connect

I collaborate with ambitious teams and founders around the world to craft digital experiences that connect, engage, and drive real impact.

Let’s Talk!

Let's Connect

I collaborate with ambitious teams and founders around the world to craft digital experiences that connect, engage, and drive real impact.

Let’s Talk!

Let's Connect

I collaborate with ambitious teams and founders around the world to craft digital experiences that connect, engage, and drive real impact.

Let’s Talk!