.png/:/cr=t:0%25,l:0%25,w:100%25,h:100%25/rs=w:1209,h:660)
Search Funnel is a big UX flow for user to find anything in the app by keywords. Look simple, but there are many funnels to get the jobs done.
In existing app, actually Search funnel seem works well...
Design Process
Step 1 - Find the Core Problem
Step 2 - Define the Design Principles
Step 2 - Define the Design Principles
I led workshop with all team -design, tech, and some stakeholders to get clear objective.
We were going through existing flow, list down the insights and pain points, and come out with some How Might We points.
Step 2 - Define the Design Principles
Step 2 - Define the Design Principles
Step 2 - Define the Design Principles
Then I run through rough ideas from those HMWs, finding the similarity points between them all.
The output was the silver lining, which polished into Design Principles.
Step 3 - Design Concept
Step 2 - Define the Design Principles
Step 4 - Finalize Design
Now we were going back to existing design, sketching out ideas based on Design principles. Of course some were already mentioned.
The output was some rough design, some still in a plain text...
Step 4 - Finalize Design
Step 2 - Define the Design Principles
Step 4 - Finalize Design
Then all of those come in detail with high fidelity design. I aimed for ultimate version in every funnels, to be validated and previewed if it's feasible to make by tech.
The output was the final design in search funnels.
Step 1 - Find the Core Problem
Session 1: Reviewing Current Flow
We were walking down memory line as we questioning ourselves “why did we make it like this? Whose idea is this widget?" We had been struck by the fact that our design had many flaws, inconsistency, or maybe, just not fits with current condition.
Conclusion:
- We realized that we treated search as same as browse journey.
- We realized that we have no governance to put things up.
- We put too many content, led user to bounce out.
Session 2: Research and Benchmarking
Now is the fun part. We asked data team to drops some charts, number that mentioning search performance. We also had report from our research team regarding user's opinion. Lastly, had some competitor benchmarking to mark features we like/ dislike from each platform.
Conclusion:
- We realized that our product as not as attracting like competitors
- We realized that our users bounced out after clicked content/ features
- We realized that our search isn't as simple as we thought
Session 3: Pick the Battle
Finally, I collected all of those notes -insights and thoughts that scattered during workshop. As usual, grouped similar notes and writings to understand the main topic of those thoughts. We voted topics that we agreed to be the main problems to be tackled.
Conclusion:
Users feel overwhelmed and not attracted by features and attributes given throughout the search journey. Worse, many of them ended up not buying anything because they can’t decide which one to buy.
Simplicity
Simplicity
Simplicity
“To declutter things, only show what’s matter.”
We want users to use Search features as easy as Googling seamlessly. Type, get result, buy.
It’s supposed to be that simple.
Relevancy
Simplicity
Simplicity
“Anything users see throughout the journey should be relevant to the user’s intention.”
Going deeper, search journey is not only about accuracy, but also how the result can be broadened or narrowed depending on user’s intention.
Inspire
Simplicity
Inspire
“At the end, it’s our job to help users to have buying decision among countless choices.”
Search journey isn’t exactly that as same as browsing experience. Speed is essential. We want to make users able to taking decision early to buy, even in search result page.
Step 3 - Design Concept
Then we were facing a new problem. As we wanted to get rid off many widget and components, which owned by business team. The design team being oppressed because those widgets actually still making money. They put concern: why should we change winning formula? So here how I solved this:
Offer them other placements
Remind back our new principles
Offer them other placements
The biggest reason why their widgets perform was just because they’re on the biggest buying funnel. But instead of saying that, I collaborated with other team (home, PDP, promo) to find out if they can provide spaces for them to put the widget on.
Phasing changes
Remind back our new principles
Offer them other placements
To prove that our new approach would perform better, we agreed to change the design gradually in stages. We did A/B testing funnel by funnel, comparing the performance (mostly about success task rate). The result was obvious, revamped one show better performance.
Remind back our new principles
Remind back our new principles
Remind back our new principles
This is the another strong reason why I made Design Principles. When things go wild, I asked all team to look back at those principles, as we were together already agreed upon same vision.
Final Design
First Touchpoints
First Touchpoints
First Touchpoints
Very first flow that user will encounter. Search bar, Initial state and Autocomplete is a crucial part to give impression. The less user feel hassle, means the smoother the experience is.
Search Result
First Touchpoints
First Touchpoints
The core of search journey in e-commerce. User will getting purchase decision from search result page and product card. Getting them bad experience could make user bounces, even if the logic is right.
Complementary
First Touchpoints
Complementary
Some feature and addition that helps user to find the product faster, and obviously to make the search experience more engaging and effective.
First Touchpoints
Search Result
Complementary
Impact and Conclusion
Initial State & Autocomplete
Less is definitely more. Once we removed non related stuff, number of recommendation shown that led to transaction increased to 18%. Also, number of user get the task done (typing keyword, go to result page and do purchase) increased slightly (approx 3%) still a win though.
Product Card
Since we replaced with new one, we have achieved many!
- Product card that can contain more promotional banner, proven to attract user to click. Number of click increased 3.5%, while the CVR increased to similar number.
- Breakdown to specific page, non campaign page (recommendation, search result) show 5.06% increased CVR. While on campaign page (promo, business driven page) show 13.8% increased.
- Product card now can be implemented in more than 20 use cases, such as campaign, ads, and carousel. Here we can finally achieve consistency in whole platform.
Search Result Page
This is very unexpected. As we removed the masonry layout and using new product card, now the page is became way way lighter to scroll. We unintentionally eliminate up to 80% stuttering when scrolling the page!
Smart Filter
First we launched MVP version (existing component with prompted keyword) to testing user behavior with this new filter. We can see that users tend to click the filter with 5% conversion to purchase the product. Not bad!
Conclusion
Search module is one of the most unique module I ever handled. It required more than fancy design, instead, we had to balanced our common sense, tech capabilities, user's needs, and business stuff. I also learn on how to not afraid to change something that works already.
Like this case? Download PDF version here:
https://drive.google.com/uc?export=download&id=1WNz3KdqtLBINYeExS5hkvAcKcUXLmIKu
Read other journals
Tokopedia Gamification
Tokopedia Travel - Book Hotel
Tokopedia Travel - Book Hotel
My journey leading team and design direction of most interesting project in e-commerce -Gamification.
Tokopedia Travel - Book Hotel
Tokopedia Travel - Book Hotel
Tokopedia Travel - Book Hotel
Building first ever hotel booking service in south east Asia e-commerce, engraved Tokopedia's name as a Super App.