Bayut

Home Page & Navigation Experience Revamp

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, 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 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.

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.

Guiding Design Principle

Peak-End Rule

Project Goal

Reduce the overall time taken for users to find relevant property listings i.e to land on property detail page

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

Deliverables

High Fidelity Mobile Prototype, Vector Illustrations, Micro Animations

JIRA Documentation, Product Presentation & Handoff Framework in Figma

QA Documentation

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, while incorporating latest branding guidelines

Problem Statement

HAND OFF FRAMEWORK

When a project is big, and the number of people involved are many, the finer details that are crucial for optimal UX, often get lost in translation. While there are supporting documents like PRD’s and prototypes, my aim was to reduce to & fro discussions, and create a fool-proof and engaging way, for the product managers, and the engineering team, to refer all product requirements, UX specs & UI details in a single place.

Want to know more details about the project?

Happy to connect over a call or a cup of coffee :)

Design Process

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

Marvelous Ms Designer

Project Goal

Responsibilities

Deliverables

Home Screen

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 and selection icons, and other elements well.

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 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.

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.

Project Goal

Deliverables

Responsibilities

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.