CLIENT: Peapod

PROBLEM: Needing a companion website to aid Peapod customers in finding easy recipes, learning better cooking techniques, and scheduling weekly meals.

MY ROLE: Research, User Testing, Sketching, and Prototyping

DISCOVERY & RESEARCH

Design Inspiration Analysis
In looking for my inspiration for the layout of this website, I looked to some of my favorite websites, like JCrew and Coach to be inspired by their simplicity.  I love that these sites are able to keep their layout clean and modern while still creating a compelling look.  What I wanted was to take Peapod’s clunky and somewhat dated interface into the modern age with more white space, fresher fonts, and an over-all cleaner look.

User Interviews
During my user interviews, I was lucky enough to find a group of my peers who all had issues with cooking at home.  They helped me find the main pain points of the typical busy person trying to cook their own food.  Being tired, not knowing what to cook, and maybe lacking cooking skills were all problems my users elaborated on.

The users also talked about how stressful it is to grocery shop and how long lines and crowded spaces can make non-online grocery shopping very painful.  This made it clear to me that there is a need for online shopping and we can maintain an active client-base by making their experience even better!

SKETCHING & IDEATION

User Stories and Journeys

After reading the user personas and conducting user interviews I was able to figure out a user story about a character that encompassed all of these personas.  This user, Katie, is sitting around one stressful night, wondering what she should make for dinner.  Katie has a fridge full of Peapod provisions but she’s unsure what to make of all her food.  She’s not much of a cook.  She loves to schedule her meals but doesn’t have a tool to do that.  There has to be an easier way to organize the recipes she already knows, schedule her meals for the week, and quickly learn new tips and tricks for cooking.

Rough Sketches

For my rough sketches I worked on simple wireframes.  I just wanted to block out where things would sit on the different pages.  Once I had framed everything out, I started thinking further about what would sit in each section.

NARROWING SCOPE & STRUCTURE

User Flows

For my user flow I wanted to imagine how Katie would enter Peapod Meals.  She would begin by looking for a recipe.  Knowing she has chicken she would narrow it down to “recipes by ingredient” and choosing chicken.  From there she would choose a recipe that looked interesting and be presented with reviews, prep and cook time, a video tutorial, and nutritional information.  She’s able to add the recipe to “my meals” and then place it on her weekly schedule which she can print off once she’s finished.

Sitemaps & Diagrams

The sitemap process was extremely helpful in figuring out how to lay out my navigation and what buttons to make the most prominent features.  After discovering the best layout of the whole website I then decided which user flow would show the most amount of features without overwhelming the presentation with too many steps.

Prototyping & Testing

Prototype
I laid out my prototype in Axure.  This was my first time using Axure and I was impressed with how easy it was to plan out the pages and link them to each.  It was an effortless process to make a working prototype to then take to the users.

Usability testing & results
After laying out my pages in Axure I was able to then start testing my prototype with user testing. I was able to pinpoint some functionality problems immediately after testing my prototype. When laying out new websites it’s important to use universality, making sure that buttons make sense and functions are where people expect them to be.  I had to make changes like placing the “account” button in the right hand corner where all my users kept looking for it.  I also had to make sure that when users added things to their cart that the number in my corner changed.  After making these changes the whole flow became easier for the user to understand.