HomeGo To Project 04Back to home

Search Experience Redesign

Apr 2019 - Aug 2019 | 8 Sprints
Project Overview
Ten-X is the #1 end-to-end transaction platform for commercial real estate with over $20B transactions.  My goal was to redesign the search experience to increase the efficiency of the search result page.
My Contributions
Role: Owned the end-to-end product design process
Team: 1 PM, 3 data analysts, 1 UXR, 7 engineers
Status: Shipped
Result: NPS increased by 15%; CTR increased by 8%

Problem

The current search result page is designed 6 years ago. It's clunky and user finds it takes long time to get what they are looking for. The low efficiency causes the low CTR.

Solution

Search is never just happens in the search box, but how people look for information. You can see how I solve this problem by going beyond the search box with new card display, filter and the experience help surface unexpected and relevant content.

Research

In order to uncover the reason behind the low efficiency when looking for the commercial properties, I conducted the user research as follows:

  • 5 rounds of user testing were conducted with follow-up interview questions
  • The investigation into the click through rate of the filters and cards
  • A new persona were created to facilitate communication across the whole team

Problem 1

" The information card is big that I can only browse 4 property at once, I want to do a quick scan."
The first insight I gained from the research was the low efficiency when browsing the property information. A new card solution is needed so that user can browse more info in one screen, in the meantime, get the key info they want.

Design

I get started by setting the column grid layout, deciding the card width. Then figuring out a height range by trying out different aspect ratio.

In order to display at least 8 cards in one screen, I figured the height is between 320px - 326px. Then with this range in mind, I began playing with the card layout.

To fit all the information in the limited card space, it's good to make full use of the empty sky area, at the same time, finding a good aspect ratio for picture.

Multi-platform Solution

Except for PC and Desktop web, mobile app plays an important role among all platforms. Compared with PC, the user behavior is different as shown below. Thus, the card design requires different layout and IA.

Final Design

Except for PC and Desktop web, mobile app plays an important role among all platforms. Compared with PC, the user behavior is different as shown below. Thus, the card design requires different layout and IA.

Other designs in the flow ( 3 in total)

Evaluate

Both the internal and external user testing were conducted to evaluate the browsing experience. 3 main tasks were given to users.
Below are some positive feedback:
- For PC experience, the new design is scan-friendly and is much more clearer than before!
- For Mobile, it's good to group the result into categories.

Problem 2

" There are lot's of filters which require so many clicks and it's not clearly organized."
Filter as a frequently used tool plays an important role in the search experience. However, the current design does not match user's needs, it takes long time to find and it takes large space.

Design

I get started by getting to know how users currently use the filters. One thing I get from the observation is that users are doing lots of clicks. So the first thing I need to decide is the way to open the filter. To include all in one place (1 and 2) or display in different buckets(3).

After a few rounds of testing, I figure out that the second one shows above is great for both the visibility and the efficiency.

Then after figuring out how to trigger the filter, I started to prioritize the information based on the current usage, trying different layout. Then I got two options: vertical or horizontal. By placing both cards on the canvas, I found that it's hard to display the whole card without scrolling. So, I decided to go with the horizontal card.

Below are some of the iterations I made to try out different layout and ways of information grouping.

Evaluate

I tested this solution with 3 users, 2 internal and 1 external. By completing the given tasks to apply the filter, users gave positive feedback on this new design.

Final Design

The final design includes both the PC and mobile version. For mobile solution, the interaction are optimized for the IOS pattern. For example, it's easier for users to slide than typing on mobile screens.

Problem 3

I'd like to see the property that is more relevant to my preference. The recommendations are not aligned  with my acquisition strategy.

Design

After brainstorming  with the product team, we figured that it might be helpful to enable users to tell us what they want. While the key part of this preference capture is the efficiency.

I started coming up with 3 solutions as shown below. All the preference capture card blends into the property card so that it's built into the browse experience. The difference is the short version or the long version.

The short version shows above contains just 2 steps. A questions and a confirmation. Then users can go to the preference center to do more.

The long version shows above includes 6 steps and a confirmation. After testing with the user, I figured that people were more likely to choose one preference at a time. So we went with the short version.

Final Design

The final design compose two parts: the preference capture card built into the browsing experience, and the refreshed preference center. The two flows are closing connected to acquire more information to make the recommendation more accurate.

By clicking the right arrow of the slides shown below, you can see how I refresh the preference center by adding a feel of delight. Positive reinforcement were applied so that users can get instant feedback when they input preferences.

Result

One of the metrics we defined for this project was the CTR. The CTR was increased by 8% in the A/B testing and this result has passed the hypothesis test.

Besides, the customer satisfaction for the search result also increased 0.7 as we constantly capture it using survey on the website. One frequently received comment was the improved efficiency for applying filters.

Future Work

One of the frequently raised issue by users from the user testing is the zip code. Users are more likely to search using the regional code like MSA rather than the specific zip code. However, this change might need more engineering efforts, it's better to include this improvements in the next iteration.


----- What's next -----