Bayut

B2C Mobile & Web App UX | UAE’s Best Real Estate Portal

2020 - 2021

Products

Mobile Apps

Website

What I did?

UX Audit

Research

What I did?

UI Redesign

Illustrations

What I did?

Micro animations

Design Documentation

Who I worked with?

Head of Product

Product Managers

What I did?

Front End Devs

QA Engineers

Bayut is the market leading property website in the UAE, that connects buyers, sellers, landlords, tenants and agents. The website hosts listings for properties in the UAE with extensive inventory from more than 3500 agencies. The core business is driven by the website which has a seamless search experience and detailed listings and a mobile app that allows 2 million+ users to browse through properties on the go.

Products

Web & Mobile Apps

Website

What I did?

Product Strategy

User Research

What I did?

Leading Teams

Frameworks

What I did?

Associate Designers

Director of Tech

Who I worked with?

Co-Founders

Head of Product

What I did?

Head of Marketing

Graphic Designers

Problem Statement

Users struggle to find recent and saved searches on the app leading them to re-enter the search criteria, filters on every revisit to find relevant properties.

42% of users do not engage with the home screen, suggesting it lacks personalisation and recommendations, that are needed based on user's browsing history

Project Goal

Reduce the overall time taken for users to find relevant property listings.

Introduce dynamic recommendations tailored to users’ browsing history to improve engagement and relevance

Responsibilities

Conducted heuristic UI/UX audit and analysed user behaviour flows to identify key issues & screens with highest drop-off rates

Redesigned the home screen & search navigation, to overcome identified problems, while also incorporating latest branding guidelines

Deliverables

Mobile Prototype, Vector Illustrations, Micro Animations

JIRA Documentation, Product Presentation & Handoff Framework in Figma

QA Documentation

Design Process

This project was also aimed to incorporate design process in the product development process, improving UX maturity of the organisation

Key Design Decisions That Shaped the Product

Key Aspects That Shaped the Product

Get to know the decisions, insights and the UX laws that went into creating the designs for this project

Home Screen

Keeping in mind, to make the home screen personalised, it was redesigned to include aesthetic illustrations, reflecting the updated brand guidelines

Enabled users to quickly continue the last search, right from the home screen below the main search bar, that increased the discovery of the previous searches, enabling the user to continue where they left off.

Property recommendations were shown right below the 'Continue Last Search' element, that were deemed as highly relevant to the users.

Keeping in mind, to make the home screen personalised, it was redesigned to include aesthetic illustrations, reflecting the updated brand guidelines

Enabled users to quickly continue the last search, right from the home screen below the main search bar, that increased the discovery of the previous searches, enabling the user to continue where they left off.

Property recommendations were shown right below the 'Continue Last Search' element, that were deemed as highly relevant to the users.

Keeping in mind, to make the home screen personalised, it was redesigned to include aesthetic illustrations, reflecting the updated brand guidelines
Enabled users to quickly continue the last search, right from the home screen below the main search bar, that increased the discovery of the previous searches, enabling the user to continue where they left off.
Property recommendations were shown right below the 'Continue Last Search' element, that were deemed as highly relevant to the users.

Keeping in mind, to make the home screen personalised, the header component was redesigned to include aesthetic illustrations, reflecting the updated brand guidelines.

Enabled users to quickly continue the last search, right from the home screen below the main search bar, that increased the discovery of the previous searches, enabling the user to continue where they left off.

Property recommendations were shown right below the 'Continue Last Search' element, that were deemed as highly relevant to the users.

Keeping in mind, to make the home screen personalised, it was redesigned to include aesthetic illustrations, reflecting the updated brand guidelines
Enabled users to quickly continue the last search, right from the home screen below the main search bar, that increased the discovery of the previous searches, enabling the user to continue where they left off.
Property recommendations were shown right below the 'Continue Last Search' element, that were deemed as highly relevant to the users.

Guiding Design Principles

Aesthetic - Usability Effect & Zeigarnik Effect

Filters

The filters screen were updated to prioritize the 4 most used filter criteria in the first fold of the viewport, as opposed to showing 6+ options to select at a time.

This also enabled the design to have enough white space, to group the filter elements well

The filters screen were updated to prioritize the 4 most used filter criteria in the first fold of the viewport, as opposed to showing 6+ options to select at a time.

This also enabled the design to have enough white space, to group the filter elements well

The filters screen were updated to prioritize the 4 most used filter criteria in the first fold of the viewport, as opposed to showing 6+ options to select at a time.
This also enabled the design to have enough white space, to group the filter elements well

The filters screen were updated to prioritize the 4 most used filter criteria in the first fold of the viewport, as opposed to showing 6+ options to select at a time.

This also enabled the design to have enough white space, to group the filter and selection icons, and other elements well.

The filters screen were updated to prioritize the 4 most used filter criteria in the first fold of the viewport, as opposed to showing 6+ options to select at a time.
This also enabled the design to have enough white space, to group the filter elements well

Guiding Design Principles

Hick’s Law, Law of Common Region

Guiding Design Principle

Jacob's Law

Bottom Nav Bar

Made the search & navigation patterns to property portals, that led to the introduction of bottom nav bar. To highlight it better than competitors, and make it more delightful to the user, micro animations were introduced.

Made the search & navigation patterns to property portals, that led to the introduction of bottom nav bar. To highlight it better than competitors, and make it more delightful to the user, micro animations were introduced.

Made the search & navigation patterns that are similar to other property portals in UAE, that led to the introduction of bottom nav bar. To highlight it better than competitors, and make it more delightful to the user, micro animations were added.

Guiding Design Principle

Jacob's Law

Guiding Design Principles

Hick’s Law, Law of Common Region

Empty States & Edge Cases

In the ideal scenario, the user converts when they find the right property listing. Sometimes the users may not find anything at all. To make sure the users are not left with empty state and a negative emotion, redesigned the no-search results page to be more action oriented.

In the ideal scenario, the user converts when they find the right property listing. Sometimes the users may not find anything at all. To make sure the users are not left with empty state and a negative emotion, redesigned the no-search results page to be more action oriented.