Case study 01 / 04 · Open Quotation
CASE STUDY 01 / 04
Interaction designUI designGovTech

Making government mini-competitions fair, fast and audit-ready.

Open Quotation (OQ) is Mbizmarket’s request-for-quotation and negotiation flow for government agencies and state-owned enterprises, with LKPP procurement rules built right into the interface.

Role
Lead UI/UX Designer
Team
1 PM · 6 engineers · 2 designers (I led design)
Timeline
5 months
Platform
Web · buyer & vendor
Open Quotation: annotated product screen

Real screen from the OQ design file. All vendor and user data is fictional.

The 30-second version
The problem

Buyers compared quotes in spreadsheets and chat. A new rule requires at least two quotes, and breaking it usually only showed up at audit.

What I did

Put the rule inside the UI, swapped a wide table for ranked uniform cards, and kept buyers and vendors in one shared shell.

The result

In a walkthrough, shortlisting 10 quotes dropped from about 2 hours to about 35 minutes, and the two-quote rule can’t be broken by accident.

Impact

From spreadsheets and chat to one flow you can audit.

BEFORE±2 hours rebuilding a spreadsheet
35 minest.

to shortlist 10 quotes and get to negotiation, right on the Compare screen.

BEFORERule breaks surfaced at audit
12%

of pilot rounds got fewer than 2 valid quotes and were cancelled by the system, so none of them reached an audit as a broken round.

BEFOREVendors invited through who-you-know
+15%

more small businesses (UMK) quoting per round in the pilot, because every vendor gets the same invite, spec and rules.

The numbers behind Open Quotation
40+rounds run in the pilot with selected agencies
88%of pilot rounds met the two-valid-quote minimum
5.6%saved against budget on average in pilot rounds, after negotiation
−40%time from request to PO in the pilot, compared with a full tender
Who it’s for

Three roles, one transaction.

Mbizmarket is a B2B e-procurement marketplace used by Indonesian government agencies and state-owned enterprises. OQ lets a buyer invite several vendors to quote on the same request, compare the offers, negotiate, and issue a purchase order, all without leaving the platform.

B

Buyers

Agencies and SOEs. They create the request and pick the winner.

V

Vendors

Suppliers, including small businesses (UMK). They send and revise quotes.

A

Approvers

The buyer’s boss. Signs off before the PO goes out.

The problem

New rules, old habits.

Before OQ, price comparisons lived in spreadsheets and chat, completely outside the audit trail. A new regulation requires at least two quotes, and with fewer the round has to be cancelled. Buyers also juggle price, local content and delivery time at once, often across many items. And all of it had to slot into a live product without breaking its visual system.

Regulation

At least 2 valid quotes, or the round is cancelled

Set by LKPP Decree 93/2025. Until now, violations usually surfaced at audit, after the PO was already out.

Complexity

One request, many items, several vendors per item

Buyers weigh price, local content (TKDN) and delivery time together, then may renegotiate item by item.

Live product

A new menu inside Mbizmarket, not a separate app

Header, sidebar, buttons and status labels had to match every other page. Buyers shouldn’t feel they switched apps, and engineers should reuse what exists.

Who wins

One feature, three winners.

Agencies get the best price with an audit-ready trail, vendors get a fair shot, and Mbizmarket keeps project deals on the platform.

Government buyers

The best price through real competition, and a decision that holds up at audit.

−70%time spent shortlisting quotes before negotiationest.
  • Price comes from at least 2 quotes, not a one-on-one haggle
  • Price, budget gap and local content on one screen, no manual recap
  • Faster than a full tender, still compliant with LKPP Decree 93/2025
  • Every decision is logged automatically, ready for audit
Vendors

An equal shot at government work.

4.2quotes per pilot round on average
  • Invited directly, with a clear spec from day one
  • Small businesses compete under the same rules as big players
  • Local content score shows on the quote card, so local products sell themselves
  • Revise and negotiate inside the flow, always knowing your status
Mbizmarket

Project deals stay on the platform.

Rp1.2Bin purchase orders issued through OQ during the pilot
  • Project deals that used to leak into chat now become POs
  • A platform fee on every PO issued through OQ
  • More active vendors, because there are new deals to chase
  • Compliance becomes a selling point to new institutions
Key decisions

Three decisions that shaped OQ.

01

Put the rule in the UI, not in a help page.

The call
“Select winner” stays locked until two valid quotes arrive, with the reason right next to it. With only one, the flow guides the buyer to cancel and re-request.
Why
The two-quote rule was usually discovered at audit. It’s safer if breaking it simply isn’t possible.
Trade-off
Buyers lose a shortcut, but nobody can break the rule by accident.
Decision 1: Put the rule in the UI, not in a help page.
02

Uniform cards in a ranked list, not a wide table.

The call
Every quote is a card with the same structure: total in the same spot, budget gap colour-coded, then business classification, local content and documents. Cheapest first by default, and buyers tick who they want to negotiate with.
Why
I tried a table with a sticky vendor column first. With 10–14 quotes and lots of attributes it got long and wide, and buyers had to scroll both ways. Their real job isn’t reading every number, it’s deciding who’s worth negotiating with.
Trade-off
Row-by-row comparison is less precise than a table. The cheapest-first sort, the budget gap on every card and full details one click away make up for it.
Decision 2: Uniform cards in a ranked list, not a wide table.
03

One shell, two roles.

The call
Buyers and vendors share the same layout with different accents: blue for buyers, orange for vendors.
Why
One design system serves both sides, and people always know which side they’re on.
Trade-off
Orange is only allowed on the breadcrumb, the role toggle and the active sidebar item. Buttons stay blue, so the main action never changes colour.
Decision 3: One shell, two roles.
Process

From a messy old flow to screens ready to build.

A normal UX process, except every step got checked against procurement rules.

Step 1

Understand

I mapped how buyers and vendors worked before, marking what was painful and what was risky under the rules.

Step 2

Map the flow

Buyer and vendor flows, including the unhappy paths, like a round with fewer than two quotes.

Step 3

Design & prototype

From wireframes to UI on top of the live design system, then into a clickable prototype.

Step 4

Test & iterate

Walkthroughs with PM and QA, failure scenarios checked, fixes made before handoff.

Looking back
“If I did it again, I’d bring vendors in much earlier.”

I designed the buyer side first. The vendor flow had to be reworked once we saw how small vendors actually send their quotes.

Screens

From request to quote, two roles in one shell.

Real screens from the OQ design file. All data is fictional.

Request detail · buyer
01Request detail · buyer
Invitation detail · vendor
02Invitation detail · vendor
Propose a negotiation
03Propose a negotiation
Quote detail
04Quote detail