My task here was to create a paper prototype of a shopping app, based off of the following given scenario:
Imagine that you are grocery shopping at a supermarket in preparation for a party you promised to cook something special for. After looking up the recipes you are going to prepare, you created a grocery list with items you have never bought before, requiring you to find those items in aisles you have never visited before. For instance, do you know where you can find capers? Canned grape leaves? White truffle oil? Wild rice? You find yourself wandering through the aisles, back and forth, for these unique ingredients listed on your grocery list.
Now, imagine an app that sits on your smartphone and that not only gives you a map of the grocery store, telling you the aisle of the items you are looking for, but also provides you with an optimized shopping path. All of a sudden you remember that you are out of ketchup, so you can deviate from your route, get the item, and then “recalculate” a new shopping path to complete your grocery list.
I started by creating a persona of someone who may use the app, and is representative of certain shopping habits. My persona is Marie, a college junior. She shops at the supermarket every other week, and is relatively familiar with the store’s layout and location of items. However, she generally gets the same food: peanut butter and jelly, snacks, pasta, frozen vegetables, cereal, and drinks. Sometimes she tries out new recipes for special Friday dinners with her friends, meaning that she needs to buy ingredients that she normally doesn’t buy. She generally makes a shopping list before she leaves her apartment. She is very busy in activities and academics, and wants to shop as quickly as possible. While shopping, she tries to get hot prepared foods and cod foods last, so they stay warm or cold until she gets back home.
In my INFO 3450 course, my group designed a shopping app, so the basis of my user is partly based off of interviews and survey data I remember from that project. I chose a college student as my user because most college students buy a relatively small set of items at supermarkets on a regular basis, and may be more likely to not know where items are located.
The app, drawn below for iPhone, has three main sections – a list, which allows users to input their items before shopping; a store selection overlaid on a map; and an in-store map with optimized route. Images of the prototype are shown below.
This is an overview of the app. Each screen is detailed below.
One screen allows users to enter items onto their shopping list, as well as check off items as they buy them. Note that the appearance of the menu (the 3 dots) is not finalized.
Using a standard map interface, users can find nearby stores by entering an address or using their location. Charts display how much of the users’ list is available at a store, and users can select a store to shop in.
The In store map shows the user’s location, a route through the store, and highlights sections of aisles where items are located. The top bar allows users to search for items in a store, refresh/recalculate the route, reorient the map, or find their current location.
Users can tap items to find out more about them if they don’t know what it is, see other users’ photos, and add their own photos of the item.
Tapping on highlighted aisles allows users to see what items are located in that aisle.
Users can check off items directly from the map, without returning to the list screen.
Users can search for an item in store. The app shows the item’s location and allows users to add it to their list.
A pull-out menu allows users to click “Done Shopping” (to clear the list), or click on settings.
Route settings include options on how to optimize the route, such as getting cold foods last.
For filtering dimensions of the prototype, I thought appearance and rough spatial structure were important to show, though not at a fine-detailed level. I used a little bit of text to hint at functionality, but did not use enough to give a lot of data. It was manifested through paper sketches, has low resolution (fidelity), with a medium scope. I drew the major screens and interactions, but did not draw every possible screen, menu, and popup in the app. The point of my sketched prototype was to get a high-level feel for what the app might look and do and not get bogged down in details.
My own scenario for the app: At the supermarket, Paul is looking for capers for a chicken recipe he wants to make for his girlfriend, though he has never seen capers before and doesn’t know where they are. On the app, he pulls up the in-store map, seeing his location, a route through the store, and highlighted sections of aisles where the items on his shopping list are located, which he inputted at home. He clicks on the first highlighted aisle, and the app shows that capers and paprika are located in that aisle. He goes to the aisle, but isn’t sure what capers look like. He clicks on the app for more information, and sees other users’ images of capers. Paul sees a similar object, and finds a different brand of capers – but it works for him. Before putting it in his cart, he takes a photo of it and uploads it to the app for other shoppers to see, and then continues along the shopping route shown on the in-store map.
The prototype lacks finer details like colors, data, and minor pages and features though I felt these were not as important at this stage. Importantly, interactivity is missing. Perhaps using prototyping software like Axure would allow me to better show interactive elements, and populate the prototype with data.
