ISSUE #001
THE CATALOG HEIST · A UX MYSTERY
★ ONE-SHOT SPECIAL ★
Back Issues Spanning
A Whole Century
Clicks To See
A Single Product
Of Visitors Bail
After 5 Seconds -Byamard
Chapter One
MEET
MY CLIENT
★ AUSTRALIA'S OLDEST COMIC SHOP ★
PANEL 01 · BAYSWATER, VICTORIA · EST. 1977
01
47 Years. Half a million products. One problem.
Alternate Worlds has been Australia's home for comics since 1977 — the longest-running comic retailer in the country. They've built one of the deepest catalogs anywhere: over 500,000 back issues, current releases, graphic novels, manga, statues, collectibles.
The problem? Their search was designed for a smaller store than the one they'd grown into.
★ The Client
"First-time shoppers tell us the search feels broken. But our long-time customers don't want us to change anything. Help."
Chapter TWO
THE
CRIME SCENE
★ INVESTIGATING THE SEARCH PAGE ★
THE INCIDENT
A USER TYPES "BATMAN"...
...and lands on a page with ZERO PRODUCTS.
No covers. No prices. No add-to-cart buttons. Just a wall of fourteen category names with numbers next to them. COMICS (4,898). BOOKS (733). TOYS/NOVELTIES (92).
To buy anything, the user has to click three or four pages deep. If they want to switch from
Comics to Toys halfway through? Start over.
CHAOS!
PANEL 02 · THE TWIST
02
But here's the thing... the design wasn't entirely wrong.
Power users — comic collectors who'd shopped at Alternate Worlds for fifteen years — actually loved the category overview. They wanted to see the shape of the catalog before browsing.
So we couldn't just delete the pattern. We had to figure out how to keep what worked for power users without breaking everything for new ones.
★ Us, Thinking
The real problem isn't the pattern. It's. Forcing every user through it.
Chapter THREE
THE
RULES
★ THREE PRINCIPLES, ZERO OPINIONS ★
Every decision pulled from Baymard Institute and Nielsen Norman Group research. We
don't do opinion-led design.
01
Categories Are Filters,
Not Steps
Treat categories as refinement tools applied to the same page — never lose the user's place when they switch context. Baymard's highest-leverage pattern for catalogs over 1,000 products.
02
Search ≠ Browse
Clicking "Comics" is browsing. Typing "batman" is searching. Baymard is explicit: these need structurally different pages. We designed both, sharing one brand system.
03
Group By What
Collectors Think In
Comics have a native grouping unit most ecommerce sites miss: the series. Collectors don't think in attributes — they think in runs, issues, eras.
Chapter FOUR
THE
MASTER PLAN
★ TWO PAGES, ONE SITE NO COMPROMISE ★
FOR BROWSERS
Nav landing →
Hybrid Category Page
★
Editorial hero with department context
★
Subcategory tiles as primary content
★
Featured products as supporting evidence
★
NO filter sidebar — user hasn't declared intent
For the user who clicked "Comics" from the menu.
FOR SEARCHERS
Search results →
Faceted Product Grid
★
Products visible IMMEDIATELY on load
★
Subcategory shortcuts as pill row
★
Filter sidebar present — user declared intent
★
No hero, no editorial — products are the answer
For the user who typed "batman" and hit enter.
SIDE BY SIDE
BEFORE
AFTER
BEFORE
One pattern for everything
Every entry lands on a category index
Zero products visible until 3rd or 4th click
Switching context = start over
Search confuses first-time users
Browsing feels structureless
AFTER
Page type matches user intent
Nav → hybrid category page with tiles
Search → faceted grid, products immediately
Filters apply in place, no reloads
Both pages share one brand system
Power users keep structure, new users get speed
Chapter FIVE
THE
★ NOT WIREFRAMES — PRODUCTION-READY ★
THE PRODUCT CARD
Full-bleed cover art. Strict 4-color badge vocabulary
(Variant, Low Stock, Classic, New). Hover-revealed add-to-
cart so the resting grid stays scannable.
THE SERIES ACCORDION
The most unique component. Comics belong to series with hundreds of issues. Each header shows stacked-cover thumbnails, run metadata, issue count. Expand → horizontal-scroll preview. Click through → dedicated series page.
RECONTEXTUALIZING FILTERS
Filters change based on what's selected. Filter to "Comics" → "Publisher" appears. Filter to a series → "Issue range" appears. Baymard's "prioritize by relevance" guideline in action.
MOBILE-FIRST, NOT ADAPTED
Bottom-sheet filter panels. Horizontal-scroll issue previews (outperform vertical grids on small screens). Sticky filter + sort toolbar pinned to the viewport.
Chapter SIX
THE
HARD
CALLS
★ DECISIONS THAT NEEDED REAL CONVICTION ★
HARD CALL #1 · THE TEMPTATION
01
We kept the catalog overview — the thing everyone called "the problem"
The easy answer was to delete the category index entirely. We didn't. Power users genuinely valued it. Instead, we moved it from a forced step to an optional sidebar. The structure stayed. The friction left.
★ Lesson
You can't fix what's broken unless you also understand who was succeeding with the broken version.
HARD CALL #2 · THE GAMBLE
02
We grouped the product grid by series — not by attributes
Most ecommerce would show 4,898 Batman comics in a flat grid sorted by date. We grouped them by series with collapsible accordions because in series, not in dates. It's a real risk — grouping makes cross-series discovery harder. We balanced it with a "Flat grid" view toggle so users can switch when intent shifts.
HARD CALL #3 · THE HONEST PITCH
03
We presented three options — when we already knew the right answer
Option A (Blocksy-only, no custom dev). Option B (recommended, ~3 weeks). Option C (best-in-class, 6+ weeks). We could've just presented Option B. Instead we walked the client through all three with honest tradeoffs. Result: faster approval, more trust, clearer scope.
★ Lesson
You can't fix what's broken unless you also understand who was succeeding with the broken version.
Chapter SEVEN
THE
ROLLOUT
★ THREE PHASES, NO BIG-BANG LAUNCH ★
PHASE 01
WEEK 1
Stop The Bleeding
Products visible on first search, filter sidebar working, mobile off-canvas filters live. Pure Blocksy + FiboFilters configuration. Zero custom development.
Biggest UX win of the project happens here.
PHASE 02
WEEKS 2–3
Match Modern Expectations
Layer in the recontextualizing sidebar, shortcuts pill row, active filter chips, series accordion. ~2 weeks of custom dev on top of Phase 1. This takes the
site from "fixed" to "actually good."
LATER
Best-In-Class (Only If Data Justifies)
Analytics-driven shortcuts, SEO landing pages, merchandised theme hubs. We deliberately recommended against shipping this initially.
data shows search drives revenue, this is premature optimization.
EPILOGUE
WHAT'S
NEXT
★ PROJECTED IMPACT, HONESTLY ★
HONEST DISCLOSURE
★
The build hasn't shipped yet. We're not going to invent metrics. Here's what the research predicts — with sources cited:
★
Search bounce rate
— Baymard projects 15–30% reduction when products become visible on first search load
★
Product discovery time
— NN/g studies show users reaching products 40–60% faster with subcategory tiles
★
Mobile conversion
— Off-canvas filter panels improve mobile filtering completion by 25–40%
★
Power user retention
— Preserving the catalog overview means the existing base doesn't churn
We'll update this case study with measured results post-launch.
3 Ways I Can Help You
Product. Website. UX Audit.
🎨 My product design services focus on creating intuitive and aesthetically pleasing products that resonate with your audience and stand out in the market.