Year

TYPE

Medium
2022

Case Study
‍‍‍‍
UX/UI

Moving is one of the most universally stressful things anyone can do. With my product, I aim to reduce the stress of that experience by making it as efficient and enjoyable as possible. The goal of this personal project is to design a real estate website with a feature to allow the user to compare different homes. Please keep in mind this is a work in progress. For the sake of the design exercise, I worked off of assumptions and preferences to keep things moving but on a real brief, I do not ever work off of assumptions. Take a look inside of my process! 

Wireframes

Comparison Page

I wanted the user to pick what they were seeing and what was most relevant to them. They are able to move the listing around with the 3 dots at the top and pick what information they want to see depending on what is most important within their comparisons.

Search Results

Moving on to the search results page, for some of my research I looked at the competitors, and what realtors, as well as regular home buyers, liked and disliked about them. A huge positive for people were websites where you can clearly see the pictures of the home without clicking on the listing, as well as clean layouts. On my search results page I did just that. The photos are big enough so you can see them without clicking on the listing and you can view more pictures by sliding through them. Below the pictures is the basic at-first glance information about the homes.

Other important features are the filters, sort, and view options as well as the ability to toggle the map on and off. With these options I wanted the user to pick what they were seeing and how they were seeing it, with the reason being everyone looking for a home is looking for different things and as I mentioned at the start, I wanted the experience to be as personal and customized for them as possible. During my research, I did not find any options for choosing the layout or turning off the map. In my personal experience, I don’t always need the map but there is no way to turn it off and it takes up half of my screen so there definitely had to be an option to not have it visible if you don't need it at all times. Besides that, there is the compare checkmark that adds it to the list of homes you want to compare. In order to access the list you click on the word compare.

Listing Page

With the listing itself, I wanted the information to be listed in order of importance using f-layout. For example, if the contact info for the real estate agent is high up that’s not really that important to me if the next thing I see is something that automatically disqualifies it from my search. I’m not going to be contacting that real estate agent therefore scrolling through that listing wasted my time. The goal of this page is to not be convoluted and easily find what you are looking for.

One of the biggest complaints from consumers about competitor's websites was inaccurate information and scam listings that didn’t exist. To resolve that, I put when the listing was last updated, whether it was verified, and how long it was up. On competitor's websites, that information is there but it is buried within text. No matter how nice a listing is if you see it’s been last updated 300 days ago you're most likely not going to invest your time in it. The rest of the information is details about the listing, map, and multiple ways of contacting the agent.

Landing Page

I identified the core need of the user as finding a home. And my mission for this case study was to make the house search optimized for every individual person based on their needs. Starting off with the landing page, moving can be stressful it can also be an exciting moment in someone's life and the start of a new chapter. I wanted the landing page to evoke feelings of starting a new journey. I wanted to do that by telling the user their journey starts here, using start instead of search, and showing other cities users were currently looking at for a sense of discovery. I wanted this page to be really simple so that people can really easily just jump into their search. I put down some logos of reputable websites so the user can feel like they are using a reliable website and feel good about it. Going back to the idea of this being a new journey, all of that contributes to an easy and safe start of the journey. As for my aesthetics and style, I followed the guidelines of it being friendly and modern which is also my personal style as well.