Perfect Properties
responsive real estate investment web app
UI design case study
Project overview
Objective:
A responsive web app that provides property buyers with information on properties of interest
Timeline:
September 2021 -
November 2021
My role:
UI design
UX design
Problem statement
Having analyzed the user research provided by the project brief, I crafted a problem statement:
How might we create
a seamless real estate investment experience
so that the users can have access to all the necessary information about the property and can easily make an investment decision?
User persona
.png)
Main challenges
I translated research insights and the problem statement into the main challenges to work on:
User story: I want access to as much written and visual information as possible about properties I’m interested in so that I can make an informed decision.
User story: I want to be able to search and filter properties so that I can find good matches based on my needs.
User story: I want to be able to contact the right people if I am interested in viewing a property so that I schedule a viewing.
1. Most competitor tools prioritize selling a property instead of providing users with investment information
Possible solution:
an informative listing page focusing on financial information for a potential investor
2. Search doesn't allow to find exactly what the user is looking for.
Possible solution:
simple search engine allowing the users to set up as few or as many filters as they wish
3. Agent information requires sharing the user's information, which is often associated with signing up for spam mail.
Possible solution:
multiple ways of getting ahold of a real estate specialist, providing the user with more control over what information is shared
User flows
I then started working on the concept of Perfect Properties. I created user flows and turned them into low-fidelity wireframes.
Low-fidelity wireframes
My goal was to create a simple yet informative tool, that allows busy individuals to find necessary information and make a decision easily.
UI concept
When I was satisfied with the overall flow of Perfect Properties, I got to the UI side of the project.
I started by creating 2 mood boards
Color palette
While mood board 1 speaks fun, vacation, careless life, which investing in real estate could give you, I decided to go with mood board 2. It speaks wealth, confidence, classy fun, and communicates a trustworthy yet exciting vibe.
To make sure accessibility requirements are met and the colors are visually more pleasing, I made the accent hues brighter and richer, while making the background lighter so that the contrast is easier on the eye.
Style guide
I created a style guide, carefully listing all UI specifics. This way, if I am working on this project with a team, or have a different team continue developing Perfect Properties, it maintains its consistent feel and the brand stays familiar.
A closer look
Property listing page represents the main function of the application: to provide the user with all the information necessary to make an informed investment decision, including property details, financial information, and CTA buttons to move forward with the decision.
Option to bookmark to come back to the properties of interest and further compare them.
Only basic information is visible right away, more details are available if the user wants to see it.
Interactive element: the user will be able to change values based on what they are expecting out of the investment to see the full picture.
Main CTA buttons are available for what the user needs most, either contact the agent to view the proparty/ ask questions, or to see financial rates if buying the property.
Responsive design
I used the mobile-first approach while working on Perfect Properties, and after I was satisfied with my mobile prototype, I designed for the tablet and desktop breakpoints. This will make sure Perfect Properties provides great user experience regardless of the device it is viewed on.
Next steps
If I were to continue working on this project, I would do the following:
-
Introduce more features to show investment potential
-
Add a community / blog feature to educate users about real estate investment
-
Collaborate with the developers to go live with Perfect Properties, as a see a great business potential in this project
Looking back
As a young adult, I am constantly thinking about my financial future and stability, so this project meant a lot to me and was made quite a bit for people like me.
-
It showed me that UI design is not simply about pretty visuals, and it is just as much a science as it is art. With reasoning behind every UI decision I can more effectively communicate important points to the user.
-
It reminded me that responsive web design is not only a good extra thing to think about, but an essential step to ensure great user experience across all devices.
-
It taught me that it is in the designer’s hands to make sure the world is accessible for everyone and that no person is left out.
