Published on | Prototyping: From UX to Front End — Medium Kate Huentelman

Objectives

To help people find the stores that have the items they are shopping for.

Challenges

Gregg wants to cook fresh food daily, often having to go to many stores to find what he needs. We’re talking speciality items — chicken wings, weird veggies, Israeli wines etc. He is willing to walk to a second, even third, store to get what he is looking for.

When living in London, one has within their vicinity multiple grocery options, often small shops not supplying that bone-in ribeye or oyster sauce. We have to hop around.

Research & Context

Gregg likes to go to grocery store usually on the weekends in the evenings, as it is likely when preparing for a group that he wants speciality items. Having said that, during user interviews, he revealed he shopped around at many stores during the work week as well.

Gregg doesn’t mind walking from one store to the next, but it’s more the disappointment when he gets to the first store expecting to find an item (i.e. chicken wings) and they are not there.

Design Process

User flow: The goal of the app is to find where to buy your food. With the method os user flow, I was able to break down the simple steps the user needed to use to get to the end goal. My initial sketches (see ROUGH SKETCH 1) included too many features and paths. The user flow simplified my process into 5 simple steps. This lead me through most of my design sketches (see ROUGH SKECTH 3) for when my sketches started to reflect the user flow.

Storyboard: The story board method helped me tell the story of my app when it came time to present. The story goes is four steps:

Situation: Gregg lives in Wimbledon and likes to cook fresh daily.

Problem: Gregg often can’t find what he is looking for in the grocery.

Solution: Gregg will use an app to locate what stores have what he is looking for.

Outcome: Gregg can go to less stores and cook and eat fresh more often.

Sketches: The sketching process helped me define my solution the most. Through each sketch, I was able to pull insights, paths that worked, and delete items that didn’t help the end goal. The sketch below was my first sketch, and included too many features and paths.

By my 4th sketch I was getting to a simpler process and seeing how screens could directly correlate with my user flow.

Design Solutions

My design soultion was rooted in simplicity. I wanted to make it as easy as possible to see what stores had what items Gregg was looking for. The 4th screen (see image below) is the most important screen in the design solution. This screen shows all the stores that have the items he is looking for, and let’s him know with a numerical value how many items they have (i.e. 3/4 or 4/4 items) 4 out of 4 items being the happy case scenario in this case study.

Thus, Results

Hopefully Gregg will be able to quickly find what stores have what he is looking for. And hopefully the app will inspire him to cook fresh more often.

There are many design solutions I want to add to the app in the future. The simpliest being more user ability on the 4th screen (where you see the stores) as that is the most important slide.

Thank you for your time!

What ya cookin’ was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

What ya cookin’

Cool stuff, every week

More Articles