Tokopedia | B2B | Hana Clarinda

↖ Back to projects

Building B2B e-Procurement Marketplace for Tokopedia

ROLE

Designer, Researcher

TIMELINE

9 months

TOOLS

Figma, Miro, Surveymonkey

IMPACT

We successfully opened a new revenue segment market for Tokopedia. The platform was rolled out internally at first, which reduced procurement cycle by 30% on average, lowering invoice disputes and delivery mismatches.

PROJECT CONTEXT

BACKGROUND

Traditional procurement processes, especially in Indonesia, are often plagued by inefficiencies such as poor online discoverability of suppliers, limited visibility into product offerings, manual quotation processes, and slow turnaround times. This results in increased operational overhead and suboptimal purchasing decisions for businesses.

Tokopedia, a leading C2C (consumer-to-consumer) marketplace in Indonesia, is now leveraging its robust digital infrastructure and marketplace expertise to enter the B2B (business-to-business) segment. The goal is to digitize and modernize procurement for Indonesian enterprises by launching a dedicated B2B marketplace platform.

PROBLEM STATEMENT

Despite the growing digital transformation across industries, B2B procurement in Indonesia remains largely fragmented and manual. Businesses struggle to:

Discover and verify trusted suppliers efficiently
Conduct transparent price comparisons due to siloed systems
Complete procurement processes quickly and reliably
Maintain a centralized, digital record of transactions

GOALS

Build a scalable B2B marketplace platform tailored to the needs of Indonesian businesses
Digitize the full procurement process, from quotation to payment, while ensuring all transactions and documents are securely recorded online
Reduce the average procurement lead time

SUCCESS METRICS

1. Reduction in average time taken to complete an end-to-end procurement cycle

2. % of procurement processes completed fully online via the platform

END-TO-END FLOW

ALL MODULES

As there are many modules inside the platform, in this case study, I will focus on the Buyer Order Management (BOM). Next, I will be attaching the process of creating Buyer Order Management page (few of the stages included in this case study: User Interview, Competitive Analysis, Information Architecture, Wireframe and High Fidelity Designs.)

DISCOVERY

WHAT IS BUYER ORDER MANAGEMENT?

Buyer Order Management (BOM) is one of the most important tools in eCommerce's product management experience, as this feature allows buyers to manage the purchased products or goods, both when the product is still being processed by the seller, or has been received by the buyer.

However one of the challenge is that the feature will manage large-value transactions, as is typical for B2B which has different type of transaction than C2C marketplace.

EXISTING SCREEN

WHY DID WE DECIDE TO REVAMP THE BOM?

The previous version of the Buyer Order Management page was functional, but it followed a traditional data table format — a layout that works well for bulk processing but falls short when it comes to clarity, usability, and decision-making for complex B2B transactions.

1. The old layout is too table-centric and resembled a spreadsheet: minimal visual hierarchy, hard to scan at a glance. Key information (like item details, status, and CTA) was buried in rows, requiring users to read line-byline.

2. Low visual affordance, orders felt abstract - no product photos, contextual details, just text. This limits user's ability to quickly identify specific transactions or prioritize actions..

3. Limited filtering and navigation, as they weren't emphasized, resulting in users overlooking them or spending extra effort to narrow down results.

IN-DEPTH INTERVIEW

Period: August 2020

RESEARCH OBJECTIVE

Gather behavioral insights around the procurement process
Leverage user insights or perceptions to build a good B2B Procurement marketplace.

RESEARCH OUTPUT

Identify key buyer pain points on the end-to-end procurement process
Identify key buyer journey

TARGET AUDIENCE

n = 13

Criteria

People in-charge of purchasing goods/services in their respected company
- 8 [of 13] from internal Procurement team, where 2 [of 8] is procuring services
- 2 [of 13] from official Store seller (Small-to-medium Enterprise)
- 3 [of 13] from external big corporate

FINDINGS FROM RESEARCH

END-TO-END FLOW

This diagram shows the full B2B procurement journey, from sourcing to after-sales service. It shows how buyers start by discovering suppliers through search results or supplier pages, then move into a negotiation phase that includes supplier comparison, open tenders, or direct contracts. Once a deal is made, the process continues through order execution, goods receipt, billing, and finally, post-purchase support.

The Buyer Order Management system sits at the heart of the operational phase—covering buying execution, goods received, and billing—where users actively manage and track their orders. This area is crucial, as it allows buyers to monitor transaction statuses, view product details, contact suppliers, and ensure the procurement process flows smoothly end-to-end.

BUYER ORDER MANAGEMENT: NEEDS & OPPORTUNITIES

Buyers need a centralized dashboard that simplifies how they track and manage orders, especially across billing and legal-related cases.

Two core requirements were identified:

A chronological view of all order activities (order timeline) is essential to resolve billing disputes or legal matters quickly.
Buyers want an all-in-one space that consolidates company data, billing, and order history, improving ease of navigation and operational efficiency.

BUYER ORDER MANAGEMENT: GOODS RECEIVED

Pain point:

Inefficient communication between suppliers, procurement, and users to confirm goods received.

Idea:

Confirmation for Goods Received by procurement team on the platform

BUYER ORDER MANAGEMENT: BILLING & PAYMENT

Pain point:

Inefficient communication for incomplete invoice documents

Idea:

Accept or reject uploaded invoice documents on platform

*Documents needed:

Purchase order, BAST/Delivery Order, Invoice, Tax Invoice, Agreement Document, etc..

DEFINING

How might we enable users to efficiently track and manage their large-value B2B transactions, ensuring a smooth experience from processing to receipt of goods efficiently?

COMPETITOR ANALYSIS

Conducted research to our B2B competitors, such as: Ralali, Bizzy, Mbizmarket, Monotaro, and Alibaba.

Buyer's entry point to manage their orders
How buyers track their orders
Competitor's transaction flow end-to-end process
Components in the Buyer Order Management page

WHAT WE BENCHMARKED:

FINDINGS

1. Order Timeline

Buyer needs a timeline history of their order when dealing with billing or legal cases to speed up their work

2. Dashboard

Buyer needs an all-in-one space in terms of ease of navigation, where they can manage their company data, billing & payment for their order management

USE CASE SCENARIO

I have defined the use case that will most likely happen in the platform, with various scenarios as seen from the table below.

PROPOSED FLOW: BUYER ORDER MANAGEMENT

INFORMATION ARCHITECTURE (IA)

Created these IA for Buyer Order Management to capture our user's needs. In result, we could prioritize which architectural components are more crucial to build first.

WIREFRAMING

WIREFRAME

WIREFRAME

1. ORDER & BILLING LIST

Follow the Natural Use Flow (Button positioning)

Decided to place all the CTA buttons towards the right of the content on Order List, for buyer to easily scan all the information on the left instead of a full-width content.

2. ORDER DETAIL AND TIMELINE

New Order Detail Page

Decided to design a new page for order detail instead of leveraging the existing modal from our C2C marketplace, as the information that needs to be shown for buyer are different, and more complex for us.

Emphasize several components for the new order detail page, such as:

1. Progress Bar: to show the order's current progress (Grouping several statuses for easier scannability)

2. Timeline: to show the progress in detail in a new tab for easier navigation instead of scrolling to the bottom

3. Dynamic message: a brief description of the order progress & several dynamic CTA depending on the progress or the status

3. REVIEW INVOICE

These are the new steps for B2B transaction, in which buyer has to review the invoices (if they click this, it will be viewed in the new tab) that was sent by supplier after the goods were received.

USABILITY TESTING

RESEARCH OBJECTIVE

To evaluate whether the proposed wireflow for the B2B Buyer Order Management (BOM) system is understandable, intuitive, and usable by procurement professionals

RESEARCH OUTPUT

Identify potential pain points, confusion, or usability friction in the flow
Insights on: navigation clarity, comprehension of order statuses and actions
Recommendations to improve layout, wording, and interaction flow

TARGET AUDIENCE

n = 5

Criteria

Procurement specialists in Tokopedia
- Leverage Tokopedia C2C Marketplace as buyers

RESEARCH FINDINGS

KEY BREAKDOWN INSIGHT

We observed a 60% drop-off after users confirmed goods received. (This was evidenced by users pausing for 20+ seconds, and expressing confusion out loud (User #3: Where did it go to?').
📉 Average time spent locating the next step: ~37 seconds, including re-clicking tabs and using Ctrl+F.
In follow-up questions, 3 out of 5 testers expected the invoice review to happen on the same page or within the same flow. Instead, their orders silently moved from the Transaction tab to the Billing tab — creating confusion, disorientation, and loss of task continuity.

WHAT WE CHANGED

This flow represents what happens after a buyer has made a purchase in Tokopedia’s new B2B platform. The user needs to go through three key steps:

Confirm the goods have arrived (i.e. “Yes, I got the stuff.”)
Review the invoice (check if what the supplier billed matches what was ordered)
Make the payment

HIGH FIDELITY DESIGNS

1. Order List

Solution 1: Revamping from Table to Dashboard

Drastically I have transformed a whole layout of our Buyer Order Management from "a table" in the previous design phase to be an expandable dashboard.

Hence we can cater to wider use cases, as per the problems that we've discovered.

Solution 2: Visibility Improved
Timer + Status

Most participants stated that the timer was too small and was not clear enough about what kind of information it tried to imply.

For iteration, we’ve decided to combine the timer, status & ticker into a new component for buyer to create a more sense of urgency.

Solution 3: Navigation

I took consideration to improve existing C2C sidebar navigation. We found that its hover interaction might be hard to highlight the menu inside. Also prone to click errors.

So I solved this problem by simply changing the interaction from hover to click.

2. Order Details

Solution 1: Revamping from Pop-up to Page

From research and analysis earlier, order details are designed to be pages instead of pop-up, pages also have better expandability in future design and development than pop-ups like in C2C.

Solution 2: Clearer Progress Bar + Personalized Dynamic Message

I founds that users need effective ways to find out the status of their transactions and quickly decide what next relevant actions they can take.

Therefore I made a new Progress Bar along with messages and relevant actions that change based on the status of the order.

Solution 3: Envelope-styled address card

Mimicking the address card similar to envelope design with red-blue stripe to emphasize that it contains mailing information, and making the design look less transactional..

IMPACT