Redesigning search experience for online marketplace
Duration: 8 month
Role: Product Designer
What is Ozon
Challenge and context
During this project, as part of the search and navigation team, I redesigned the complete search experience in the store. Usually large stores rarely have the ability to change the system completely, so here's the context of the project:
New search engine. The team was moving from the Sphinx to the Elastic search engine, which was impossible to tie to the existing architecture without reworking the whole frontend, so we decided to fix some legacy UX problems at the same time.
A lot of different types of products in stock. Ozon lists more than 4 million products across a wide range of categories. The design process needed to accommodate this wide variance.
Still a lot of legacy and constrains from other parts of the system. Search is a hard problem, and earlier iterations of search had left us facing a huge amount of technical debt in our internal systems
Despite that I was the only designer on this project, I was frequently consulting and sharing progress with other designers, so we can make all parts of the site look and feel consistent
1 Product owner
1 Product designer (me)
5 Backenders (Search squad)
4 more Backenders (Navigation squad)
Competitive analysis and best practice
Besides making my research for on best practise of e-commerce, I analysed the search experience of the world's largest stores as well as local competitors
I compared and analyzed a lot of e-commerce sites to find out how they approach taxonomy and all aspects of search including filtering and sorting. Here are some competitors I've investigated:
In a form after purchase we asked people who lived nearby our office to participate in user interviews. From people who agreed to do that we selected people of different age and background to see how different people approach the search
We conducted twelve interviews with our customers. During these interviews, we asked them to navigate the current search interface in order to find products they were planning to buy. This experience helped us to identify major pain points in the existing interface, as well as learn about common customer behaviors while searching. Here is some major outtakes:
Customers were unsure how to filter search results to quickly get to the product they were looking for. The way to narrow down the search results for a particular section to access filters is extremely confusing. 7 out of 12 respondents had trouble finding the right filter.
The search-for-navigation scenario is not addressed. Customers had trouble navigating through different granularities of a search flow, from category to sub-category, to individual product. We found that customers would often jump directly to a product they didn't want in order to find a link to the category they were trying to browse.
Tiles do not provide all the necessary information. Product preview tiles did not contain enough information to help people decide whether it was what they were looking for. This lack of clarity caused people to be frustrated when searching for something specific.
2.Exploration and creation
The biggest UX problem
The old architecture was arranged in such a way that only general filters such as colour or brand were displayed during the initial search, and more specific filters were linked to categories. Thus, as long as customers did not limit the search area to the category they wanted, they could not see the filters they needed.
No surprise that this was not obvious to users, and interviews only confirmed this, 7 out of 12 respondents had difficulty finding the desired filter.
Since the new architecture did not have such restrictions, we could show all the filters immediately, but in practice it turned out that this is also not the best idea - tests on rapid prototypes have shown that people are also confused by so many different filters from different types of products, among which it is difficult to navigate.
Instead, I have proposed visual navigation that offers customers a more clear and obvious way to narrow down their search:
Now customers can immediately see in which sections the products are found, and can narrow the search area to as many levels of the catalog as they need. Illustrations on cards are the first results in this category, so customers can literally see what awaits them inside.
As a development of the idea, I suggested going even further, allowing customers to continue to narrow down the search using the same interface applied to most common filters when reaching the last level of the directory:
In addition, we redesigned the filter section, which had a number of disadvantages:
In our prototypes, we worked to make the filter list more clearly structured and approachable. Using color and font weight we were able to add more clear hierarchy to a filter list.
Navigating with search
One thing we discovered during our research was that many customers weren't using search to find products, but were instead using it to jump to specific categories.
Lots of customers actually do not even need search itself, they only need to jump to certain part of the catalog. As soon as filtering situation in catalog is way easier for store to handle, we'd like to embrace going to catalog instead of searching through the whole site.
Before there were not much of a suggestion when you start your search. So I make sure to enhance suggestions to embrace "context navigation" from the search bar. The goal was to maximise jumps to catalog or scoped searches.
Product tiles refresh
Due to platform limitation we can only slight changes in tiles structure, but we managed to still make some meaningful changes.
During our research we uncovered several problems with our existing product tiles. The tiles had confusing label placements, customers couldn't add a product to their favorites, and long names of products would often get cut off.
To address this problems, we:
Added hoverable miniatures so customers can quickly scan through pictures right from the search results
Made full name appearing by hover so customers can always see the full name of the product even if it's longer than two rows
Added a way to show marketing badges on top of the card so customers can clearly see value proposition
All this and several other slight changes made the tiles more approachable, and customers could compare products from results page more effectively:
Part 3. Launch and results
Stats after launch
After our research and prototyping phases, we felt confident in our solutions to improve this search experience. I worked closely with the frontend team to make sure that the designs were implemented correctly. When we felt confident in the implementation, we rolled out the new version to 10% of of customers, with a continual rollout over the following weeks.
After our changes were live for everyone on Ozon, we were able to track that people added products to their cart 4% more , and we reduced the number of abandoned searches by 6% . For a site of this scale, this amounted to a meaningful revenue impact.
We also rolled out a survey for our customers to gather more qualitative data about the changes to the search flow. Here is a testimonial from one customer:
After a lot of work and successfull launch our team can look back and see great improvement in overall search experience for customers. I'm grateful for amazing team that worked together to make it happen.
However, work on search never stops. Here main poins of grow and experiment with, that we had.
Improvements in visual navigation. With the new visuals for category navigation, we knew that getting the illustrations and order example products right was very important. With more time and resources, I proposed building an internal tool that would allow us to to flexibly customize and fine-tune the navigation for different catalog directories
Tile customisation in different parts of the catalogue. The visual refresh of our product tiles helped solve some key problems with product discoverability. But with more time and resources, we could have experimented with more specialized tiles for individual product categories.
In-page filter suggestions. We knew that when people scrolled through many pages of products, they became increasingly likely to abandon the search. In future iterations, I would have liked to explore providing an interface that would appear after a user scrolled for a while that would prompt them to choose different filters or jump to a different category.
Future suggestions enhancements. The search field's typeahead suggestions are critical to helping people jump quickly to products they are looking for. In the future, I think we could have built more internal systems that would have helped to provide better suggestions for popular search queries.