Property Ana Group (PGA)

UX /UI Designer and Researcher

Designing a Real Estate Website to Find Your Dream House in Dubai

This project is currently under development. It has a defined timeline and is organized into sprints. We follow an agile system and have had multiple meetings with the product manager, stakeholders, and developers. Let see what did we do as UX/UI Designer:

About Property Ana Group(PAG)

Property Ana is a real estate agency operating in Dubai, specializing in selling and renting residential and commercial properties. They also offer additional services such as immigration assistance, property management, and investment services. Currently, Property Ana relies on an external platform to facilitate the sale and rental of their properties.

Their customer base consists of approximately 60% local clients and 40% international users. However, to expand its services and reach a broader audience, Property Ana has recently decided to establish their own website for selling and renting properties as well. This strategic move will allow them to directly engage with potential buyers and tenants, providing a more convenient and streamlined experience.

View Website

Project Overview

Role

UX/UI Designer

Duration

2 Months Part Time

Team

6 Persons

Tools

Figma, Maze, Miro, Photoshop

Business Needs

Create a website with a Minimal design to Attract potential buyers.
Informed extra services like immigration, property management, and investment.
Establish relationships with international clients and investors.

Main Challenges

Finding properties information with the minimized click.
Building trust among users.
Creating a user-friendly interface.
Providing simple ways for customers to contact.
Designing a website that stands out among competitors.

Addressing these challenges will help Property Ana create a compelling website that delivers essential information, builds trust, and enhances the overall user experience.

Design Process

Our design consisted of four phases

Note: There is no doubt That iteration is necessary during all phases.

1-Discovery

Primary Research
Interview
Affinity diagram
Competitive analysis

2-Define

Persona
Storyboard
User Flow

3-Develop

Low Fidelity Design
High Fidelity Design
Wireframing
Useability & Iteration

4-Deliver

Visual Design
Final Wireframe
Clickable Prototype
Useability & Iteration

Discovery

our first step was researching real state market in Dubai and understanding our target users’ needs. thus, the stud started with 2 phases:

Interview with a different types of users.
Competitive analysis.

1-Interview

We wanted to figure out:

1- What are people's main needs when they use websites to search for properties?

2-How can we encourage them to use our websites?

3-What are users' frustrations with real estate agency websites?

So, we interviewed:

10 people, out of which 5 were locals in Dubai and 5 were international users. We asked more open-ended questions, allowing for a discussion with the interviewees rather than a straightforward question-and-answer format.

Affinity Diagram

Following the interviews, we successfully utilized the affinity diagram to pinpoint and narrow down the specific preferences of our customers. This valuable tool allowed us to synthesize the gathered information, identify common themes, and gain valuable insights into customer preferences, ultimately guiding us towards more informed decision-making.

Interview and Affinity's Take away

The importance of location information and community details for users.
Users' need for easy access to navigation and information regarding commute to various locations (e.g., hospitals, shopping centers, bus or metro stations).
The significance of easy navigation within a website or platform for users.
Users' desire to trust the website or agency providing the information.
Users are concerned about transparent pricing and hidden costs disclosure.
Users' preference for viewing locations through video chat or 3D walkthroughs.

2-Competitive Analysis

Conducting competitive analysis for designing a property website in Dubai is crucial because it helps us to understand the market landscape, identify competitors' strengths and weaknesses, and find opportunities for a unique design.

During the third step of our research, we focused on identifying successful patterns in existing products while also identifying any gaps. We conducted an extensive exploration of various products, ultimately narrowing our focus to six top competitors. Collaboratively, our team meticulously analyzed the strengths and weaknesses of each competitor, paying close attention to how they presented their features.

Additionally, staying updated with industry trends, exploring potential partnerships, and developing effective marketing strategies are essential for success in the Dubai property market.

Competitive Analysis's Takeaway:

Determine minimal and modern design.
How to present of business values and legitimacy.
How can the website answer users important questions via FAQ.
Prioritize filter based on users needs.
Identify categories of navigation& search bar.

Define

After Discovery stage, we move on to the Define phase where the data is classified and we can define the problem in the best possible way using them. To achieve this goal, we can use tools such as Persona and Scenario and User Flow.

Persona

Story Board

We made a storyboard and a context scenario in order to have a more profound empathy for the user.

Marcus, who had been employed at a construction company for five years, decided to seek a new job opportunity in the pursuit of a brighter future. Following several job interviews, he received a job offer from a renowned construction company in Dubai.

Markus, Lili, and Eva decided to move to Dubai and prepared for the relocation. Lili suggested Markus consider buying a house instead of renting after researching the real estate market. They found "Property Ana Group," a reputable real estate agency, while exploring online platforms.

They utilize the Property Ana Group website to conveniently search for properties using advanced filters. They assess property information, take virtual tours, and compare prices, sizes, and features to make an informed decision. They also seek additional support from the platform's customer service.

After selecting their desired home, Markus and Lili proceed with the necessary steps to finalize the purchase. They move to Dubai to complete the paperwork and any required documentation.

Finally, they coordinate with the real estate agency to complete the necessary paperwork for the transfer of ownership, ensuring a smooth transition into their new home.

User Flow

During the define phase, creating a user flow involves mapping out the sequential steps and interactions that a user will experience while navigating through a digital product or website.

Develop

Low Fidelity Wireframes

After conducting comprehensive research, we have transformed our insights into concrete visual representations through the creation of a series of sketches.

Home Page

Product Page

Property Page

Service Page

Design

UI Kit

Once we presented our proposed colors to the business owner, he wasn’t necessarily a big fan. He had already collected 3 colors he liked (Black, White & Gray ) to use with the new design. Here you can see the full UI kit we created for this project, including fonts, buttons, forms, and colors.

Iterations

Iteration 1:

Home Page Changes

Before

After

Simplified Filters: A Minimalist Approach

#1

#2

#3

Building Trust: Introducing a Dedicated Section on Our Homepage

Enhancements to Company Story and Team Introduction for Increased Trust

#1

Home Page Iteration

Before

At first, our design aimed to offer users more options for filtering, intending to reduce the need for more clicking. However, after conducting conversations with users, studying our competitors, and considering stakeholder needs, we decided to shift towards a more minimal design with fewer options presented upfront. Instead, we plan to include all filtering choices in a "More" section. Additionally, we have relocated the filter placement from the bottom of the hero image to the top. This change will allow users to have a better visual experience when they click on "More."