How We Create The Right Purchase Journey Experience for Government Employee E-Commerce: TokTok UX Case Study

WRITTEN BY Ndaru Widikrama


As a government employee, one of the benefits that impact on their daily basis are the previlege in buying groceries and other needs which can be obtained from regional cooperatives with a factory price. With this benefit, they often did their groceries shopping in regional cooperatives rather than the supermarket. To make it more benefecial, the goverment wanted to provide them with a more convenient way in their shopping process by using Tok-Tok platform. Tok-Tok is an e-commerce platform which provide variety of products (grocery, uniforms, electronics) from different suppliers. It only allows several suppliers to sell their products exclusively for government employees with a cheaper price. In October 2018, we had the opportunity to help ID Marco to redesign the Tok-Tok Platform to give the right e-commerce experience for government employee.

Government Employee
Image source: Tempo


Conduct a UX & UI research and development to learn about government employee online shopping behaviour and design a purchase journey experience based on our findings.

Purchase Journey

According to McKinsey,  the ways most consumers makes purchasing decisions nowadays are defined with a process called the consumer decision journey. It is a 4 phase process which start with 1st phase when the consumers start to get to know about the product (exposure), 2nd phase they continue to comparing the same product with another brand to decide which one is better and which brand they need to buy, 3rd phase they start to decide which product they want to buy and proceed the purchasing journey, finally they finish the process with 4th phase (post-purchase experience) it happens when they start to build expectations after they finish the purchase process as a consideration whether they going to repurchase the product or not.

Consumer Decision Journey
Image source: McKinsey

In our case, we need to make sure that our users (consumers) choose TokTok as their trusted e-commerce shopping platform and having a great shopping experience with the purchase journey that TokTok offers, so they want to consider to repurchase their product needs in the near future. To make it happen, our design team decided to redesign the purchase journey with these goals:

  • To ensure our user are having a clear and simple process when they purchasing
  • To make sure our user have a great purchase experience to consider re-purchase in TokTok platform

User Research

Since we have a very specific target market (government employee), the first thing that we do is we conduct this research to understand their online shopping behaviour and learn their thoughts about User Experience on e-commerce websites. This research is conducted with Qualitative approach by doing in-depth user interview with list of questions. Some of the questions which asked during the interview are:

  • What kind of product you’re usually buy during online shopping?
  • How often did you do online shopping?
  • Which e-commerce do you prefer to do online shopping? and why?
  • What do you think about online sales and delivery vouchers?
  • What is the most important features on e-commerce websites?

User Research

Key Findings

We map our findings from the user interview based on type of buyer, how they buy their products, what products they mostly buy and what features they think are very important on e-commerce platforms:

Key Findings

By conducting qualitative interview with government employee, these are the things which we can learn from the research:

  • Most of the buyer’s profile are woman with kids (25-30 years old) whose usually buy products with a long-expired date using their shopping list.
  • Trusted seller, Product credibility and delivery options are the three most important things for users when they do online shopping.
  • Product stocks, reviews, and promotions should be seen in product information page
  • Product discount are more preferable rather than delivery discount voucher
  • Delivery services (Express and Normal) informations are important regarding delivery cost differences

Design Output

To achieve these goals, our team decided to redesign every pages which used by users in purchasing journey. Based on the insights which we acquire in the user research, these are some of the pages we manage to redesign:

  1. Product page
  2. Checkout page
  3. Payment page

Now, let’s take a look on some interesting design that our team create throughout these pages.

Product Page

We want to make sure that the users are well intrigued and educated with the product by providing them with the product images and full informations about the product. Hopefully our users are always “good to go” when they decide to put the product in the shopping cart. We divided the informations about the product in 5 sections:

Product Page

Product Description

Product description section contain the informations about Product Availability, Promo, and Differences between the normal and discount price (if there’s any).

Product Description

Product Review

Product review sections contain purchase review from another user purchase experience. One product may contain a vary review from user in terms of the quality or the delivery time, this can happen because the product can be sent by different suppliers depends on the product stock and availability.

Product Review Section

Promo Information

Asides from product promotion, user can see what voucher promo is available while they purchasing. The informations which shows in this sections contains minimum purchase requirement, voucher amount, and the voucher code which user can apply in the checkout page.

Promo Information

Related Products

Related product will be shown in the page based on other user shopping list routine. Our aim is simply to give our users other product options which can bring to cross selling impact for the suppliers. For example, if you open a white sugar product, the related product most likely will contain other groceries product such as cooking oil, salt, and butter because most of the times people put these product in the same shopping cart to complete their monthly shopping list.

Related Product

Supplier Products

Instead of buying product from different suppliers, most of the user will find it easier to purchase different product from the same supplier because of the fixed delivery price. Buying products from different suppliers will give additional delivery price to users because they will charged with two delivery price instead of one.

Supplier Product

Checkout Page

The checkout page contains all of the informations about the shopping cart, some of the informations such as total purchase, suppliers, and delivery options are divided in 4 sections:

Checkout Page

Shopping Cart Details

This sections shows every product price which includes in the cart with the suppliers name who will deliver the product.

Shopping Cart Details

Delivery Options

User can choose their delivery methods by their own, there are two delivery options which available at this time which are Premium (suppliers courier) and Regular (general courier). The premium delivery methods can ship the product to their address in 2 to 3 days while the regular delivery methods can be shipped in 3 to 5 days after the purchase.


Promo Code

Every promo code can be applied by inserting the code in the checkout page. There are three types of voucher which can be applied in every purchase which are Offline Voucher, Product Voucher, and Delivery Voucher.

Promo Code

User Address

Since the user can insert multiple address, they can choose which address they want to use whenever they purchase their product. The selected user address information which will be used as a shipment address by the suppliers.

User Address

Payment Page

After the user finished checking their products and choose the delivery options, they will proceed to the payment page. In this page, user have the options to pay the products with regular payment (cash) or TokTok point which they can acquire everytime they finished their purchase. We also give users clear amount if they purchasing from different suppliers, these informations are divided in 4 sections:

Payment Page

Payment Method

If the user didn’t have any TokTok points, they can also pay with regular payment with these methods:

  • Bank Transfer
  • Online debit/credit
  • Virtual Account Payment
  • Internet Banking
Payment Method

Grand Total

At the end of the journey, it is very important to give our users clarity about the total amount they will pay from every product they want to buy, promo they applied in the shopping cart, and how many deliveries will it takes to delivery every product. To summarize all of the informations, we divide total amount from every suppliers who provide the product.

Grand Total


By offering these new purchase journey based on our research findings, we hope TokTok will give user a simple and transparant process while giving them a great shopping experience.


After we finished the project, these are the couple things which we can learn to develop future UX & UI Design project which heavily relies on Research:

Prepare The Extra Timeline

Since the project is heavily rely on research, make sure there’s extra timeline if there’s any adjustment on the research schedule. Reschedule already happens twice while we want to conduct a research. The impact cause a major pushback to the project timeline.

Specify The Target Market

Research final result is heavily depend on the Target Market. Make sure the target market is determined and valid with the research objective. When we conduct the first initial research, Our first respondant didn’t give us any inisghts. This happen because we have a less specific target market.

Prove Every Assumptions 

During the research, we didn’t expect our respondant find TokTok is not appealing for them in the first place. After that we realize that every assumptions during the research should be ask and proven. Even the smallest one.

Let The Data Do It’s Magic

When presenting the research data, it’s better to let the data speak for itself. Over explaining or hiding the data can cause a major thinking-shift. After presenting the data, we prefer to not overthink for certain things which we don’t have to.


We successfully designed 201 screen (desktop & mobile) in 8 months development time. This project became one of our highlighted project in 2018, ID Marco is always open for our recommendations based on the research makes learned a lot to get the right design insight and execute it to fulfill the user needs.

Thanks to our team:

  • Yasmin Adalia as Account Executive
  • Adinda Khairani as Digital Strategist & Researcher
  • Jonathan Prafa as Project Manager
  • Frangky Melky as Sr. UX & UI Designer
  • Anthony Atmadja as UX & UI Designer



Quick question, do you know the difference beetwen UX and UI?

Whatsappp Sharing


Mail us at [email protected] or drop us your info and let us reach out to you.

Jl. Senayan No. 67
Blok S, Kebayoran Baru, Jakarta Selatan 12180, Indonesia
+62 21 739 6426
Get directions