Designing a Microsite for John Lewis

GA UXDi Project 2

The Brief

I was tasked with creating a microsite for John Lewis that would allow users to gain inspiration when designing a room in their home, then easily purchase the items that match their ideas.

I would need to deliver the following to fulfil the brief:

Detailed Site Navigation Schemes
Competitive Analysis on Direct and Indirect Competitors
A Clickable Prototype of the Microsite
User Flows for the Key Areas of the Microsite
An Experience Map for the Primary Persona
A Detailed Site Map

Included in the brief were three personas that John Lewis had provided from their own research and my first task was to conduct research of my own to establish who would be the primary persona moving forward.

User Research

I put together a simple questionnaire about the process users go through offline to design a room in their home, and used the results to create an offline user flow.

This step informed the choices I would make when designing the site as I could see where there were possibilities to simplify the process for the user.

I was also able to use the results of my research to determine that the primary persona that would be used through the design process was Midori:

My Primary Persona based on User Research

The next step was to draw up an experience map for the process Midori goes through at the moment when trying to redesign a room in her home:

So I knew my primary persona, and I knew the process they went through currently and where the pain points in that process were. I also knew the sites she liked to use already, so I was able to conduct competitive analysis on the direct and indirect competitors.

Competitive Analysis

I started by looking at two direct competitors that offered home furnishings aimed at similar clientele — Habitat and Laura Ashley.

I also looked at sites that were indirect competitors in their offerings of inspiration without an attached store — Houzz.com and Pinterest.

I found that the layout of the E-commerce sites — Habitat and Homebase — was essentially the same and this extended to Houzz as well. So there would be limited scope for innovation when it came to the design of the layout of the microsite. However, when looking at the layout of Pinterest, the design is much more fluid.

Habitat (top left), and Laura Ashley (top right) look almost identical, Houzz (bottom left) is roughly the same, but Pinterest (bottom right) is very different

To try and understand why Pinterest works I sent out another questionnaire to users of the site. I found that the main reason Pinterest works is that it’s easy to gain inspiration from many different places at once, and there’s little to no pressure on the users to do anything with the items they like, it’s just accumulating ideas. My goal was to balance the two offerings against each other in the microsite.

Initial Sketches and Design Studio

So I started by sketching ideas for a homepage that would offer the same no pressure idea gathering, but access to the standard navigation of the e-commerce sites that is expected.

Striking the balance between the easy access idea gathering (left and centre) and the more traditional layout of an e-commerce site (right)

With these ideas in mind I took part in the first Design Studio on our course. Three colleagues and I had the same brief and we joined together as part of the same Design Studio following this structure:

Two minutes to discuss and decide the problem we wanted to tackle
Five minutes to individually sketch six solutions to the problem
Two minutes each to present our ideas
Two minutes to discuss
Five minutes to refine our favourite ideas
Two minutes to present once more
Five minutes to collaborate on a final solution

This was the highlight of the project for me.

The sharing of ideas in short sharp burst was incredibly useful and thoroughly enjoyable. It was an excellent way of working because it brought together different ideas all sprung from different methodologies but attacking the same problem. Then being able to pick the best parts of each idea and work together on creating a hybrid solution meant we very quickly discovered what worked well and could discard any part that was redundant.

Many hands making light work in the Design Studio

Information Architecture — Card Sorting & Site Maps

The next step was putting what we had learnt about Information Architecture into practice and using a card sorting exercise to decide how our one-hundred items should be organised throughout the site.

I first wrote out each item onto a card, then asked our volunteer to sort them into categories that made sense to them. After three volunteers had completed this sort — an open sort as it’s known — I took the common categories as section titles and asked the next volunteers to try and sort the cards into those categories — this is known as a closed sort. From there I had my room categories for the microsite which was crucial when putting a site map together.

I used Omnigraffle to put together my site map after first using my trusty Sharpie and A3 paper. Laying out the landscape of the site from the homepage down through the options a customer could choose from.

I continued using Omnigraffle to present the User Flows and create the wireframes I was to use for my prototype.

Omnigraffle Wireframes

Having already tested paper wireframes I was able to iterate before going digital. When I was happy with the testing, I used Omnigraffle to digitise the sketched wireframes.

I was then able to upload the files created with Omnigraffle into Invision and create a clickable prototype in much the same way as I used Marvel for my previous project. Then it was back to testing.

Create -> Test -> Iterate -> Repeat

Above you can see the original homepage on the left and in the centre, with the recommended ideas on the right. Below are the wireframes for the home page idea selection process, and recommended ideas for my proposed solution.

Home Page process (left and centre), Ideas (right)

The process of iteration was as follows:

Test Wireframes
Sketch solutions to problems found in testing
Test paper solutions
Iterate
Digitise
Test new Wireframes
Repeat

Initially I tried to make changes digitally first. This was a huge mistake as it took a lot longer and inevitably ended up with future solutions being more concerned with the style than the functionality.

Prototype — Invision

Once happy with the testing process I put my proposed solution into Invision and you can find that here.

Or, you can see a selection of the screens below:

Product Detail (left), Log In Prompt (centre), and Account Home (right)

Saved Lists (left), Saved List Detail (centre), and Order Tracking (right)

Presentation

All that was left was to present my microsite to our cohort as though they were stakeholders in John Lewis. I needed to tell the story of how the life of user Midori would be made simpler, better, and more enjoyable with the introduction of the site — ‘John Lewis Ideas’. It was a 10-minute presentation at the end of a 2–week sprint and a great way to showcase the work I had done to address a users problem and come up with a proposed solution.

Introduction (left), Primary Persona (centre), Idea of what the site might do (right)

Key Learnings

Omnigraffle
Invision
Information Architecture
Card Sorting
Design Studio
Experience Mapping
Prototyping with Keynote

On to Project 3!

Follow my progress on Medium, or follow my musings on Twitter @jonwhiteux