How we improve the user shopping experience — A UX Case Study

8 min readMar 15, 2021

Overview

As a user during COVID-19, mostly people in Indonesia prefer shopping online rather than an offline store. Now, offline store improves sales through their own online platform. I and my friends as a team we tried to take the challenge redesign project and falls to KLIK Indomaret applications.

Klik Indomaret is a kind of groceries shopping offline that easily Indonesian to buy anything about food, drink, home & living, gadget & electronic, beauty & healthy and fresh fruits. The reason why easy for Indonesia people is actually spreading all around Indonesia from a small town or even village to the capital city.

Our team member Krishna as a Product Owner, Fegi as a Scrum Master, Taqi Makarim as a UI/UX Designer, Gita as a UI/UX Designer and my role is UX Researcher. However, we did the design process together to reach the goals and needs of the user. My role and scope are conducted usability testing by creating the UT Plan, user interview, mapping, help to build a high fidelity. Anyway, we met as a team at Binar Academy Online Bootcamp.

Disclaimer: I don’t work for Indomaret or have any affiliation with Indomaret at all. My team motivation in this case study is to boost our skills.

So, I will elaborate on what we’ve learned and about redesigning KLIK Indomaret.

Here is the spoiler of our works. (hehe)

Then, we applied a design sprint to kick off the project. To be honest why we decided to choose KLIK Indomaret because 2 of our team met bad experience when using the application. Finally, we went through one by one by ourselves first before we conducted user research. So then, we got pain points and it’s time to create solutions.

What stages can produce the following redesign?

Understanding the users by empathizing them.
Paper sketches using crazy eight for each member
Decide the best solutions.
Prototyping the design such as wireframing, define design system and crafting an interface also the interactions.
Validate to make sure the design is effective and usable for users.

Our playground in here using Whimsical.

As a team member and my role, a UX Researcher, I applied some step to finish my project.

What actually do in the beginning?

1. Observe

First thing first, what has to understand what the obstacles. There are 2 difficulties I and my team agreed. It called problem assumptions. First, our initial finding is confusing about add to cart (a product) because it can’t define at the first place. Second, baffling to choose and getting to know where the nearest Indomaret.

Ok then, I made some discussions with my team to conduct research.

Based on the discussion, we would use the user persona:

Male/Female 22–30 years old.
Get used to using online or groceries shopping (e.g happyfresh, gomart, sayurbox, tanihub etc.)
Living in the capital city.

To validate the problem assumptions, I created questions and task list to conducted a user interview of the original application of KLIK Indomaret.

After defined the task and UT plan, I and my friends conducted the research together one by one. We got 5 participants in testing the original apps.

I and my team did some usability tests with 3 tasks with the scenario.

The scenarios: user starving some food which are Indomie with egg. (Imagine that it was so yummy right mmm.. ops sorry)

Seeking the nearest Indomaret.
Choose or search the product meal category (indomie and egg).
Checkout and pay the bill.

2. Define

Then, based on the results of the usability test and interview. I’ve got many pain point and difficulties of the user. I used How Might We Mapping to describing each user.

Results of usability tests:

When the user found products, only available button “Beli” and they confuse how to set the number of a product. It turns out the amount per product visible on the cart and when user have a second thought , is a must to click “Perbaharui” first then change the amount.
User can’t find easily how to change location to get the nearest Indomaret. The user wants to know where Indomaret that they will order for food. There’s no information on the front page clearly.
A complicated category position. The category is shown in bottom navigation instead of the first page or menu. Behaviour users are searching through the category but not really clear stage to find items.

After my team understand and sure about the mapping. We believe that problems are valid. There’s 3 pain point that disturbing user when using KLIK Indomaret.

Pain points 1# Unclear stage when user buying something

as a user questioning themselves. “am I clicked the right one? what product?”

There’s no number of per product that succeeds to add to cart

Pain point 2# Difficult to find the nearest Indomaret by current location

In the first page are given a bit of information on the current location. Mostly user not aware of how to setup their location and they confuse to find Indomaret store near them.

The positioning of user location less representative where user find the Indomaret store when they want to pick up in-store.

Pain Points 3# Category of the product less intuitive

Some user was not aware of the category product. They think the category would be on the first page.
No function search on each category. User has to scroll down the screen until they get what they want which is tiring and unexpected.

3. Ideate

Ideation is a step that I and my friends as a team doing sketching based on what best solution for the issue. My teams agree that we benchmarking some application such as Gojek and Fore. Tampilin forenya dan gojek

We use crazy eight to explore our mind to find ideas and solutions related to pain points. Present and describing after 5 minutes until we understand and agree on what designs are the best solutions. Decide about the new flow for the redesign.

4. Prototyping

I and my team created a wireframe based on ideation we decide.

Here is the wireframe for the first issue (pain points 2#)

It means that user can choose first where Indomaret location based on the current location they're living.

In the second, show about the homepage that would be nice and definitely trying to cover the pain point 1# and 3# of the user add to cart experience.

We did discussion for finally agree on the following wireframe and after we debate we build user interface design using Figma.

When we creating the UI design, we realize that we will build a new flow for KLIK Indomaret. From starting the apps until the user done shopping. We actually create a new component for the redesign itself (icon, font, typeface, colour etc) leads by Taqi Makarim.

Here is the design that we proposed to solve the problem.

Try it!

5. Validation

Back on the problem we’ve found some solutions.

Solution 1#

pain point 2#: Shown location nearby at the first.

As a user directly informs about the Indomaret store that opens now based on the current location they live.
So, if they want to pick up in-store they can decide at that time. Actually, they also can estimate store location from their home.

Solution 2#

pain point 1# and in point 3#: Only one-page menu and show the amount on the cart with floating action button

In order to test and validate our ideas, again we conducted usability tests but it is for the proposed design. We conducted usability tests with 5 participants.

There are 2 tasks:

Change location based on what you are living now (based on the scenario).
Buy some indomie and egg.

Most of the user found it easier and happy to finish the journey. Comparing the original design they said is more efficient and fit to eye and finger.

The feedbacks:

“Udah enak sih soalnya aku udah tau berapa dalam satu produk aku akan beli dan juga udah keliatan total bakal aku bayar nanti ada berapa”
“Nah kalau gini kan enak, saya bisa tau lokasi indomaret yang deket sama saya ini sebenernya yang mana sih, soalnya kadang saya had a second thought gitu buat keluar padahal awalnya mager, ya sekalian pickup aja kan”
“Kayaknya perlu ada submenu di kategori deh, soalnya kalau search kadang juga lupa apa nama produknya, kalau scroll kelamaan ya gimana gitu, nggak ada habisnya nanti jadi saya ketagihan main klik indomaret daripada instagram, scroll mulu hehe”
“Tampilannya lumayan, jadi nggak bikin bingung juga pas diawal”
“Ya agak lumayan sesuai harapan ya pas saya nyobain yang pertama sama yang baru ini, cukup baik lah”

Before After Design

Conclusion

Groceries shopping is important for now during the pandemic. The final prototype inspires me to create better solutions again and again. We have also a lot to gain from the case study and it was a great learning experience. Overall, I think the proposed design still needs some research and iterations.

Thank you our mentor and facilitator, Banyu Rachman.