John Lewis - Made to Measure

jl-logo@2xjl-logo@2x

PROJECT OVERVIEW

Made to measure roller blinds were the first products to get this new treatment on the mobile website.

This feature allows customers to create a roller blind to fit their window. Instructions show them how to measure correctly and gives them the guidence to make the right decisions for a potentially confusing set of choices.

Below is our first release which is constantly being improved as the team gain knowledge from analytics and customer testing.

Complete user journey for roller blinds

MY ROLE AND RESPONSIBILITIES

  • Initial design sprint, idea generation and sketching
  • Working closely with the lead UX architect to create a functioning Axure prototype and then test it with customers
  • Liasing with stakeholders and copy writers to create relevant content and guidance for customers
  • Creating storyboards and art directing the 'How to measure' video
  • Designing the UI whilst adhering to the John Lewis brand guidelines and UI Kit templates, making sure the layouts are fully responsive
  • Creating illustrations to graphically represent customer choices and show diagrammatically how to measure correctly
  • Working with UI developers to ensure my designs translate and give guidance on page transitions and animations 
  • Once developed, testing the pages on multiple devices and screen sizes to ensure functionality and quality is top quality

CONTEXTUAL HELP

Help sections appear contextually at the right point in their journey to assist customers with taking their measurements correctly. A video also sits with this content to further assist with taking measurements: https://youtu.be/hqY9ec7oF0k
jl-screensjl-screens
To view the live version of this project, visit John Lewis mobile site