Grocery shopping for your loved ones is the most joyful experience!
— said no one ever


Back when I still live with my parents, I often find myself sunk in frustration when grocery shopping for my mom and bringing home the wrong items or the right items with the wrong brand. My dad also encounters the same problem but the consequence he gets when bringing home the wrong item is much less heavy compared to mine. Fast forward to today, I and my boyfriend have the same problem in grocery shopping but the difference is now I’m on the other side of the fence. 

It makes me wonder if others are having the same problem and what can be done. What you will see below is my application of the Design Thinking methodology and my work through the entire process from user research, ideation, flow diagram, site map, usability test, low to high fidelity prototype through to visual design.   

  • Product name: Mark It

  • Product type: shopping list

  • UX & UI designer: Thu Doan

The Problem

Nowadays cars can drive themselves and robots can deliver food to your desk. Despite all those advanced technologies in medical and science, people still can’t seem to get the right items when being sent to grocery shopping by their moms and spouses. You know what I’m talking about, that “simple” grocery shopping list text message you receive right before leaving work. Every day, there are countless poor souls who are sent to grocery shopping and come back with the wrong items. It’s not our fault that there’re 50 different brands for that “black package spicy ramen,” and we just happen to choose the one that isn’t right. We don’t deserve those looks that full of sighs and disappointment when we bring the grocery home.  

Even when we decide to be that good human to go home with the perfect right items sometimes, we find ourselves spending all that time circling the same area in the grocery store looking for this specific item. Because we don’t want to bother the store assistant for the 6th time to ask about the location of your listed item; that is if we’re lucky enough to see a store assistant whenever we want to ask. Of course, the items we need to buy will never be placed at our eye level, it’s either up on the top of the mountain or at the bottom of the river shelf. Moreover, we will either have to FaceTime our spouse or constant messaging product photos to confirm you get the right item. In the end, your quick 10-minute in-and-out grocery shopping turns into 40 minutes going through hell trip. 


Improve the shopping experience for those who are sent to grocery shopping (against their will) by you-know-who. 

Help the user to acquire the right items without spending too much time in the store.

Phase 1 - Empathize


Competitive Analysis

Analyzing other competitive application helps us to identify the opportunity and threat in the current market. Analyzing the pros and cons of another popular app also helps us in discovering and understanding what already exists in the market and avoiding reinventing the wheel.  

As for competitors, we focus to analyze the top three shopping list apps in the market which are Grocery Pal, Out of Milk, and AnyList. Besides the direct competitors, we also study another two indirect competitors, Target and Walmart Grocery apps from which we can learn from their success in e-commerce practice.

Through the competitive analysis, we find interesting marks that might help Mark It stands out from others. 

1. Less is more: Shoppers like vast options of choices. More choices lead to more decision making. But when so many choices are suggested and offer, options get abundant. Shoppers are overwhelmed in comparison, cognition, and making choices. Successful apps in the market allow shoppers to get what they want in the most effective way with the least hassle. 

2. A picture is worth a thousand words: Online shopping products are normally shown with a product photo and a short description. This simple shopping layout has been widely applied successfully in different platforms all over the world. When properly and efficiently used, visuals play an important role in enhancing communication and shopping experience.  

3. Pathfinder (literally): Nowadays, map and direction apps are already indispensable in normal daily life. Shoppers demand for an in-store way-finding experience without the store staff’s assistance is on the rise. Item location and store map features are popular among store shopping apps. Comprehensible and effective in-store direction not only majorly improve shopping experience but also generate more profit for the store.  

Phase 2 - Define


User Research and Survey

In order to have a better understanding of our shoppers, we use Lean Survey Canvas to generate interview and the online survey. We define what we need to learn, who we need to ask, what we already know, and how to reach our shoppers. The interviews and surveys are conducted on shoppers who are working millenniums and middle-aged people in all genders. Moreover, we typically include people who have experiences and struggles in shopping for others. We collect data on people who go shopping for others and also the people who ask others to go shopping for them. We focus on the shoppers' process thought and their major pain points when grocery shopping in-store. According to our research, 73% of users are interested in a useful method, rather than a simple store map, to help them navigate around the store and locate the items they want to buy efficiently and quickly; 86% of users are frustrated when they can’t find the product they need; 38% of users don’t want to go over their budget and fall into the store shopping encouragement traps.   

Affinity Diagram


Using the affinity diagram, we generate user pain points and design opportunities from user research data.

Paint Points:

  • Struggling to navigate in store and locate specific items.

  • Inability to find specific items in the store.

  • Spending more time shopping than expected.

  • Miscommunication in identifying items when shopping for others. 

  • Going over the budget without knowing. 

  • Carrying and keeping track of too many store card and coupons.

Design Opportunities:

  • Integrating item location and enhancing in-store direction experience.

  • Informing item’s availability and in-store status.

  • Improve communication when shopping for others with photo feature to clarify grocery item.

  • Price summary reminder for financial consciousness.

  • All in one place store card and gift cards, e.g. apple wallet.

Problem Statement

Shoppers who often go grocery shopping for others need a way to clarify as much as possible with specific items they have to get so they don’t have to face confusion in identifying the item and frustration when getting the wrong item. Both the special target shoppers as well other general grocery shoppers want the ability to be self-directed to the items they need because no one wants to keep looking for store assistants to ask for item locations. Shoppers also want to be informed about item availability in-store because it’s a waste of time and frustrating to check product availability by calling the store. 

Hypothesis Statement

We believe that by building a grocery shopping list platform that can integrate the features of item’s photo, self-guided direction to the item location, and in-store item’s availability will largely improve the shoppers’ experience in getting the specific item they want in the least hassle manner. We will know this to be true when the use of photo and direction features in the app increase. We will also know by a quick pop up of one to two question survey after shoppers have used the app 3 times to confirm if the app positively enhances the shopper experience.  


Phase 3 - Ideate 

Feature Priority


Site Map


User Flow

Three user flows show the path that our users with different goals would take from creating a shopping list, adding and editing the list item to following the direction to in-store item location and checking out with the saved loyalty card in the app. The final user flow highlighted MVP features such as adding the item by taking photos, showing the direction to the item location, and invite other users to the list.

Phase 4 - Prototype



wireframe3 copy.png

High Fidelity Prototype


Design Elements


Visual Design



Mark It prototype