Perfect Properties 

Lisa Emmanuel 

ROLE

UI designer 

UX designer

CLIENT 

CareerFoundry 

TIME

10 Weeks


As a student at CareerFoundry, I was tasked with designing a responsive web app. Perfect Properties provides property buyers with information on properties of interest. It’s target audience is the first time, small scale property buyers who want to find a property to invest in. 


This is responsive web app but also a mobile first design. 


Problem Statement

People who are looking for an investment property, want a tool that will help them achieve that goal quickly. 

 

Perfect Properties 

Competitor Analysis

 

To start off the design process I did a competitor analysis to find out what criteria is important for people when they are looking for new house. Also, to see how an app can help them with finding their perfect home. 

Real Estate Australia 

Redfin 

Homes.co.nz

Both Redfin and Real Estate Australia have different landing pages.  


  • Redfin wants users to create an account before they can use the website search for properties. 
  •  Real Estate Australia users have both options, but they do encourage users to still sign up so that they can have access to other features such as; saving properties they are interested 
  • Homes.co.nz users can search for a property they are interested in straightaway, they don't have to sign up first. 

Both Homes.co.nz and Real Estate Australia allow users to see properties before the sign up and that gives them a better idea about what kind of properties they'll see and which features they can use to help their house hunting process. 

RealEstate Australia: gallery looking at the property in more detail 

Redfin: Property 3d Walkthrough 

Both Redfin and Real Estate Australia allow users to look through the home through videos or a 3d walkthrough. This gives people the chance to assess a home before they visit, which is valuable. 

 

Who is Perfect Properties for? 


Perfect Properties is for small scale property buyers who are busy professionals with limited experience buying real estate for investment. Rashida is a representation of the typical users of this app, she is looking for a residential property for further financial security for her family. 


I made my proto-persona based on a hypothesis about the typical user, if I were to make a user persona I would do interviews with the target to validate it. 


I used a mind map to lay put the key characteristics, demographics and needs of my persona. 

Mind Map for persona 

 

Navigation and User Flows 


I began the design process by creating a user flow for each of the user stories in the design brief.  I laid out the user persona steps to create the tasks she needs to complete her goals. 

Searching for properties made easy and booking for home viewings  

Later, I added common UI patterns suitable for presenting content and navigating the app in a way that is familiar to users but also are appropriate for a web-responsive app. 



filters and sort actions to narrow the volume of results and to customise to the user needs and sort content according to their most important criteria. 




 Calendar for booking viewings to see a property that the user is interested in. 

Visual Design

Moodboards are very useful for identifying what is the most appropriate look for the app.

 I created two different mood boards with two different modes that best fit with the theme and what the user is expecting.  

  • The first mood board uses a lot of earthy green tones with residential properties that are most typically located in the countryside. 
  • The second mood board more properties can be found in residential areas and suburbs outside of the city, with more family-style homes. 

Blue Moodboard

Green Moodboard

I chose to go with the Blue mood board because these properties are more in line with Rashida’s goals. 

While Rashida enjoys time in the country on the weekend ultimately she wants a home that is most appropriate for investment. More prospective buyers are probably interested in suburban areas as they are in less isolating locations. 

Choosing the right colours and typography 

Based on the mood board, I looked at different blue tones and what colour would be an appropriate accent. I looked at various colour palettes on Canva, but in the end, I chose a 'goldish, brown' tone to compliment the blue because it gives a more elegant and 'grounded" feel, which is a part of the brand.   

For the typography, I looked at various font pair options, which includes pairs that are most suitable for mobile and desktop legibility. 

Style Guide 

One of the key objectives with Perfect Properties is provide a cohesive, intuitive, functional and a visually appealing design for the users. The design system includes the typography, colours, images and iconography that fit with the brand. Here is a link to the complete style guide.

Web responsive design 

Although this design iteration is Mobile First, Perfect Properties is a responsive web app therefore it is important  to design layout for larger breakpoints. The app is using is Material.io breakpoint system. I have applied layouts using 4-column, 8-column and 12-column grids for different screen sizes.

 

Mid-Fidelity Mockups

Choosing property preferences

Find your perfect property by selecting your most preferred criteria in your property search

Compare Properties 

Rashida can do a side by side comparison of properties she is interested in to see how similar/different they are based on the criteria they are interested in. 

 

Track properties that you are interested in 

Perhaps users are interested in a particular property so they would like to track that property to see when it's available on the market, how much it will be sold for and look out for open homes.  

 

Reflections

What went well  :) 

Though it took some time and lots of iterations  I think I used the most appropriate UI patterns and that that the design is intuitive. Conducting a competitive analysis definitely did help the process. 

What could be improved on? 

I think spacing and more consistency in my design are the areas I need to work on. I think more attention to detail will certainly improve consistency across my designs.  In terms of spacing, I hope that I can spend less time manually spacing and adopt a more systematic way of doing it. 


If I had more time?

Later on in the design, I did add more features in saying that I do think I could've done more about the market. I would have done so with giving more information about the market value of the houses in the particular area and house market trends. 

Key lessons learned

  • Manage time wisely - don't spend too long on one task
  • Research area thoroughly 
  • Map out the process from early on
Copyright © All rights reserved.
Using Format