Small Things Matter — Redesigning Tokopedia’s Search Filter
How Changing Small Things Can Increase CVR up to 26%
Have you ever felt frustrated when you couldn’t find something you were looking for? In the e-commerce world, it does not happen because of lack of choice. Instead, the difficulty comes because there are too many choices offered. Only by entering one keyword, then BAM! You’ll get tons of similar products ready to be picked.
With various specification offered, you might be confused to find one that really suits you. Instead of having fun (yes, shopping is supposed to be fun!), you end up being frustrated and started to think that your favorite e-commerce does not have the product you wanted.
Fortunately, We have a magic tool called Filter Menu.
Filter Menu is one of the most important tools in e-commerce’s product discovery experience. Like its name, user can easily find products that match their criteria which variables include color, size, seller’s location, and many more. In Indonesia, despite the similarity of products offered, there are various factors that can influence customers’ buying decision — even the slightest shipping fee’s difference.
Therefore, the experience in using Filter should seamlessly help the user in discovering the most suitable product that matches their criteria.
Finding the Root Cause
It started at the beginning of the quarter when our stakeholders and managers were concerned about CVR growth. They want us to identify our improvement area so that we can boost our CVR growth.
After digging out more information using the 5 Whys Technique, we found out that the Filter Menu was not yet being optimized. Thus, we believe that we need to enhance it to improve the CVR.
Of course, the Filter Menu wasn’t the only thing that we found. But, knowing that the feature can still be improved was enough to get our hands dirty. Therefore, we analyzed how revamping the filter menu might be the key to increase product CVR.
***
Before We Start…
Let’s look at the old design! In our perspective, it‘s’ perfect, simple and easy to use.
Well, unfortunately, it is not.
How We Work
As product designers, even though we keep repeating the same process, we tend to treat our projects as a masterpiece regardless of its scale or value. Below is the visualization of the process.
Emphatise
In order to discover problems and observe the behavior of the existing design through the user’s perspective, we invited several users and conducted an interview session with them (kudos to the UX Research team!) which criteria were handpicked based on Tokopedia’s buyer’s persona.
Define
After the interview, we discovered many unidentified issues on Filter. Long story short, users are in a love-hate relationship with the function. They love it because it clearly assists them in the product discovery experience, however, they hate it due to the difficulties that they experienced.
Filter, Sort, and List/Grid View
Aside from the Filter function, there are also “Sort” and “View as List/Grid” which can ideally improve product discovery experience.
To understand which function users utilize most frequently out of the three, our research team conducted further qualitative research.
First, we asked them on the most utilized functions and the level of importance among our three features: Filter, Sort, and Layout. The result shows that Filter and Sort are the most utilized functions that they think important while Layout is the least.
Next, we specify the criteria of filter and sort that they perceive as the most important. Harga (price) and Lokasi (location) are the most important filters while Harga Terendah (the lowest price) and Ulasan (review) are the two most important sort elements.
—
How does the data affect the revamp strategy?
We have limited space on the screen. By knowing which ones are more important, we can optimize the placement of every element in our new design.
Ideate
We understand that our users aren’t genuinely in love with our filter — they must use it in order to easily find products they demand, so it’s very important for us to create a better experience in using our filter. But, what’s “better” anyway? We learned that users are actually accustomed to the existing filter. Instead of a total revamp, we only worked on minor improvements in areas where users experienced difficulties, which we did not realize at first. Minor but very crucial.
Wireframing and Prototyping
And now the fun part! After gathering multiple insights, finally, I arrive in my favorite section which is facilitating a cross-functional design sprint session with the business, design and tech division.
And behold the new design!
Improvement # 1: Optimizing the Feature Placement
The old design is functional, however, it is too cluttered as it contains too many elements on one page. Therefore, we rearranged the information placement in order to achieve a more spacious layout in the search result page. Additionally, we emphasized sort and filter since users utilize both functions the most and eliminated the “Share button” because nobody uses it.
Improvement # 2: Make the ‘short’ shorter
We thought that our current filter’s flow was efficient enough until users think otherwise. Instead of adding separate pages for each elements’ details, we highlighted several hero options of each filter on the first page.
Improvement # 3: Designing for the Thumbs
Since the Price Slider is the most utilized filter, we decided to place it on the most convenient location for the thumb to adjust. We also adopted the chip component for easier access to a huge variety of options
Take a look at this article to get more info about The Thumb Zone: https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
Improvement # 4: Personalization Rules
The key aspect to revamp from the filter is definitely personalization in order to provide the most relatable options to the users, hence the hero options are based on the following considerations:
- User’s Option Preferences — For example, if the user often purchases products from Jakarta and Bandung, then those two cities will appear as the main options.
- Options with most search results — For example, if the Wooden Furniture sellers are mostly located in Jepara, then it’s likely that the choice of city ‘Jepara’ will appear as one of the main options.
This variable is also applied to other filter options, such as Pengiriman (shipping) and Brands.
Testing and Gather Feedback
“This is perfect!”
That was what I thought at first. I was so proud of it and not even once I think that my design will meet any pain points for the user.
I’ve never been so wrong.
Before we ended up with the final design, it has been changed several times due to the feedbacks from Usability Testing with users.
As you can see in the first image, there is no “Apply” button because I personally think “auto-generated result” will look really cool and the use of buttons will only add another step to the user. In addition, the use of 3/4 screens with the aim of showing the “auto-generated result” feature turned out to be completely ignored by the user. In fact, they consider it annoying because the filter space gets smaller.
And surprisingly, the users prefer to tap on something after they set up the filter in order to get the “I’ve done something” feelings. So that’s why the appearance of the “Apply” button is very crucial.
Result
Compare to the old filter, our Add to Cart Conversion Rate has increased by 26,6 %! *
Our users discovered that the new design is more comfortable to use. They don’t need to learn to use it. One thing we know for sure, the job has been done well.
*data from the Android platform
****
Conclusion
What did I learn?
- In the beginning, I’ve always underestimated the impact of a small revamp until I worked on this project — every project needs to be treated as a masterpiece because every task is equally significant regardless of its scale and complexity.
- Even though the design functionality is good, it doesn’t mean that it has no pain point. Therefore, to discover the unidentified pain points, we need to empathize with the user to assess the design from their perspective.
- And finally, through this project, I’ve learned that small revamp can potentially result in a huge impact.
***
Special thanks to Research Team, Project Owners, UI Designers, UX Engineers of Tokopedia and everyone who supported and helped me during the development of this project.
