Promotion Products  /  Corporate merchandise  /  B2B e-commerce

A catalogue restructured around how buyers search.

An end-to-end redesign of a large promotional-merchandise store. A buyer looking for 500 branded pens had to work past nineteen sidebar categories and fifteen undifferentiated product tiles before reaching anything they could enquire on. The catalogue was sound. Getting through it was the work.

Client
Promotion Products
Role
UX/UI lead designer
Scope
Audit to design system
Platform
Desktop & mobile
Goal
Discovery to enquiry
The redesigned homepage, desktop
The redesigned homepage, mobile
01
The problem

The best-selling products sat below everything else.

The old homepage gave equal weight to every category it had, so the products that sold were indistinguishable from the ones that did not. Best sellers appeared below two long blocks of sales copy. The enquiry path competed with a phone number, an e-guide, a blog teaser and a best-value badge, none of which led anywhere a buyer needed to go.

On a phone it was worse. A fixed-width desktop layout with cursor-sized buttons, carrying the same nineteen-link sidebar. The buyers were procurement and marketing staff ordering in volume, often from a desk they had already left.

Before
Old design
The original Promotion Products homepage
After
New design
The redesigned Promotion Products homepage
02
The solution

From audit to design system.

A heuristic evaluation and an analytics review decided the structure. Search and page data settled which categories earned a place on the homepage and which belonged a level down, and showed where buyers were dropping out. That produced a restructured information architecture, then mobile-first wireframes, then a component library the developers built from.

Element
Archived
Redesigned
Palette
Dull greys against three unrelated blues.
One brand blue, with contrast held to a minimum ratio.
Typography
Several styles at similar sizes, so nothing read as a heading.
One family on a defined heading scale.
Imagery
Low-resolution stock shots of unbranded product.
Product photography showing the branding, which is the thing being sold.
Calls to action
Repeated on every block until no single one carried weight.
One primary action per screen, at the decision point.
Layout
Fixed width, with spacing set per block.
A modular grid that reflows, with spacing from one scale.
After  /  Mobile first
Redesigned mobile category page
Category. Filters and a sort control, above product cards sized for a thumb.
Redesigned mobile product page
Product. Quantity breaks, colours and decoration method before the enquiry action.
Redesigned mobile quote basket
Quote basket. Line items, an estimated total and the contact fields in one scroll.
After  /  Desktop
Category
Six filter groups in a fixed rail, so the catalogue narrows without losing the results.
Category, desktop
Product
Volume pricing as a table, decoration method as a choice, specifications below the fold.
Product, desktop
Quote basket
Line items on the left, the quote summary and contact fields held together on the right.
Quote basket, desktop
03
The result

A store a buyer can get through.

The legacy site is gone, and with it the sidebar of nineteen links and the wall of copy above the products. What replaced it is a structure built from what buyers were already searching for, shipped as a component library the team extends without a designer in the loop.

01
An information architecture that puts high-demand product groups on the first screen.
02
Search and filtering that handle a catalogue this wide without a buyer knowing the category names.
03
A UI system and design library, so a new category page is an assembly job.
04
One enquiry action per screen, placed where the buyer has enough information to use it.
05
A layout that holds from a phone to a desktop, which the original never did.