Argos Product Description Page

Conversion

Up by 4.9% on mobile, and 3.9% on desktop and tablets.

Revenue Per Visitor

Increased by 5.3% on mobile and 1.9% on desktop/tablet.

UX/UI Design + User testing

The challenge

Argos wanted to update their main Product Description Page (PDP) to a fully responsive solution instead of living in the old world of running two sites (mobile and desktop) side by side. They also wanted to use this piece of work as a precursor to the rest of the site going fully responsive, so testing the updates and new technologies being used was of paramount importance.

With these changes it was also an opportunity to redesign the various features of the page to better improve customer experience. Be it from the overall layout and look and feel of the page, to fundamentally how things work.

How it started

The team participated in a Google Week, during which a functioning prototype was sketched up, designed, built and finally tested with customers across a five day period. 

Idea generation – card sorting exercises and crazy-eights formed the early part of generating ideas for the new page, all backed up with solid UX fundamentals.

UI Design – based on the agreed approach, the UI was designed and built ready for testing at the end of the week. This testing would then be the catalyst for the evolution of the page moving forward.

What we did

The initial Google Week and data gathering informed the following principals for the page design;

  • The page should be much shorter than the old version and more focussed, allowing customers to better make their way through the page without the need to process too much information.
    • To achieve this, the idea of having content blocks (product description / reviews / etc.) partially collapsed was decided upon. These blocks would give a teaser of their content allowing customers to expand them if required. 
  • Concise headings to make the page as functional and clear as possible. 
  • Make use of whitespace to break up the page content using the Bootstrap framework as a base.
  • Two column design showing informative content and purchasing journey.

Key features

Responsive design – utilising the Bootstrap 3.0 framework the UI was designed to be free flowing across multiple breakpoints, ranging from mobile, through to phablet and tablet, and finally onto desktop. The UI was primarily designed to be touch friendly, making use of negative spacing and large calls to action and interactive elements.

Store locator – a brand new, cross platform store selector making use of interactive maps to help customers find their nearest store.

Special offers – a new facility for building special offer bundles with an emphasis on cross breakpoint scalability 

Collapsed view – the old PDP was crammed full of so much information, when printed out it was over 6 feet long! Through customer and competitor research we found that collapsing the various section of the page made it easier to digest as well as make it quicker to find the details that customers want.

Essential Extras Desktop 160908
Essential Extras Mobile 160908
PDP Wide Blue
PDP MediumBreakpoint Grids
Credit Lightbox@2x
Ingredients Existing Alt
Services Colours
Variant Tooltip