Boots Listing Pages

In October 2021, I was nominated by Senior Design Leadership at Boots to be the Design Lead, responsible for the delivery of the new Listing Pages.

In less than 4 months, we were able to take the listing pages from the Research Phase to High Fidelity Design, frequently checking in with the Leadership, and proving the improvements’ value by running User Testing sessions.

The results can be displayed on Boots.com today – where my original design is present, not changed in the slightest from the vision, and the handover files I have left behind. The current experience continues to delight the 2 million customers that reach the site daily, Boots.com remaining the UK’s number one most visited health and beauty website

In Short

Time frame

October 2021 - March 2022

Disciplines

UX & UI

03.

Advanced Tech

04.

Licensed

Professionals

Discovery

To successfully elevate the shopping experience in Boots, we conducted a UX review of the current Lister Pages by identifying the pain points:

Lack of visual hierarchy
Visual inconsistencies (e.g. type-face, font weight)
Low-resolution images and inconsistent visual elements
Multiple widgets used to display the same information (e.g category in filter bar and as chips on the top)
Design and page behavior does not accommodate for a large catalogue
Filter bar is not sustainable for extensive filter options

Wireframes

Through the course of 2 months, we have produced multiple wireframes for the Lister Page and each of its functionality. The clients were kept updated through a series of presentations and discussion that occurred daily. The main elements we had a look at during the project were:

Primary Filter Navigation
Categories
Display of cate
Hero Filter
Product Tile
CHANEL Templates

Heading 2

“What matters most is that you really care about the work you do, always pushing for answers, clarity and grounding in insight to produce the best quality and experience for our business and users.

Alexa Young, CA

The Final Result

In terms of Boots’ Visual Identity, we had to take into consideration what they were working with and what their current brand entailed. Nevertheless, we have experiemented with an alternative, visual approach which focused on seamless, flush finish, rounded corners, introducing shadows to add definition (as opposed to borders).

This experimentation was based on trends we saw on the market, initially inspired by the simplicity of IKEA and MADE, and applied te principles of the Atlassian Design