top of page

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 

Home screen mockups white bckgrnd.png

What I did

  • Created a design system including icons, typography, and color palette

  • Created prototypes and wireframes from low-fidelity stage to high-fidelity.

Artboard Copy 11.jpg

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.

Diane persona.jpg
trulia.jpeg
homefinder.png
zillow.png
realtor.com.png

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 ​

trulia.jpeg
homefinder.png
zillow.png
realtor.com.png

Initial sketches and ideation

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

30A69764-86C2-4BE8-99D4-F5F70C188698_1_1
48A5BC8F-7331-4FCB-BD1F-1182375B6304_1_1

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

Login.png
Filters Chosen.png
property view - main copy.png
search results grid.png
search results list.png
Side Bar Nav.png

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

Moodboard 1 Copy 4.png
Style Guide Copy.png

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

Login Copy 13.png
property grid view - modal window up.png
property grid view - modal window down.p
property list view - modal window down.p
Home Screen.png
saved properties grid view.png
recently viewed list view.png
Saved searches.png
share property from search results list
search results list.png
contact page - send copy to my email che
menu side bar.png
Property Types Selected.png
Search Main.png
All filters with selection.png
All Filters.png
Price range selected.png
Property Type.png

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

real estate user experience design

Still to come

  • Prototype link

  • Animation

bottom of page