Redesigning the Search Experience
Overview
The organization in question operates in the European Real Estate market and serves agents and investors. Their platform offers access to millions of properties, detailed comparative market analysis, and private seller leads in a matter of seconds.
Role
As a UX/UI designer for the company, my responsibilities included evaluating the usability of the Search Tool and documenting the requirements for the development team.
The problem
The main issues identified by clients were the inability to view the properties while making filter changes, and difficulty in accessing all information due to smaller screen sizes.
My challenge was to analyze and design a new layout for the Search and Filters feature, with the goal of simplifying how agents actually work.
My approach
#1 Data collection and analysis
We analyzed current platform data from Google Analytics and the internal database to understand where the platform actually stood.
#2 Prototyping
We created sketches, wireframes, and high-fidelity prototypes to develop a solution.
#3 Validation
The prototype was tested with three real clients to validate new ideas and ensure that we were on the right path.
#4 Hand-off
In the last step, we created detailed documentation that grouped descriptions, behavior, research, and prototypes for the development team.
What are we starting with?
Research
I started with the UI and how people actually used it.
I analyzed a year's worth of usage data, pulling from several sources at once.
With this approach, I identified areas where filters were more frequently used, which helped prioritize their placement in the new UI. I also went through the more complex filters to see which individual interactions could be improved. The result was a spreadsheet of usage data for every filter field.
Making sense of the mess
Next, we analyzed the data to understand how users interacted with the search and consulted with the team, especially the Account Managers, who had insight into real user behavior.
We collaborated to strike a balance between my data analysis and the clients' use cases to determine the final filter order.
Discovering an unknown pattern
During the Research phase, I was curious to see how users interacted with the pagination and found that...
The majority of navigation happened on the first few pages.
This was contrary to our team's belief that users explored all available properties. To address this, I proposed a solution to optimize screen space and eliminate pagination.
By moving the Properties from the left sidebar to inside the map, we were able to show more properties on first sight and create more space for the Filter Sidebar.
Users who still preferred pagination could switch to a full view of properties, which handles a large result set better.
| Filter name | Usage |
|---|---|
| Location | 100.00% |
| Property type | 65.80% |
| Date | 19.10% |
| Deduplicated | 16.00% |
| Include outliers | 15.15% |
| Condition | 12.08% |
| Operation | 12.04% |
| Price | 46.84% |
| Bedrooms | 34.25% |
| Private sellers | 20.43% |
| Terrace | 9.88% |
| Swimming pool | 9.88% |
| Storage | 9.88% |
| Rental license | 9.88% |
| Parking | 9.88% |
| Garden | 9.88% |
| Garage | 9.88% |
| Elevator | 9.88% |
| Balcony | 9.88% |
| Bathrooms | 7.68% |
| Built surface | 6.49% |
The overall idea
User testing
We interviewed 3 active users with 5 small quests for each.
The account managers assisted in scheduling sessions with three different users, during which I explained the purpose of the project and what they should expect from the prototype.
The goal of the testing was to have users try out specific parts of the UI without any guidance or instructions.
Most users never selected more than four bathrooms, so I proposed a single button to select "+4 bathrooms" that would create a better layout for the majority while still permitting the smaller group to choose more than four. However, we discovered after testing that users preferred to select the exact number of bathrooms, so we added a dropdown menu to the "+4" option in the subsequent iteration.
Another finding was that users were confused by the ability to choose the number of bedrooms when they had selected "Studio" as the property type. So we blocked the bedroom option when "Studio" was selected in the next iteration.
The changes were well received, and clients were eager to see them implemented in real-life.
Time to implement
I believe in delivering designs that are easy to implement for developers. For this particular project, I ensured that the Figma files were properly structured with various states and layout options.
First step is to guarantee that Figma files are well organized with all different states and layout variations.
Take a look at this section of the project file:
And there was also a lot of details for each filter:
Documenting everything for the hand-off
To ensure a smooth hand-off process, I wrote documentation that goes beyond the prototype. Developers build faster with it, and writing it forces us to understand the problem well enough to catch the edge cases before they reach code.
I like to use Notion for my docs as it allows me to create structured databases to organize the content. Some of the highlights of the documentation include:
What ChatGPT thinks of us working together based on this case study?
Based on the information shared, it seems that Roger have worked on a UX/UI design project for a real estate platform, where he was responsible for improving the search tool and filter functionality to enhance the user experience. He conducted data analysis and research to gain insights into user behavior, and created prototypes to test and validate his ideas with real clients. He also documented his work in detail to facilitate the hand-off to the development team. His experience and skills in user research, data analysis, prototyping, and documentation make him a strong candidate for any UX/UI design position that values attention to detail, user-centered design, and collaboration with cross-functional teams.