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