Perfect Properties

a real estate app UI case study

Perfect Properties is a responsive web app that provides property buyers with information on properties of interest. My experience purchasing a home was easy and enjoyable - we really lucked out and I wanted to recreate some variation of that experience in this app. The way the app content is structured is somewhat similar to the scavenger hunt app I created for UX Immersion, but I think this was a good opportunity to see how I can approach the UI differently. There are quite a few real estate apps already out there that really succeed in their mission, so the competition is steep, but I’m up for the challenge to make something that sets itself apart!

Screen Shot 2020-11-24 at 9.37.28 AM.png

PROJECT OVERVIEW

My Role: UI Design

Tools: Marvel, Balsamiq, Sketch, Principle, InVision, Photoshop

Methods: Wireframing, Icon Design

Duration: March 2020 - April 2020

After quite a few rounds of wireframes and iterating, I designed the final screens as seen below:

Screen Shot 2020-10-21 at 2.40.24 PM.png

Screen Shot 2020-10-21 at 2.40.32 PM.png

Screen Shot 2020-10-21 at 2.40.41 PM.png

Screen Shot 2020-10-21 at 2.40.51 PM.png

Screen Shot 2020-10-21 at 2.41.00 PM.png

Screen Shot 2020-10-21 at 2.41.18 PM.png

The Process Behind the Designs:

As the UX research had already been completed by another team, it was time to take pencil to paper and begin sketching out different ways to approach the design of my app, while keeping the user's problems and potential solutions the central focus. My low-fidelity wireframes are bare bones - I just wanted to get the main features to paper without overthinking and getting lost in the details!

Screen+Shot+2020-10-21+at+2.58.47+PM.jpg

Screen Shot 2020-10-21 at 2.58.59 PM.png

Making mid-fidelity wireframes was an important step in generating more detail, getting a better sense of how a more finished product will look and feel, as well as laying down a foundational screen structure in Sketch.

Screen Shot 2020-10-21 at 4.38.48 PM.png

Screen Shot 2020-10-21 at 4.39.05 PM.png

Another iteration of mid-fidelity wireframes yielded more fully realized UI features, such as sliders, illustrations and modal windows.

Screen Shot 2020-10-22 at 7.58.42 AM.png

Screen Shot 2020-10-22 at 7.58.51 AM.png

Moodboard

With a solid set of wireframes, it was time to start thinking about color schemes, typography and the overall mood of the app.

When one thinks of real estate, they think of hustle, competition, best offer, “cash is king” and other phrases that indicate a fast pace. When I think fast, I think bright and bold. I want users to be motivated by the bright and uplifting choice of colors. I’m inspired by brands like Oscar Health Insurance, Casper Mattresses and Street Easy, each of whom go for minimal, whimsical, and bright - three UI features I highly value.

Screen+Shot+2020-10-22+at+8.01.34+AM.jpg

Style Guide

In an effort to ensure consistency throughout my app and to keep a record of all my design decisions, I compiled a style guide which will be consulted for future iterations, by myself or by other designers who may work on the app.