Selfridges Online

Year: 2013-2015
Client: Selfridges & Co.
Disciplines: Product Design

About
In 2014 Selfridges committed more than £40 million over five years to digital, starting with a complete relaunch of selfridges.com. More than half of its online visitors were already shopping on a phone or tablet, so the new site had to be built for them first.

My role
As Lead UI Designer, I worked directly with the Head of UX on a ground-up redesign and re-platform of selfridges.com. I created the full style guide, the pattern library and every page in the core journey, from homepage to checkout. All design was done in-house, with an external agency handling the build.

Approach
The hardest part was range. Selfridges sells everything from designer dresses to a single piece of cutlery, and every page had to work for all of it while still feeling like the luxury experience customers get in store. A cleaner, simpler on-brand design and a touch-first approach led to an almost immediate uplift in conversion across mobile and desktop.

Flexible Grids
Premium products deserve room. The gallery mixes image sizes so the range can be browsed in different ways, and hero products can stand out.

The homepage window
Selfridges is famous for its Oxford Street windows, and we wanted the homepage to have the same impact. Instead of a long page of panels and promotions, it opens with a single hero carousel that lets the product shine.

Concept development
Early sketches of the product page, the most demanding page on the site. It had to handle a designer dress and a single fork equally well, meet complex functional requirements and still look premium.

Early Product page designs
Prototyped and tested with the UX team.

Build Specifications
Every component was measured and annotated for handover. The development agency worked remotely, so it was important to get the build right first time.

Final Product Page Design
The signed-off product page after stress testing and refinement. One flexible layout handles products with many sizes and colourways and those with none, all built on the same core concept.

Refined checkout process
We can’t recreate the in-store purchase online, but we could make checkout as clean and effortless as possible.