01 - OVERVIEW
What was
this project?
This project involved a full UX/UI redesign of a real estate website for a Dubai-based agency helping clients buy, sell, and invest in property.
Alongside the website, I designed an admin portal for managing leads, property listings, and blog content. I worked as the UX/UI Designer with 2 developers, taking the project from research and information architecture through UI design, responsive screens, design system creation, and developer handoff.
02 - GOAL
The objective
Transform the existing website into a more structured, visually engaging and informative platform that clearly communicates the company's services and helps users easily explore property listings.
03 - PROBLEM
What was
broken?
01
Layout was very plain - mostly images and text with no structural hierarchy
02
Limited information about services and property offerings
03
Weak visual hierarchy made it hard to scan and understand content
04
Lack of a clear brand identity or consistent visual language
05
Users could not easily understand the business value or what was being offered
06
Users had limited guidance on where to go next or how to enquire about properties.
06
The admin team needed a structured way to manage properties, leads and content without relying on separate tools.
04 - RESEARCH & PLANNING
Learning the
landscape
I began by gathering project requirements and reviewing available brand assets - the logo, brand colors and existing website content. To understand industry standards, I researched similar real estate websites analyzing content structure, property listing presentation and key sections commonly used across the category.
​
This research helped identify useful layout patterns and information hierarchy improvements that could transform the user experience.
REVIEWED
Brand logo · Brand colors · Existing site content
SEARCHED
Competitor real estate sites · Content structure · Property listing layouts · CTAs
IDENTIFIED
Key sections · Layout patterns · Information hierarchy improvements
05 - KEY INSIGHTS
How I arrived
at decisions
01
Clearer property discovery
Competitor research showed that property information needs to be easy to scan, so I prioritized imagery, pricing, property type, location, and key details.
02
Stronger conversion paths
I identified opportunities to place clearer CTAs throughout the experience so users could move from browsing properties to making an inquiry.
03
Consistent visual hierarchy
The existing website lacked a consistent structure, so I established reusable layouts, typography, spacing, and components.
04
Admin efficiency
The admin experience needed to support frequent property, lead, and content updates, so I structured the dashboard around these core tasks.
06 - DESIGN PROCESS
How I
designed it?
01
Structure & Information Architecture
I reorganized the website around the main user goals: understanding the agency, exploring properties, and making an inquiry.
02
Content & Visual Hierarchy
Because the existing website relied heavily on images and text, I introduced clearer hierarchy, spacing, typography, and section structures to make information easier to scan.
03
Property Discovery
I structured property cards and listing sections to surface important information such as imagery, pricing, location, and property details without overwhelming users.
04
Design System
I created reusable components, typography, colors, spacing, and UI patterns in Figma to maintain consistency across the website and admin portal.
05
Responsive Design
I adapted key layouts and components for mobile so users could browse properties and access important information across different screen sizes.
06
Iteration & Feedback
I created multiple design directions for areas where client requirements conflicted with the established visual system, reviewed them with the client, and refined the final solution based on feedback.
07 - VISUAL DESIGN
The asthetic
The visual style reflects a luxury real estate brand identity, combining elegant typography, premium imagery, and a sophisticated color palette. Spacious layouts, refined visuals, and strategically placed call-to-actions create a high-end browsing experience while reinforcing trust and exclusivity.
COLOR SYSTEM
Primary
Neutral
Background
Primary Text
Secondary Text
Tertiary Text
Error / Required
Coming Soon
Ready to Move
Under Construction
TYPOGRAPHY SYSTEM
HEADINGS & SUBTITLE
Lora
SemiBold & Medium · H1-H4 · Subtitles
64px → 24px scale
BODY, BUTTONS & LABELS
Nunito
Regular, Bold · Body · CTAs · Nav
24px → 14px scale
08 - SCREENS
UI design
Designed with clear information hierarchy, immersive property imagery and structured sections guiding users from discovery to inquiry.
DESKTOP SCREENS
MOBILE RESPONSIVE SCREENS
09 - CHALLENGE & SOLUTION
The hard
broken?
THE PROBLEM
The services section broke the design system.
The client requested a specific card structure for the services section that differed significantly from the rest of the website's design style.
​
The requested card structure used a different visual treatment from the rest of the website. I felt implementing it directly would create a visual inconsistency and weaken the premium brand language.
Instead of rejecting the requirement, I explored multiple variations that preserved the client's requested content structure while adapting typography, spacing, imagery and visual treatment to the existing design system.
​
After reviewing the variations collaboratively, we selected the direction that best balanced the client's requirements with the established visual language.
THE SOLUTION
Created multiple design variations for the services section
Balanced the client's specific requirements with the existing design language
Reviewed all options collaboratively
Went through several iterations until visual harmony was restored
Selected a final version that met expectations without compromising the brand feel
10 - ADMIN DASHBOARD
Beyond the
website
The admin portal required a different approach from the public-facing website. I focused on the team's recurring tasks rather than visual presentation-managing leads, updating property listings, and publishing blog content.
​
I considered what information admins needed to view, add, edit and manage and structured the interface around these workflows to reduce unnecessary navigation and keep frequently used actions accessible.
Leads & Inquiries
Track and manage incoming user inquiries and lead pipeline from the website
Blog Content
Create, publish, and manage blog posts and editorial content directly from the portal
Property Listings
Add, edit and manage all property listings including images, pricing and details
ADMIN DASHBOARD SCREENS
11 - OUTCOME
What made it
rewarding
The most rewarding part was transforming a simple, image-heavy website into a structured digital experience that improved both the customer-facing experience and the team's ability to manage content.