PERFECT PROPERTIES
Assessing risk to help find the perfect investment property
THE PROBLEM
Design a responsive web app that provides property buyers with information on properties of interest.
My goal for Perfect Properties was to design a tool for people looking to purchase an investment property that provides relevant information so they can make the smartest property purchase.
WHO IS THIS FOR?
People like Rashida
-
An IT consultant at a tech company who wants to invest in her first property to increase financial security for her family.
-
She is always on the go and tends to make her decisions fast.
-
Needs a tool that shows her the most important and relevant information on investment properties so she doesn't waste any time or make poor financial decisions.
HOW DID I START?
By doing a competitive analysis of Zillow.com, Realtor.com, and Trulia.com.
-
I wanted to find out what their strengths were, what pain points to avoid, and what opportunities they were missing when it came to finding investment properties.
-
Overall I didn't want to make Perfect Properties look too different and interrupt a user's mental model, but I did want to design a useful and usable web app that focused on their needs.
MAIN TAKEAWAY?
None of those websites offer information relating to investment properties.
-
If a user goes to their sites with hopes of finding their ideal investment property, they'll still have to do a lot of their own research and due diligence beyond what the site offers.
-
This opened the door for me to design a solution that did the work for the user so they could focus more on picking the right property for them.
USER FLOW
I needed to visualize the steps Rashida would take to achieve her goal of contacting a property's listing agent.
This step allows me to have an idea of what screens need to be made in order for Rashida to be successful. My goal was to make this process as seamless and straightforward as possible.
STARTING TO SKETCH
After gaining inspiration from the other real estate websites, I started sketching on my iPad using the GoodNotes app.
-
The main purpose of the sketches was to create screens that follow the user flow
-
I also began thinking of ways to highlight properties that best fit the user's criteria, which helps them save time and energy.
-
The first iterations didn't have too many fine details, which allowed me to work fast and not waste time trying to create perfection.
CONDUCTING THE FIRST TESTS
After finalizing my first wireframes, I was ready to test them out in order to learn what worked, and didn't work, in this first iteration.
THESE WERE SOME MAJOR LEARNINGS I WANTED TO CALL OUT:
The bookmark button was confusing
The participants thought the + icon represented different actions, like see more photos or make the photo larger. This was a critical error that needed to be fixed.
Missing map feature
It was noted that I was missing the map feature, which is a very necessary tool when searching for properties.
Participants wanted more options
An example was seeing the HOA amount at a yearly or monthly rate, or being able to send the property to the user's realtor, not just contact the listing agent.
REVISIONS
I conducted a preference test to see what others found to be a better bookmark icon since it caused so much confusion.
According to the participants, using the classic bookmark icon instead of the word is the better option.
Here are more revisions based on the test results:
TITLE OF THE CALLOUT BLOCK
WIREFRAMES
Once I was happy with the sketched out revisions, I recreated the screens using Figma and worked from low to high-fidelity.
Through that process I implemented color theory and imagery to elevate the overall look of the web app.
LOW-FIDELITY WITH COPY
In this low-fidelity iteration I focused on transforming the screens from my sketches into Figma. There was no color or fine details as I was still testing out the user flow.
-
After creating an account users could create basic preferences to see select properties.
-
Then they could choose specific filters to further narrow down the listings.
-
Each listing then shows how closely it matches their preferences.
LOW-FIDELITY WITH COLOR
My intention with the color scheme was to evoke a professional, trustworthy, and welcoming environment.
I chose hues of blue with a complementary yellow accent that are WCAG compliant.
MID-FIDELITY WITH IMAGERY
There are a few changes in this iteration besides adding images and illustrations.
I was watching a home renovation show when I had my “Aha!” moment. I realized that there are different types of investment properties that each require their own attention to detail.
The purchaser also takes on different levels of risk based on varied criteria. By using an algorithm that pulls data from the Multiple Listing Service (MLS) to analyze the information, it can provide the user with the potential risk they take on by purchasing the property.
COLLABORATION
At this point I collaborated with my mentor to go over what I had so far.
-
We came up with the idea that each type of investment property would have its own theme.
-
This customized the app for the user based on what they are looking for.
I then conducted a survey to see what colors participants associated with each investment type: fix-and-flips, vacation rentals, and long-term rentals.
HIGH-FIDELITY
I chose the tan, blue, and green colors as they aligned on the square color scheme according to the Color Harmony Rule. I kept the original yellow as the main accent color.
Besides the color changes, I also updated the user flow. I realized that creating an account right away isn’t what happens in real life. A user will first want to explore what the app has to offer before committing. They only have to create an account if they want to save their bookmarks.
In the previous landing screen I only provided the user with the ability to enter in search information. In this iteration I also added the ability for the user to first provide details to receive more customized results.
TITLE OF THE CALLOUT BLOCK
USER TESTING
At this point I felt it was important to do another round of usability tests before making any further changes to the app.
-
My goal was to see if there were any pain points in the design and if the participants would successfully complete each task with minimal errors.
-
The participants were all young professional adults that are familiar with real estate websites. One of them was in the process of finding his own investment property.
-
The test were performed virtually using Zoom and the prototype's Figma link.
THESE WERE SOME MAJOR LEARNINGS I WANTED TO CALL OUT:
Landing page was confusing
-
One participant mentioned that it didn't look like a classic landing page, which threw off her mental model.
-
Most of the participants were thrown off by having to choose between doing a basic search or providing extra details
Scrap the scroll
A lot of the participants struggled with either figuring out how to scroll, or that it was even an option. It was a point of frustration that I knew I had to correct moving forward.
Bookmark icon was still an issue
Almost all of the participants struggled finding the bookmark icon when asked to save a home. I could see that some of them were flustered as they frantically searched around the screens.
TITLE OF THE CALLOUT BLOCK
REVISIONS
After gleaning the results of the usability test I made changes to several of the screens in the app. Going through this test allowed me to really improve the look and functionality of Perfect Properties.
TITLE OF THE CALLOUT BLOCK
STYLE GUIDE
Click here to access the style guide to Perfect Properties on Figma. Creating this document will provide all stakeholders with the do's and don'ts in designing this app.
TITLE OF THE CALLOUT BLOCK
A LIVE LOOK
From the landing page to seeing the results, I wanted to make each screen clean and easy to digest.
TITLE OF THE CALLOUT BLOCK
The process of bookmarking a property was greatly improved through the insights gained through usability testing.
Now users can easily see the bookmark icon, and know where to find the saved properties.
TITLE OF THE CALLOUT BLOCK
DESIGNING FOR BREAKPOINTS
I approached the project with mobile-first design by way of progressive enhancement.
My goal in this responsive design was to provide a baseline of useful features in the mobile version that then evolves with the tablet and desktop breakpoints.
When I started designing the larger breakpoints, I realized there were a few hiccups I had to address, mainly the 12-column layout grid. When I applied the same metrics it didn't look cohesive. I had to tweak the margins and gutters a few times because either the buttons were too long in the desktop or too short in tablet. Or the landing page graphics were awkwardly spaced and positioned on the desktop, but looked great on tablet.
After working through a few variations, I believe that I found a good balance in each breakpoint.
TITLE OF THE CALLOUT BLOCK
LESSONS LEARNED
Testing is vital to design a successful product.
My assumptions were challenged every step of the way and without it, Perfect Properties would likely be abandoned by users like Rashida.
I was surprised most by the positive reaction people had to the concept of the app. A few of the testers mentioned their interest in purchasing an investment property, and that they liked knowing how much risk they were potentially taking with each property.
That is why I believe that Perfect Properties could be a viable project in the real world. There is currently no real estate products aimed specifically towards investment properties, and I think my project would be able to fill that void.
