Designing Cart Based on Shopping Experience in the Supermarket

“Can we replicate daily life activity into a design process?”

All illustration created by @syahdanem

Let’s Start the Case Study

It might be bored if I start it directly on the design thinking process, doing homepage redesign and yadda-yadda-yadda, so let’s shift a bit into “storytelling”.

There are 2 terms that I will mention a lot which are

  • Reality Phase (How this works on shopping experience)
  • Design Phase (How this works on design process)

Imagine you’re going to a supermarket with your friends, yet you don’t how to get there and what to prepare

Before you’re going into the Supermarket, you might be asking yourself

  • “What groceries do we have to buy in the supermarket?”
  • “How do we got there?”
  • “How far it took to go there?”, etc

1. Simplify How to Address the Issues

Before buying and do the activities, ensure that you and your friends having the same main goal “I must go to the supermarket”, simply by discussing with your friends.

Ensure having the main goal is to “solve problems” and do a small chit-chat about it.

2. List “Everything” & Schedule Meeting

Then, try to jot down what you want to buy at a supermarket, normally you initially have to know “what do you want to buy at the supermarket?”.

Ensure we have the main goals is to solve problems, the context of the issues that you face, getting all related stakeholders thoughts about it.

3. Sort the List

The next step is to effectively spend the money by having shortlisted items that you want to buy based on price, or needs (needs vs wants) that listed on the shopping list.

At this stage, you are be assumed to discuss on a bigger scale the design specifications (what is the current idea, metrics, related data point, etc) by conduct meetings with other stakeholders (Marketing, Customer Experience, Development Team, Project Manager).

4. Adjust the Cart Size

When you arrive at the Supermarket, and you’re ready to take the cart. You are gonna think about the cart size. Adjusting the cart with the things that you gonna buy later.

We categorize and pick which problems we want to solve. Conduct research, and provide concise and clear information so the other stakeholders and you having the same ground understanding.

5. Adjust the Goods Position

We enter the analysis of how well the goods are arranged, whether the goods are on the top, middle, or bottom part of the cart. It’s time to determine what items you want to take first, now you can ask the shopkeeper where are the items you want to buy, so you have found the items everywhere.

You can compromise this, the bigger items are stored at the bottom of the cart, the little items are on the top of big items (top and middle).

In this stage, you are gonna have to arrange the information on the design interface (the structure, what kind of information, what does it looks like, etc).

The final draft must be shortlisted based on feasibility, desirability, and viability that are discussed together. (source). Here is an example of how to mapping and help you to define it

6. Challenges Come (Discounts & Promos)

While all the items are done in the cart, and you walk to the cashier. Still, there are tempting challenges that you must face, “discounts and promos”.

You usually at the stage you don’t need the items, but you're still tempted because of the usual standard of sloping prices on the product, that make you wanna buy the product.

This is the moment when sometimes other stakeholders send a couple of screenshots to your project group and then say “I think we have to follow this design?” In Indonesia terms, you can call this moment “Cantik Dikit Follow, Bagus Dikit Follow” moment.

But as a UX Designer, you have to keep mindful, listening to others' feedback, and discuss together which one is better. In my team, we call this moment a “design sparring or design challenge”. I have some suggestions if you meed this condition, and I hope you could implement these

To find the intersection between what you need and what the new idea has to offer. Use the “5 Why’s Method”. It is a method that will help you to find the root cause of feedbacks or problems.

7. Re-Check Everything

You’re arriving at the cashier and do a recheck again for all items that you pick into your cart.

To ensure it, do have some times to do Usability Testing or A/B Testing to test the idea of the designs and have metrics as a standard. For example, if the test results are already above 80%, the design is ready to develop by the development team.

8. Communicate Effectively (Handover)

Always communicate effectively to the other stakeholders

You already did the shopping, now it differentiates which items belong to you and which items belong to your friends.

Well here it can be assumed as a moment when passing your design to the development team to be executed starting from assets and others, but what you need to pay attention to is this process needs clear communication,

  1. Ensure the development team knows the details on flow.
  2. Ensure all the asset is on the exportable version, so we make their job easier, so they focus on doing the code.

9. Iteration Based on Data

You try the product in your daily life, and you will get the experience from the product that you buy before, like how good is the product, how effective the product, etc.

Always maintain to keep updated information about the design that is already deployed to the production application version. You could check from the parameters that you set from the beginning (heatmap, time spent on the pages, number of click, etc)


One of my way to learn about something is to share it with others. Glad can share this story with you. I am also still learning how to develop a better design process.



/ˈkræfts·mənˌʃɪp/ — Solving through design, UXD | | @uxdesignotes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store