Overview
The Catalog tool is how sellers on noon manage every product they sell —
viewing status, editing prices, checking stock, understanding QC issues, and pushing
products live. For sellers managing hundreds or thousands of SKUs, it is one of the
most business-critical pages they open every day.
The tool had been built incrementally over time and had accumulated serious usability debt.
I led the redesign of the three core surfaces: the Product Listing Page (PLP),
the Product Detail Page / SKU editor (PDP), and the Virtual Bundles (VBs) tool.
The Problem
A tool that had grown beyond itself
As noon's seller base grew and the platform expanded across multiple fulfilment
methods, the Catalog tool couldn't keep up. Sellers managing large catalogues
were spending significant time on tasks that should have been instant — and
often couldn't understand why their products weren't live.
-
👁
Poor visual hierarchy
Products were difficult to scan at a glance. Status, price, and stock were visually equal — nothing surfaced what needed attention.
-
🔍
Buried filters and actions
Core functionality — filters, saved filter views, and export — were hard to find or visually deprioritised, slowing down daily workflows.
-
❓
Unclear product issues
QC rejections and inactive statuses were mixed together with no clear indication of why a product wasn't live or what action to take.
-
📤
No export capability
Sellers had no way to export their SKU data despite a frequent operational need to audit pricing, stock, or issues externally.
-
🔀
Mixed fulfilment methods
FBN (Fulfilled by Noon) and FBP (Fulfilled by Partner) followed different rules and workflows but were collapsed into a single table, creating constant confusion.
Process & Key Decisions
Where the real design work happened
The redesign wasn't just a visual refresh — several structural decisions had to be made
before a single pixel was placed. Here are the ones that shaped the outcome most.
Decision 01
Separate FBN and FBP data within the same row — don't split into different views
Early explorations showed splitting fulfilment methods into separate tabs. But sellers often
manage the same product across both channels and need to compare them. The solution was to
show FBN and FBP as sub-rows within the same product entry — keeping context intact while
making the rules-of-each crystal clear.
Decision 02
Surface performance data (sales, views, units sold) directly in the listing
Sellers were navigating away from the catalog to check performance data in a separate
section. Bringing Sales, Units Sold, and Views into the table row meant sellers could
triage their catalogue — identifying underperforming products without leaving the page.
Decision 03
Replace status tags with actionable indicators — not just labels
"Not Live" alone tells a seller nothing useful. The redesign tied status tags to
issue counts (e.g. "Not live · 2 issues") with a direct "View issues" link —
turning a label into a starting point for resolution. Live products also showed
contextual signals like "Buy Box Won" or "Buy Box Lost".
Decision 04
Add pricing method context as inline tags, not just a number
A price alone doesn't explain whether it's manually set, driven by the pricing engine,
part of a sale, or a deal. Adding pricing method tags (Manual, Pricing Engine, Sale, Deal)
gave sellers the context to understand whether a price was intentional or system-driven —
reducing unnecessary edits and support tickets.
Decision 05
Introduce Filter Views as saved, reusable filter states
Power sellers run the same filter combinations daily (e.g. "Show only Not Live FBN
products with QC issues"). Rather than rebuilding these each session, Filter Views
let sellers save and reuse named filter states — a feature that had been consistently
requested but never built.
The Work
Key screens
📸 New PLP — "CAT New DS" frame from Figma
Redesigned Product Listing Page
FBN/FBP split per row, inline performance data, actionable status tags, pricing method context, and Export in the toolbar.
Before & After
Before
📸 Old PLP — export from "PLP old" section in Figma
After
📸 New PLP — same as cover screen above
📸 Filter Views panel — export from Figma PLP page
Advanced Filters & Saved Filter Views
Sellers can filter by status, QC state, fulfilment method, stock level, brand, and category — and save combinations as named views for reuse.
📸 Product Detail / SKU Editor — export from "PDP (SKU)" page in Figma
Product Detail Page (SKU Editor)
Redesigned SKU editing experience covering product info, pricing, stock, images, and QC resolution — with clear section structure and inline validation.
Impact & Outcomes
What changed
The redesign shipped and is in active use by sellers across noon's markets.
✓
Shipped and in active use across all noon markets
1st
First time sellers had a native export capability in the Catalog tool
↑
Add outcome or qualitative result here