Blogs · UX

Redesigning E-Commerce Purchase Journey with UX Research

Written by Ndaru Widikrama

Nowadays, E-commerce platform has become a main options for most of people to buy their product needs. Last year we had the opportunitiy to help ID Marco to redesign a e-commerce platform specifically created for government employee which called


As a government employee (PNS), they have the benefits to do groceries shopping with a factory product price through the regional cooperatives (KOPERASI). To facilitate them with online shopping experience, KORPRI launched as an e-commerce platform where government employee can purchase the products online. Now every governement employees can directly order products from the suppliers and will be delivered straight to their doorsteps. Last year, we had the opportunitiy to help ID Marco to redesign the Tok-Tok Platform to give the right e-commerce purchase journey experience for government employee.

Government Employee
Source: Tempo

Our Task

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 Design

In Indonesia, some of the e-commerce like Tokopedia, Bukalapak, and Shopee are became a “go-to” online shopping platform for many users because of the online shopping experience that they offers. Not only because of the quality of the product and their services, these e-commerce are succesfully delivered the right Design for the users. According to an article in UX Planet, there are four UX key aspects which will determine the user purchase journey experience in e-commerce:

  • Utility: Every product and services need to have a clear utility to help users choose and buy the things they need
  • Usability: Customer journey need to be clear and easy without unneccessary clicks
  • Accessibility: The design has to be created for different categories of user (high – low tech level literacy)
  • DesirabilityThe design should get the look and feel which make the experience more enjoyable so the user wish to get back again

To make sure we fulfilled all of the key aspects, our design team decided to redesign the purchase journey with these goals:

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

User Research

In the previous article, already write how important the User Research need to be conducted before our team decide to start the design process. Most of the times we thought we understand user needs and how they will use the design, but the actual scenario are likely will be much more like this:

Source: Springboard

To get the actual insight about our user needs, we conduct a user research to understand about government employee 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

Our 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

After we summarize our key findings from the research, we can learn who are our buyers and what kind of experience that they really need. Our design team starts to design the platform by putting their design output as an answer to the users needs and the business goals which we want to achieve with this platform.

Source: Slide Model

These are some of the pages which our team manage to redesign to improve their purchase:

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

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

1. 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

2. 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

3. 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

4. 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 Products

5. 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 Products

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

1. 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

2. 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.

Delivery Options

3. 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

4. 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 2 sections:

Payment Page

1. Payment Method

We give user options to accomplish the payment process with these methods:

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

Payment Method

2. 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:

ID Marco

  • Chief Strategy Officer – David Alexander
  • Product Manager – Rony Muhammad

Our Team

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

Interested in what we do?

Let’s have a talk, and see how together we can take your brand to the next level.

Contact us

Hi there!

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

Whatsappp Sharing