E-commerce · UX/UI · Conversion
A Discovery-First E-commerce Experience
The catalogue was large, the search was literal and the filters reset your place. Discovery was rebuilt around narrowing rather than browsing.
- Role
- UX/UI Designer
- Tools
- Adobe XD, WooCommerce
- Platform
- Responsive web
Scroll to explore ↓
01 — Overview
Discovery, not decoration
Scope covered product discovery, navigation, search, filtering, product comparison, product detail, cart and checkout.
The redesign was structural. Almost none of the value came from restyling; it came from changing what the page lets you do next.
Designed for
Representative user profile
Elena, 33
Returning shopper, price-sensitive
Goal — narrow a large catalogue without losing her place mid-browse.
Frustration — filters that reset every time she goes back to a product.
Representative user profile
Jordan, 24
First-time visitor
Goal — compare a few options side by side before deciding.
Frustration — literal search results that force her to open a dozen tabs to compare.
02 — Before
What the old catalogue asked of people
Before
Category names that only made sense internally
After
Navigation labelled the way customers ask for things
Before
Search matched strings, not intent
After
Suggestions, synonyms and a useful empty state
Before
Applying a filter reloaded and scrolled you to the top
After
Filters apply in place, with removable chips
03 — Problem
People could not hold a shortlist
Comparison happened in browser tabs because the site offered no way to keep two candidates side by side. Every comparison attempt was a chance to leave.
“I had four tabs open trying to work out which one was the same thing cheaper.”
04 — Opportunity
Make the shortlist a first-class object
Compare in place
Select two to four items and see their attributes in one table.
Persistent refinement
Filters live in the URL, so a shortlist can be shared or reopened.
Honest product detail
Specifications, availability and total cost stated before the cart.
Checkout without detours
One column, no account wall, no fields nobody needs.
User flow
Browsing to a completed order
Browse
Navigation labelled the way customers ask for things
Search
Suggestions, synonyms and a useful empty state
Filter
Filters apply in place, with removable chips
Compare
Select two to four items and see attributes in one table
Product
Specifications, availability and total cost stated up front
Checkout
One column, no account wall, no fields nobody needs
05 — After
Comparison and checkout, shipped
06 — Outcome & learnings
What changed for shoppers
More product pages ended in an add-to-cart instead of a bounce.
Fewer searches ended with someone leaving before applying a filter.
More carts converted once checkout lost its surprise fields.
What worked
Putting filter state in the URL made shortlists shareable, which quietly turned comparison into a support tool as well as a sales one.
What I would change
The comparison table needed a mobile-native pattern earlier; the first attempt was a desktop table that had to be rethought.