E-commerce / Platform Redesign

CVP

Redesigning cvp.com end to end: every template from the homepage to the product page rebuilt on a new design system, for one of Europe's largest professional video equipment resellers.

cvp.com

CVP is one of the largest independent resellers of production equipment for the media and entertainment sector in Europe. Over 100,000 products, and cvp.com is where most of them are sold.

The site had grown template by template for over a decade on a legacy UI framework. I led the design of a full rebuild: one visual language, one component library and one clear way of shopping across the whole catalogue, from the homepage and department pages to product pages, search, account and support.

The new platform went live in June 2026 after eight months of migrating around 400 templates, built on the design system I created alongside it. Every screen on this page is a production template, not a mockup.

Role

Lead UX/UI design + front-end development

Scope

Homepage, navigation and search, department and catalogue pages, product pages, services, events and account, responsive throughout.

Stack

Figma, Tailwind CSS v4, Basecoat UI, Lucide, native HTML dialogs, PHP templates

Live

June 2026

User Experience

Visual Design

Information Architecture

Design Systems

Front end development

Analytics & Iteration

Navigation & Department Pages

Ten departments, hundreds of brands and one question on the homepage: what are you looking for?

The header was rebuilt around a department-first mega menu with brand shortcuts, a single inline search and always-visible account and basket. Department pages became routers rather than brochures: a photographic hero, four promise chips (delivery, finance, expert advice, used kit), a complete category directory, brand chips with search, then product rails.

Analytics showed department pages send almost no one to checkout directly, so the measure of success was follow-through. After the July 2026 redesign the share of department visits that continued into the catalogue rose from 89% to 95%, up in eight of nine departments.

cvp.com/department/cameras

cvp.com/catalogue/show/all/department/lenses

Catalogue

One product card that works for a £2 lens cloth and a £30,000 tripod system.

Every card carries the same skeleton: image, name, a short spec or description, ex-VAT price and a plain-English stock line. Used and ex-showroom items swap the description for condition, warranty and key specs, so a buyer can compare a new lens with a graded one in the same grid.

Cashback badges, wishlist hearts, hover-to-second-image and "going fast" states all live inside that skeleton. Filters were rebuilt as category and brand tiles above the grid with a classic sidebar for the long tail.

Product Page

The product page does the work a CVP salesperson would do on the phone.

cvp.com/product/sony-fx5-cinema-camera

Sony FX5 product page: gallery, price, warranty, finance and availability beside Add to Basket

Everything answered next to the buy button

Price ex and inc VAT, warranty, availability, shipping and finance with the real monthly figure, in one block beside Add to Basket.

Build Your Kit

Accessories a professional actually needs with the camera, grouped by category and approved by the CVP team, added to the basket without leaving the page.

Gallery and lightbox rebuilt

A shared native-dialog lightbox with swipe, click-to-play video facades and fixed image dimensions so the page no longer shifts as it loads.

Knowledge hub

Real customer questions answered by CVP's technical team, with topic chips, a curated review video and honest reply-time stats. Draft answers are generated from CVP's own video reviews and approved by a person before they publish.

Community kit lists

Customers build and share the kits they shoot with, and every product shows the kits it appears in.

Used and ex-demo, first class

Graded stock shows condition, warranty and the saving against new, so second-hand kit sells on the same page furniture as new.

Mobile

Six in ten department visits are on a phone, so every template was designed at 390px first.

The department bar becomes a scrollable strip, promise chips stack, product cards go single column with the stock line intact, and the horizontal rails use scroll snapping with proper edge padding so nothing is cut off.

Under the Hood

A redesign this size only holds together if the rules are boring and everyone follows them.

One template at a time

The new templates ran in parallel with the legacy ones for internal users, falling back page by page, so the site could be migrated over eight months without a big-bang launch.

Documented in production

The design system lives at cvp.com/designsystem with theme tokens, spacing rules, component aliases and copy-paste examples, so the team reuses patterns instead of reinventing them.

Native first, less JavaScript

Modals became native dialogs, accordions became details elements and dropdowns lean on a small headless library. Hover states change a border or a colour, never a shadow or a lift.

Performance as a design task

A precompiled stylesheet replaced a runtime compiler, videos load on click, images ship with dimensions, third-party scripts are deferred and the old web-font service was removed.

One storefront, many markets

English, French, Spanish and German storefronts share the same templates, with regional contact and delivery cards for UK and EU visitors and a currency switcher in the header.

Decisions checked against data

Every structural change had a baseline in analytics before it shipped and a verdict afterwards. Conversion held steady through the switch-over and the department redesign was kept on evidence, not taste.

Outcome

A single, coherent storefront across every department, device and language, live since June 2026 and still shipping on the same components.

Scale

Around 400 templates redesigned and rebuilt, from homepage to account.

Follow-through

Department to catalogue continuation up from 89% to 95% after the department redesign.

Maintainability

Legacy UI framework replaced with documented Tailwind components the whole team builds with.

View the website

Go to cvp.com

AVAILABLE FOR NEW PROJECTS