Waitrose Plan & Manage Prototype

Case Study

From my brief I was asked to create a microsite that would help people plan and manage their meal ingredient purshases more efficiently so users only buy the food they need. With the brief I was given three personas, from these 3 I chose Jackie’s as she hates wasting food and eats dinner 4 or more times a week so a plan & manage website would be very benifical to her.

Approach

I gave myself two weeks to build a microsite and test it on different participants, making 2 versions of the site. I created a competive analysis diagram, which shows the attributes of the site taken from looking at the most relevant competitors, conducting interviews and going to Waitrose supermarket.

A Competative Analysis Diagram that I created.

From this research and Jackie’s persona I was able to work on user flows, which is the path a user follows through a website interface to complete a task. I chose to focus on reordering previously selected meals as Jackie eats dinner at home alot.

A User Flow Diagram illustrating ways a user completes a task with asking questions.

I started to sketch ideas on paper about what the design of the website will look like, taking inspiration from my competitors and keeping the same feel as Waitrose website.

Low fidelity Sketches

A clickable prototype was built with Jackie’s needs in OmniGraffle and then exported as a PDF and put into Invision’s online clickable wireframe software to beable to test the prototype on different participants.

The homepage of the first version of my microsite on InVision, used for user testing.
First Version on the profile navigation.

After the first round showing how the user reordered a previously selected meal I found they didn’t know the difference between order and plan in the profile navigation so I changed this to Orders & Plans, Saved Meals, Saved Plans, Order History and added an add order to trolley button.

The order history page for the second version of my microsite on InVision.

Result

The navigation was more straightforward when I tested the microsite after I made the changes but some users found with order history, saved meals could be meals I’ve ordered before essentially. Going forward I’d look into how I’d separate order history from saved meals and plans to make it less confusing for the user.

Methods: Sketches, Site Map, User Flow, Competitive Analysis Diagram, Card Sorting, Task Flow, Experience Map, Navigation Schema

Tools: Pen and paper, Omnigraffle, Invision