Grocery Shopping List App — Wireframe Prototype

Wireframe prototyping has been the technique that I almost always use in an UCD process. It helps me conduct concise and yet effective usability test on the product, which focus mostly on interaction between users and the designed product itself.

In UX Prototyping class, I had the chance to work on designing and wire-framing an grocery shopping list app, that helps users document the items they need in stores. The purpose of creating the prototype, as usual, is to be able to evaluate the preliminary design with user testing.


The design problem is that people lose track of needed grocery shopping items or forget to bring the shopping lists in the store. Here, since the goal is to practicing wire-framing, I assume that the target user is college students. All the user research data are all assumptions based on my personal experience, and the design goal is to create a product that helps people keeping track of grocery shopping items while in store.

The solution here requires both a web and mobile component and concentrate on the interaction design. I implemented prototypes of the both components in wireframe format.

Design Process


Again, since I did not have the time and resource to conduct user research, all the user data are assumption based on my own experience. I analyzed the user requirements and created a simple persona to demonstrate user pain points and scenario.

User requirements

As a college student who cooks, I am familiar with the grocery shopping process and how frustrated it is when I realize that I forget to purchase paper towel when that is the thing I went to store for. I believe the primary requirement of the design product is that it should always be easily accessible, so that users can input items quickly and access the list easily in store.

Scenarios & Personas


The persona contains user’s goals, pain points, scenarios and desires. These are the data I needed to design.

Layout Template

I did not personally develop an overall layout for the visual elements on site pages, and templates for different sections of the site. However, I did have this material design Sketch file to help me organize all the icons and elements.

Material design icons and elements on Sketch

Interactive Wireframe

I implemented an interactive wireframe prototype on Marvel (link below), so that the functionality can be experienced or demonstrated.

Mobile version of the wireframing
Web version of the wireframing



Usability Evaluation

What about the prototype worked well

I tested the design with another two college students to evaluate the design idea and prototype. They provided me many great feedbacks that I can use to improve the product. I will adapt these feedbacks on the high fidelity interactive prototype as well.

Here are some positive reviews I received.

  1. The product is easy to use, and the navigation is pretty clear. The users reported that they think icons and navigations on the screen are easy to understand. Since there isn’t many extra features, it is not overwhelming.
  2. The UI design is very clean.

What needed improvement

I had buttons like “add item” or “add list”, and users find it a bit too much. They suggested that I change them into icon-like button, instead of text-based button.

Effectiveness of your design from the testing

All in all, the design is proven to be effective. Both users successfully created new list, named new list, add and delete items and marked purchased items as well.

I will continue develop this prototype into high fidelity interactive design as well.