A7 — Wireframe Prototype: Grocery Shopping App
You will design an application that has both a web and mobile component and develop interactive wireframe mockups of each. (In the next assignment, you will build on this design, revise it, and expand it to higher fidelity functionality.)
For the design, you may choose from one of the following three application areas. In all cases, you may assume that your target user is a college student, and that your design goal is to create a system that makes the experience more fun, more meaningful, more efficient, or any combination of these goals.
- Grocery shopping: keeping track of grocery shopping lists and the using them while in the store, bypassing the store for online/delivery, etc.
- Analysis: To start, I created a survey and send out to college students to learn about their current grocery shopping behaviors and arrived at the following findings:
- 70% of surveyed participants relies solely on memory when grocery shop
- The other 30% utilizes Apple Notes and Google Keep as their shopping list
- Participants don’t feel the need to have any special features when grocery shop (keep track of discounts, keep track of cost, recipe suggestion)
2. Content Inventory: From the findings, I aim to create a more focused version of Google Keep, specifically for grocery shopping.
3. Information architecture
From there I sketched out the information architecture and the layout template, and used them to sketch a wireframe and use the sketch to create an interactive wireframe on Axure.
I tested my prototype with 2 participants and gathered the following feedback:
- The interaction seems rather straightforward and easy to follow. However there were rooms for improvements such as adding more functionality. One participant suggested adding a functionality to keep track of spending because he always buys things he doesn’t plan on when grocery shop.
I had a lot of fun in this sprint as I was able to reimagine how to better design for a common task.