GOLIST Wireframes

I created a mobile and web app to help people grocery shop. For the first step in the creation process, I brainstormed user requirements and scenarios where people would need to use the app. Here are some of the user requirements I defined:

· People need to remember what groceries to buy at the store
· People need to remember when they need to add something to a grocery list, e.g., they need to add oil to their list right when they notice it is empty
· Quickly add or remove items
· Search from a list of foods
· Separate food from other grocery needs (toiletries)
· Remember what is stocked in the fridge and what isn’t there

After I wrote out a usage scenario to help define additional user requirements and features: Dave looks in his fridge and does not have eggs to eat for that morning. He decides to go grocery shopping. He opens his grocery app. He searches for eggs, and eggs adds to the list. He looks around his fridge and sees that he’s missing milk, cheese, an onion. He adds those to the list. At the store, he opens his phone and looks at his app. He sees he needs milk first. After he puts a gallon of milk in his cart, he taps “milk” to cross it off the list.

From there, I created an inventory of content the app would need:

· List feature: breakdown by type of food for grocery store shopping
· Recipe feature: add recipe to list, which automatically adds ingredients
· Check off item
· Add new item
· Remember items from last list
· Save past list
· Remove selected items from list
· See photo of item

Once I had the features mapped out, I sketched some ideas for the design of the web and mobile app.

Mobile sketches
Web sketches

With these created, I drew a sitemap and outlined page interactions.

Once I had the basic idea of what my site would look like, I started building the site on proto.io.

The wireframes are a little higher in fidelity than most. Instead of putting a blank grey box to outline the list and nav features, I used the preset iOS elements on proto.io. This made it easy to layout the page with more than just boxes.

Wireframes in order: Home, Saved, Recipes 1, Recipes 2

I created a simple design because the app is supposed to replace a grocery list, which is really simple already. Earlier in the design process, I downloaded some popular grocery apps, and most of those over complicated the grocery shopping process. I imagined a simple list for quick functionality. The app consists of three main nav pages: home (current list), saved, and recipes. The homepage is current list so people can quickly add and remove items while they shop. If they want to save that list, they can from the home page. If they want to open a saved list, they can view it under the saved tab. The recipe search is the one unique feature of the app: People can search for a recipe (like pasta), and the app will return recipes. When a user clicks a recipe, all of the ingredients will be added to their current list. This could be useful to someone who is already at the grocery store and wants to pick up some ingredients for dinner that night.

After I created the mobile wirefreames, I created some web app wirefreames. I put more pictures in the web app than the mobile since the web had too much space to only list text. The homepage displays a photo grid of suggested foods to add to the list on the left. The user can switch the view to a list view, sorted by food type. The recipe page (not shown here) has the same suggested functionality. In both screens, users can search for a specific recipe or item.

The saved lists and recipe-ingredients page are shown below.

You can view the semi-interactive prototypes for both the mobile and web app.

Analysis: I had my roommates (a few are informatics students, with slightly different opinions than HCDE students) test the mobile and web apps. To test the mobile app, I downloaded the proto.io app to load my prototype.

People liked the simplicity of the mobile app. They liked how the homepage was the list, since most people do not want more than a simple list to use. They did not like the clunkyness of the dropdown menu (I deleted the page before I took a screenshot) for removing and adding items from a list. They thought a sideswipe option would be the best. They also thought the add items to list and recipes button was ugly and didn’t fit well.

People liked the layout of the website hompage since it would look pretty with pictures. They liked how the current list was immediately available. One thing they didn’t like was how big the top bar was. They said the icons and title tet were too big. They also said the broken-down layout of the grocery list was ugly. Another good piece of feedback I received was that web grocery list should show additional information left out of the mobile app. For example, someone suggested adding ingredient quantities and an option to view detailed information about a food item.

Show your support

Clapping shows how much you appreciated Alex Pease’s story.