FARI DESIGN

Property Pro

Real Estate Expertise

Mobile-first responsive web app

Go to Final UI

Property Pro

Property Pro is a user-friendly tool for remote buyers and renters. Experience virtual tours, staging, and essential information on sunlight, sound pollution, transportation, and family-friendliness and more.

This web app aims to simplify the property search process and help users make confident choices in their real estate endeavors remotely.

Role

UX/UI Designer

Scope

UX Research . UX Design . UI Design . Design System

Tools

Figma, Miro, Adobe Photoshop, Microsoft Excel, Google Drive, Marvel, Zeplin

Date

May - July 2023

Problem

In today's fast-paced world, finding the perfect property can be a daunting task. Visiting numerous properties in person is not only time-consuming but also challenging, especially when searching in distant cities.

How It Started

After conducting user research and competitive analysis, I created a flow chart and user flows. Based on these, I developed low-fi and mid-fi wireframes to guide the design of the Property Pro web app.

Next step Style Guide

Next, I created mood boards to explore different visual styles and selected one that embodies trust and competence. Using this as a foundation, I developed a UI style guide for Property Pro, to ensure a consistent and visually appealing design throughout the app.

High Fidelity

In the following step, I integrated mid-fidelity wireframes into high-fidelity designs, optimizing UI elements for improved user experience. Inspired by popular apps, I applied familiar design patterns to enhance usability.

Final UI

I established a fluid grid system for mobile, tablet, and desktop, and then created high-fidelity wireframes and mockups for Property Pro. These detailed designs brought the app to life.

Responsive Design

By selecting frame sizes of 360x800 px for mobile, 834x1194 px for tablet, and 1440x1024 px for desktop, I established a consistent and organized process for responsive design.

Throughout the different device sizes, I redesigned the icons, logos, cards, and other UI elements to fit the new size, while ensuring an intuitive interface and making use of screen real estate and white space.

Next Steps

Next, I will include a property comparison tool and a chat feature for direct agent-client communication. I hope these additional features enhance user experience and help them to have an easier informed decision-making.

I will conduct user testing on the prototype to identify weaknesses, potentials, refine the problem statement and enhance the flow chart. This valuable feedback will guide refining Property Pro to meet user needs and expectations.

See More

FARI DESIGN

Property Pro

Real Estate Expertise

Mobile-first responsive web app

Go to Final UI

Property Pro

Property Pro is a user-friendly tool for remote buyers and renters. Experience virtual tours, staging, and essential information on sunlight, sound pollution, transportation, and family-friendliness and more.

This web app aims to simplify the property search process and help users make confident choices in their real estate endeavors remotely.

Role

UX/UI Designer

Scope

UX Research . UX Design . UI Design . Design System

Tools

Figma, Miro, Adobe Photoshop, Microsoft Excel, Google Drive, Marvel, Zeplin

Date

May - July 2023

Problem

In today's fast-paced world, finding the perfect property can be a daunting task. Visiting numerous properties in person is not only time-consuming but also challenging, especially when searching in distant cities.

How It Started

After conducting user research and competitive analysis, I created a flow chart and user flows. Based on these, I developed low-fi and mid-fi wireframes to guide the design of the Property Pro web app.

Next step Style Guide

Next, I created mood boards to explore different visual styles and selected one that embodies trust and competence. Using this as a foundation, I developed a UI style guide for Property Pro, to ensure a consistent and visually appealing design throughout the app.

High Fidelity

In the following step, I integrated mid-fidelity wireframes into high-fidelity designs, optimizing UI elements for improved user experience. Inspired by popular apps, I applied familiar design patterns to enhance usability.

Final UI

I established a fluid grid system for mobile, tablet, and desktop, and then created high-fidelity wireframes and mockups for Property Pro. These detailed designs brought the app to life.

Responsive Design

By selecting frame sizes of 360x800 px for mobile, 834x1194 px for tablet, and 1440x1024 px for desktop, I established a consistent and organized process for responsive design.

Throughout the different device sizes, I redesigned the icons, logos, cards, and other UI elements to fit the new size, while ensuring an intuitive interface and making use of screen real estate and white space.

Next Steps

Next, I will include a property comparison tool and a chat feature for direct agent-client communication. I hope these additional features enhance user experience and help them to have an easier informed decision-making.

I will conduct user testing on the prototype to identify weaknesses, potentials, refine the problem statement and enhance the flow chart. This valuable feedback will guide refining Property Pro to meet user needs and expectations.

See More