Shruti · Product Design Case Study

Category page · Discovery

A category page
worth the scroll.

The browse page is where someone decides where to even look. I rebuilt it into something the team can merchandise — flexible, configurable, easy to reshape by season — without losing hierarchy or calm.

RoleDesign Lead
SurfaceMobile app
FocusBrowse & discovery
StatusLive in app

Where this sits

The front door to the catalogue.

The category page is where someone lands when they know roughly what they want but not exactly where it lives. It sets the tone for everything after it — if people can't find their way in, nothing downstream matters.

This one's the app. It sits alongside the checkout work as part of the same effort to make the core shopping flows feel considered end to end. Where checkout was about removing friction, this was about invitation — making the catalogue feel explorable rather than listed.

What it actually had to do

Built to be reconfigured, not fixed.

The old page was rigid — a fixed layout the brands and category managers couldn't merchandise or reshape for a season. Everything the redesign became was an answer to that.

BeforeOld category page: a grid of plain category buttons, hardcoded promo tiles, a banner, and product tiles.
←A fixed layout — nothing the team could configure
←Promos hardcoded — nothing to merchandise by season
←Every category carried the same weight
←Sub-categories buried, hard to surface

The messy middle

Several rounds to land the structure.

We weren't designing a page so much as a system of slots the team could rearrange. Getting it flexible enough to reconfigure but coherent enough to never fall apart took a few rounds — explored, reviewed with the brands and category managers, narrowed down.

A wall of design iterations — level rails, a hybrid tile navigation, a category dropdown, a custom-block layout, and the nesting direction, pinned and overlapping.

Iterations & explorations — the final is the reveal up top

Old to new

Tap to see the redesign.

Here's the old category page. Tap it — the redesign wipes in over the top, same frame, so you can feel the difference directly.

BeforeOld category page: a grid of plain category buttons, hardcoded promo tiles, a banner, and product tiles.
After Redesigned category page: promotional tiles, a featured banner, and expandable category sections with imagery.
Tap to see the redesign

The part I'm proudest of

A page that responds as you scroll.

The interaction I'm most proud of is how the page behaves in motion. As you move down, the category sections and their imagery respond to scroll depth — so browsing feels alive rather than static. It was thought through in detail, and the dev team executed it beautifully.

The redesigned browse page, in motion

On measurement

No dashboard on this one.

I'll be straight about it: analytics events weren't instrumented on this page, so I can't hand you a conversion number. I'd rather say that than dress up a metric I don't have.

If I were measuring it now, I'd watch three things: tap-through from the browse page into subcategories, how far people actually scroll, and add-to-cart rate from browse sessions. Those would tell you whether the discoverability the redesign was built for is real — and it's the instrumentation I'd put in first if this were mine to own again.

How I think about it

Good browse design gets out of the way. You don't notice the structure — you just end up where you wanted to be, a little faster than you expected.