Duration: 3 days
Tool: Figma, Adobe Illustrator
Role: Researcher, Designer
Type: Design Challenge

As a fresh user for Lovetthome, I documented my first journey and impression on Lovetthome to understand functionalities, overall architecture, and navigation. Through the journey, I knew about the main purpose and features of Lovetthome, and I was able to identify some clear usability issues and pain points.

The homepage of Lovetthome expresses itself as a real estate website. The main features of Lovetthome are search for house and view house details with opportunity to reach out to the sales people. 

The most frustrating point to me is that the search result is not obvious to view, and it took me a long time to find out the search results, especially in map view. I also found out other disappointing points such as: Drop-down filter doesn’t function well. And the top nav-bar and bottom nav-bar on homepage are duplicated. Houses’ detail page has a poor information hierachy, which requires redundant clicks to navigate...

To find out what to optimize in this exercise, I interviewed 2 other people to do think aloud test on Lovetthome. And I let them pretend to be someone who intends to buy a house/apartment in Houston.

For a real estate/property website, search for properties is a significant feature. It’s the entrance for users to use our product. The difficulty of filtering and viewing results on result page is problematic and could block users from using the website. So I decided to optimize the filter and view results experience in this exercise. Based on business goald, my experience and think aloud test, I’ll focus on map-based search results and the filter functions and improve the usability performance.

︎︎︎Map-based search result
Users can quickly search by choosing one or two attributes and viewing the results in a map-based way.

︎︎︎Filter 
Filter allows users to define multiple filters to find houses/properties specifically by their needs. 

Target User

Based on the above analysis and knowledge of Lovetthome. I created a persona pattern to identify the target users and get to know their needs.

User Testing

Based on the two features this exercise will be focusing on and users’ needs, I conducted usability testing with another two people to gather their feedback specifically on these two features. I asked them to browse the website with the intention to find an ideal house for their families, and conducted the following tasks with Lovetthome.

Task:

• Use the search and filter function to find listings of houses within the Bellaire area in   the map view.

• Talk about the primary information you want to know about the house. List 2 - 4 points. 

Insights
“I couldn’t decide to use the quick search widget on the left or ‘find my home’ button on the top. They seems to be duplicated”
“The filter is not working. It’s not even functional as well as quick search.”
“I wish the filter can give more options to select like the number of bedrooms...”
“I couldn’t find search results in the map view.”
“I wished to view the house spots on map in a more clear way ”
“I don’t know why to show the left list with the map to me, because there is no useful information”
....

Pain Points

Map-based search result

1.  Unreadable map-based search results


The search results shows on map are hard to find. In terms of the accessibility, the tiny size of the pin point is also problematic.

2. Lack of information provided on the right list column.


Only the name of the property is showed on the left list. It’s not helpful for searching a house, and it also brings distraction. 

3. Information for a house is distributed to three different places. They are disjoint in visual expression.

4. No much difference between “quick search” and advanced search, leading to redundant design.

1. The filter doesn’t have enough attributes/options.

E.X. 4-room house, townhouse, house with yard, etc

2. Dropdowns are not flexible. 


E.X. Want to select two areas, etc

Competitive Research

I also quickly reviewed some trending real estate websites such as Zillow, Trulia. And how they perform on map-based search results and filters. 

Zillow

Trulia

Based on the analysis of current design, user testing and competitive research, I made recommendations on how to improve the experience of map-based search result and filter function. And create some ux deliverables to demonstrate my design. Because of the time limit, I’ll mainly focus on illustrating the redesign of map-based search result function by sketch, wireframes, user flow and mockups. And only provide recommendations and wireframes for filter function. 

In terms of the visual representation, I’ll follow the current design style and guidance to make sure my design aligns with the current branding style.

Enhance the usability of map-based quick search. My goal is to let users easily view result and primary information through map-based visual representation. In this way, users can view

1. Highlight the spots on map, and use visual hints to indicate the current searching area.
2. Redesign the right column list with house’s primary information in a card view. The primary information includes price, house image, bedrooms, house size, address.
3. Allow users to adjust the map scale to view results in various scales.
4. Give corresponding house position on map when hovering a house card on the left list.


Sketch

Wireframe

︎ View map-based search result

Click “+” to zoom in and more information will be provided on map.

︎ View map-based search result

When hovering a card, the card will expand and show more information. And the spot on the map will be highlighted in light blue to correspond.

Filter

A good filter function needs some key options that are the most common features people search on a website. When looking for a house. Some key points would be neighborhood, bedrooms, property type, etc. Based on the current filter on Lovetthome, market research and my users’ key points, I decided to include area, price, bedrooms, bathrooms, listing status and property type in the default filter. And include other options such as parking spots, square ft, year built, amenities in the more filters button.


Mockup


Filter Mockup

To validate the refined design, I’ll conduct the user testing survey. The testing would focus on the experience by giving clickable prototypes to participants.


Moderated usability testing
I’ll moderate the testing session by introducing the background, giving tasks, interacting with participants and keeping participants on track. The type could be in-person and remote with screen sharing.
The tasks to be given on map-based search will give prompts for participants to search. For example: Quick search for listing houses in Bellairwe area.
By observing participants’ behaviours and interacting with them, moderated usability testing can gather dedicated qualitative information on a specific feature. However, this usability testing is one-on-one testing which would cost much time and efforts to get quantitative data. So I’ll also conduct online comparative survey to collect more quantitative data.

Comparative survey for previous and current
Comparative survey will reflect the effectiveness of refined design compared to the previous. When a good number of participants take the survey, we can collect accurate data on which design users prefer and how the refined design improved their experience.

It’s an interesting experience for me to conduct redesign challenge in a short time span. I chose to focus on the search and filter feature on Lovett real estate website, since they’re the main feature on the website which will extremely helpful to users find the houses they like. Having a better utilization of map-based search and filter could actually help users to make assured decisions that would lead to future trade.

My solution will optimize users’ experience on searching and filtering their ideals houses in a map-based way. 

What Would I do next?

Besides the user testing,  I’d like to do more user research on factors that affects their willingness to buy a house specifically for people who actually live in Houtston. Based on the results, we can design the best-match filter options and iterate the map-based search design. 

Also, I’d like to focus on the interaction design for these two features to improve and shape the experience in details. The next step would be mobile optimization.

Then it will come to other features on Lovetthome.