From browsing to buying: why catalog design matters
The catalog page is where decisions happen. A user arrives ready to find a product among hundreds or thousands. Bad catalog design means lost orders. One client (a marketplace with 50,000+ SKUs) lost up to 40% of users at the filter stage: filters reset on page reload, pagination led to 404s. After a full catalog redesign, conversion rose 18%. We design catalogs that convert, drawing on 10+ years of experience — from niche online stores to marketplaces with millions of SKUs.
Catalog design isn't about beauty; it's about findability, filter efficiency, and information density. Every element drives results: grid structure, micro-interactions, loading states. We detail each screen for user scenarios from first visit to repeat purchases. Loading a catalog in under 2 seconds boosts conversion by 7% (data from Google), so performance is as much a design element as color.
Why structure makes or breaks effectiveness
A typical layout has several independent zones, each solving a specific task:
- Navigation zone. Breadcrumbs + sidebar or horizontal subcategory hierarchy. For deep catalogs (3+ levels): dropdown tree or mega-menu.
- Filter zone. Sidebar on desktop, offcanvas drawer on mobile. Filters grouped by semantics: attributes → price range → availability → rating. Each group is an accordion.
- Listing control zone. Result count, sorting (popularity, price, newest), view toggle (grid/list), items per page.
- Product card grid. The main workspace.
| Device | Cards per row | Recommended gap |
|---|---|---|
| Desktop (1280px+) | 3–4 | 24px |
| Tablet (768–1280px) | 2–3 | 16px |
| Mobile (320–768px) | 1–2 | 12px |
-
Pagination. Load more (append) vs classic pagination vs infinite scroll. Append with position saved via
history.pushStateis the optimal compromise.
Investing in catalog design pays off in 2–3 months through higher conversion.
Anatomy of a listing card
A catalog card shows less than a product page, but enough for comparison:
- Image (usually square 1:1, hover reveals second image)
- Name (max 2 lines,
-webkit-line-clamp: 2) - Price (current + strikethrough if discounted + percentage badge)
- Rating (stars + review count)
- Availability (in stock / on order / out of stock)
- CTA button (add to cart / in cart / choose variant)
Extras: badges (new, hot, sale), wishlist icon, quick view.
Filter design: UX details
Checkboxes vs tags. Use checkboxes for 3–8 options. For colors, use visual swatches. For 10+ options, add a search field.
Price range. Double slider with input fields. A histogram showing product distribution over the slider adds context (pattern from Amazon, ASOS).
Applying filters. Two approaches:
| Approach | When to use | Features |
|---|---|---|
| Instant | Small catalogs, fast API | Applies on click, updates list immediately |
| Delayed | Slow API, mobile devices | “Apply” button, prevents unnecessary requests |
Active filters appear as tag pills above results with a cross to remove each, plus a “Clear all” button.
Empty states and edge cases
Zero filter results — not a 404 page but a dedicated screen with an illustration, explanation, “Clear filters” button, and suggestions for similar categories. A catalog with a single product should redirect to that product’s page instead of showing a one-item listing.
Skeleton loading for perceived performance
When updating the catalog via AJAX (applying filters, changing pages), use skeleton placeholders instead of a spinner:
.skeleton-card { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } This reduces perceived latency and improves UX.
SEO requirements
- Each filter page with a unique parameter set must have a canonical link to the main category page.
- H1 should change with category selection: “Laptops”, not “Catalog”.
- Text for result counts: “142 laptops in stock”.
- Structured data:
ItemListwith the first 10 products.
Performance
Images are the main bottleneck. Recommendations:
- WebP + AVIF with JPEG fallback via
<picture> - Lazy loading for cards below the fold, eager for the first 4–8
- Image dimensions: 400×400 for listings (don't load 1200×1200)
-
aspect-ratio: 1/1on the container to avoid CLS
What's included and timelines
You receive:
- Mockups for all screens (desktop, tablet, mobile)
- UI kit of catalog components
- Filter prototype with all states
- Implementation guide for developers
- Original Figma files
Timelines: design for one product type, one breakpoint, without filters: 2–3 days. Full design with adaptation, complex filters, and states: 5–8 days. Design + component system + handoff: 1.5–2 weeks. Pricing is calculated individually.
Our experience
Over 50 successful projects, team of certified UX specialists. A catalog with thoughtful UX gets users to purchase 2× faster. Order a catalog design that increases sales. Contact us to discuss your project.
Our designs save an average of 20% of the budget on revisions.