Improving search experience in an e-commerce website @Navabrind
Led the end-to-end design and achieved 28% revenue increase and 30% mobile adoption in the first quarter after launch
Web Design
Market Research
UX Design
Live Project
+28%
Revenue through website
+32%
Mobile adoption
+30%
Bounce rate
Background
A gym buyer in the Netherlands lands on Promofit looking for branded welcome gifts. They search. The results are overwhelming, irrelevant, or both. They leave. This was happening in 63% of sessions and it was quietly killing conversion before a single product was ever seen.
My role
I was the sole designer on a team of 3 engineers and 1 PM. I owned the full design process from running the competitive analysis to delivering production-ready designs in weekly sprint cycles and supporting engineers through handoff.
Business goal
UI update and optimising mobile experience
One of the key focuses of this project is optimising mobile responsiveness. The traffic in mobile was very low and the clients wanted an easily adaptable mobile version of the website.
Improving search experience
The irrelevant and overwhelming search experience was affecting the conversion and sales. Users relied on search but it was unreliable resulting in users abandoning the shopping.
Discovering problems affecting the shopping experience
The clients provided us primary research data which they collected through analytics, ticket records from queries and surveys. They identified these data through analytics and user reviews. The main problems were
42%
users landed on the homepage and exited without interacting with products.
63%
sessions used search but only 14% clicked results.
What I found
This told me the problem wasn't discoverability; users were searching. The product was failing them after they searched. That reframed the entire design focus toward result quality, not search volume.
Usability evaluation of the existing website
I conducted a heuristic evaluation of the existing site, focusing on the three business-critical flows: homepage landing, search, and add-to-cart.
Lack of visual hierarchy
No visual hierarchy on the homepage equal weight given to every element, making it impossible to know where to look first
Inadequate search results
Search returned results with no product context (no image, price, or stock), forcing users to navigate only through categories
Mobile header dominated the screen
Mobile header occupied 40% of screen height, pushing product content below the fold
Checkout flow was unnecessarily long
Reduced fields to only what mattered which leads to less cognitive load, same business value
Market analysis
I analysed 6 competitor e-commerce sites in the Netherlands to understand how they handled search, information architecture, and product customisation. The goal was to understand the baseline Dutch users already expected, then find where we could do better.
Search Experience
Pattern
Issue
Type A: Direct redirect to product listing
Users lose context
Type B: No search suggestions
High typing friction
Type C: Rich suggestions with previews
Helps users decide faster
KEY INSIGHT
Competitors either showed no suggestions at all or redirected users to a full listing page, losing context in the process. The gap was rich, in-context suggestions that let users evaluate before committing to a click.
Categories navigation
Competitor category menus failed our content for two reasons: their single-level subcategories couldn't accommodate our two-level hierarchy, and hover-triggered menus were causing accidental openings. We adopted Amazon's click-to-open drawer pattern, widely recognised in e-commerce and designed to handle deep category structures without taking over the screen.
Priority matrix
With budget and time constraints, we couldn't build everything. I ran a collaborative prioritisation session with engineers, the PM, and backend developers to map features against effort and impact.
This gave us a clear build order, starting with rich search suggestions and mobile responsiveness in sprint 1, the customisation feature in sprint 2.
UI Design
To feel familiar to Dutch users, I referenced the dominant visual conventions in the Netherlands market including large typography, high-contrast colours, and consistent navigation structures. The goal was a cleaner version of what users already trusted, not a reinvention.
Home page
The restructured homepage put products in front of users within the first scroll, directly addressing the 42% of visitors who were leaving without interacting with a product.
Search result
Showing product name, stock, image, and price in the suggestion panel meant users could make a decision before navigating targeting the gap between the 63% who searched and the 14% who clicked.
Categories menu
Switching to a click-to-open drawer eliminated accidental menu triggers and accommodated our two-level category hierarchy, which something no competitor pattern could do without taking over the screen.
Testing
I tested the new design with colleagues through walkthroughs and assigning tasks to do tto observe their behaviour and usability. I tested designs early and got feedbacks and continuously iterated to save time and to move in the right direction.
Once the testing yielded satisfying results, we demoed the product to the clients and shipped succesfully.
Impact
The following metrics measured the success of the website re-design process. It was given to us from the clients after they reviewed their analytics in the first quarter of launching the website.
+28%
Revenue through website
+32%
Mobile adoption
+30%
Bounce rate
Key Learnings
Simplicity enhances conversion
Reducing the homepage to a single visual focus, the search bar, and the immediate product grid was the single change most correlated with the bounce rate drop. Simplicity wasn't an aesthetic choice here; it was a conversion strategy.
Not to wait for perfect conditions to test
I always showed my design to my colleagues as soon as I design a new element or section to get an objective set of eyes and ask them to use the screen to check the usability and look and feel. This saved me lot of time.
Things I wanted to do but could not
I would have used card sorting to understand how users mentally categorise products — because fixing search helps users who know what they want, but a broken IA fails users who are still browsing. That's a problem we didn't fully solve.
Trade-offs I was conscious of
Click-to-open vs hover for the category menu
Switched from hover to click to prevent accidental triggers and improve first impressions for new users, prioritising reduced interruptions over familiarity for returning visitors.
Information density in search suggestions
Added product image, price, stock, and name to suggestions for more informed choices, accepting increased visual weight to boost user confidence, especially on mobile.
Products above the fold vs brand breathing room
Moved products directly below the hero section to boost engagement, prioritising conversion over brand storytelling to address high drop-off rates.
