John Lewis & Partners

Web
Client

John Lewis & Partners

Role

Senior UI Designer

Year

2020

The Story

A design refresh for John Lewis & Partner’s web navigation and product pages.

As part of a short hackathon, the challenge was to push the boundaries of the existing design system called Mono. I focused on the website’s main navigation and product details pages (PDP).

 

1. Navigation

My hypothesis was that more and more focus will probably move towards providing online and offline services alongside selling physical products. This is especially accelerated by the COVID-19 pandemic.

My proposed change is a possibly radical change from the existing navigation, moving all the visible categories and having two simple entry points for product shopping or services. Additionally opting for more rounded shapes to create a friendlier look and feel and using a wider view instead of the existing restriction to 1200px width.

 

Existing:

jl-nav-before

Refresh concept:

jl-nav-after

Homepage:

2. Product page

One of the things I looked at to refresh was the Product Details Page (PDP). As there is a lot of information on the page which over years have been added and tweaked, the information feels quite cramped and busy. I tweaked the layout by updating typography sizing and giving the content more space to breath.