John Lewis

A complete re-design of the John lewis mobile website.

John Lewis mobile screengrab

Component design

The site was built using a brand new bespoke component library to create a modular and reusable codebase. Currently designed to work up to 7inch tablet, this will form the platform to scale the website up to desktop. The UI design was created in Sketch, designs were broken down to the smallest elements. These elements were used to build components which can be combined to create page layouts.

John Lewis mobile screengrab

Research and rapid prototyping

At John Lewis we have the benefit of being able to see customers interacting with prototypes in a live enviroment. Card sorting, customer focused tasks and user feedback is used to refine the experience on a weekly basis.

John Lewis mobile screengrab
Menu development

CMS widget and style guides

Bespoke widgets were created for the content team to enable them to create campaign pages, cutomer service content and homepage updates. These widgets were fluid in width and were design to fit into any layout. The widgets also went through a strict QA process to make sure they worked on the most popular devices and browsers. I created a style guide for the content team to follow, with brand UI colours, typography and the widget assets to be used in their mockups.

John Lewis mobile screengrab

Scaling up

I was also involved with the early second phase of the project, scaling the design up for larger screens. I started out by printing out the mobile pages and sketching large screen layouts with the intention to use the current set of components. This was a helpful exercise to show the team how the large screen layouts could be developed without much change to the existing code.