Property Search Web App
Overview
-
Perfect Properties is a web app for beginner investors to search for investment properties.
-
Part of the challenge was to give users comprehensive information, while also providing a very user-friendly experience that would not be intimidating to small-scale new investors. ​
-
This was made as part of a UI specialization for my Immersive UX Design Course, and a project brief was included

What I did
-
Created a design system including icons, typography, and color palette
-
Created prototypes and wireframes from low-fidelity stage to high-fidelity.

Persona
-
This persona reflects one of the main use cases: middle-aged people who have been interested in property investing for a while but need a simple and easy tool to search and save.





Competitive Analysis
-
I started by checking out popular real estate platforms both on mobile and on desktop
-
Some of my main focuses were to take a look at
-
Overall layout
-
Filtering experience
-
Home page
-
Saving features
-
-
Some key takeaways:
-
There was a lack of a home screen that felt like a home-base dashboard where you could see recently viewed properties or saved properties
- Many navigation bars didn't have a "home" button/icon but instead, the default screen was the search feature
-
Many used the map screen as the main home screen, which isn't particularly useful as a starting point, and could be overwhelming to users ​
-




Initial sketches and ideation
-
After taking a close look at what existed, I hit my notebook to mark down some initial ideas and sketches


Mid-fidelity wireframes
-
Taking into consideration the project brief, existing real estate apps, as well as conversations with some other designers as well as some users of real estate apps, I began working on the first digital wireframes






Feedback
-
After showing initial wireframes to users I found:
-
Some did not like the method of choosing property types​
-
People would rather scroll through photos vertically rather than clicking through slides horizontally
-
People appreciate a home screen that is useful but not busy
-
Moodboard and Style Guide
-
I searched for inspiration and referenced the project brief to create a moodboard that captured the appropriate imagery to use, colors, tone, and font
-
Then I applied these themes to the wireframes and created the ever-evolving style guide which included:
-
Typography​
-
Colors
-
Button Design
-
Icons
-
User Input
-


2nd iteration of wireframes
2nd iteration of wireframes
-
All of my findings along with the moodboard and style guide informed the iteration of the wireframes, leading to the versions below


















Final mockups and wireframes
-
With feedback from users as well as some designers, some changes were made in the color palette and button hierarchy and led to the final mockups below

Still to come
-
Prototype link
-
Animation