Level 5 — Designing a Good Prototype

Team Ipsum
COGS 187A Summer 2016
4 min readAug 16, 2016

Authors — Gabriel Gaddi, Connie Du 8/15/16 10pm

Last Updated — August 17, 2016

Today in class, we discussed what makes a good design. For good design, we want to make the user “invisible” in order to allow our design speak for itself. In order to effectively accomplish this task, we began thinking of features we wanted for our application that could tackle the issues we found previously from our interviews. We began to create a connected web of features as well as begin our paper prototype. For now, we have decided to name our application BiteME in order to help us design.

Team Ipsum collaborating on how to tackle our user problems.
Team Ipsum working to get a list of features we want for our application BiteME.

List of Features for BiteME

Favorites

  • Save recipes for easy access
  • Suggest recipes based on user preferences

Profile Page

  • My recipes listed out (carousel?)
  • Point system and cook level
  • (Maybe) display a chart with the nutritional statistics of my weekly eating (pie chart)
  • Dietary restrictions, list of current tools/cookware
  • Edit preferences
  • Find a recipe (brings you to 20-questions page)

Questions on Account Setup

  1. What is your cooking skill? (Beginner, Intermediate, Expert)
  2. Do you have diet preferences/restrictions/allergies? (Vegan, gluten-free, no pork)
  3. What tools do you have to work with? (Pots, pans, stove, microwave)
  4. What are some of your favorite cuisines? (American, Indian, Mexican, Chinese, Thai, Japanese, Korean, Any/No preference, etc etc)

Questions for all users for recipe lookup (20 questions)

Explanation: So the goal of the 20 questions is to help the user find a recipe that they can and would like to make. There wouldn’t necessarily be 20 questions but for now just acting as a placeholder name.

  1. What course are you looking to make? (Entree, dessert, appetizer, snack)
  2. How many people are you cooking for?
  3. How much time do you have?
  4. Would you like to use leftovers in your recipes?

Optional Questions

  1. What type of cuisine are you craving right now? (pulled from favorites)
  2. Any particular taste? (Sweet, savory, salty, spicy, etc)

Existing User-specific questions

  1. Would you like to challenge yourself? (recipe with higher cooking levels)
  2. Are you looking for something new, or something you’ve made before?
  3. Shopping cart/list of ingredients you need/want to purchase and have delivered from a local grocery store

Recipe

  • Picture of recipe
  • Ingredients of what you need
  • Nutritional information
  • Plus button next to it
Jason working hard on the paper prototype.

We wanted to make sure we had multiple interpretations of our features by parallel prototyping. This way we wouldn’t be fixated on one specific design.

However, we didn’t want to be bogged down by so many different designs that we were unable to choose one and perfect it, especially due to our short time constraints. Our prototyping deliverables for Wednesday include two carefully crafted designs that we’d like to obtain feedback from.

This way, we are able to get diverse feedback on different designs of the same features, which we can later work with to refine our end product.

Prototype 1

Finished paper prototype wireframe by Jason

This is our first prototype, which we did on paper. This was a sort of rough draft to get our ideas out. We took the ideas of “pair programming” and had a couple people working on the same prototype at once so that we could have more diverse ideas, find bugs/problems more quickly so that we could minimize defects. Although it might’ve taken just a little bit longer than if we worked on them individually, it was more enjoyable and our quality of work was improved because we could proof our teammate’s work in real time.

Prototype 2

Interactive prototype wireframe by Sharmaine.

This is our second prototype, which we built into an interactive prototype online.

The link can be found here.

We will be using the interactive prototype for our user testing.

Along with our prototypes, as a group we decided that creating a memorable mascot would be a way to make our app more fun and memorable. Below are some of the mascot designs we came up with.

Mascot Designs

Connie’s mascot design. Ready to welcome you to BiteME.
Susmitha’s design of the mascot. Cute and ready to help you cook.
Isabelle’s animal mascot designs. What better way to learn how to cook food than for food to teach you.

Thanks for reading!

--

--