UX/UI Case StudyWeb PlatformB2B Marketplace4 Portals + Site App

Truss.

CONSTRUCTION PROCUREMENT MADE EASY

Construction procurement in Kerala still runs on phone calls, notebooks, and negotiation by attrition. Truss connects everyone in the loop — contractors, vendors, site stores, and the Truss team — each with their own portal — so enquiring, quoting, and purchasing materials happens in one transparent system.

Role
Product Designer — solo: research, IA, UX, UI, design system
Scope
4 portals, a mobile site app, public site
Output
157 screens · 1 design system · 4 themes from one set of components
Market
India (Kerala) — ₹, GST, E-Way bill, IS standards
Open in Figma ↗
Truss — Cover: tilted grid of portal screens around a dark Truss splash

[Truss — Cover] · Portal screens around the Truss splash. Figures on this page come from prototype data.

01 — The problem

Four ways to lose money.

Opaque prices.

Contractors call 3–4 dealers per requirement and still don't know if the price was fair.

Lost in handover.

The office orders, the site receives. Short or damaged deliveries surface days later, if at all.

Stock nobody can see.

Surplus at one site is bought again for another. Stores keep paper registers that never match.

Trust is manual.

Anyone can claim to be a dealer. Disputes are settled by whoever shouts louder.

02 — The cast

Five people, one shared order record

SV
Sean Varghese

Director, Skyline Builders.

Contractor portal
AM
Anita Menon

Owner, Prestige Materials.

Vendor portal
RN
Rahul Nair

Store manager, Kakkanad Central Store.

Warehouse portal
AK
Anil Kumar

Site engineer, Block B.

Truss Site (mobile)
MK
Meera Krishnan

Operations lead, Truss.

Admin portal
03 — Information architecture

One door each.

Contractor
  • Home
  • Projects
  • Enquiries
  • Orders
  • Warehouses
  • Vendors
Vendor
  • Home
  • Enquiries
  • Orders
  • Catalogue
  • Customers
  • Rates
Warehouse
  • Home
  • Deliveries
  • Stock
  • Requests
  • Transfers
  • Reports
Admin
  • Home
  • Verifications
  • Companies
  • Rates
  • Orders
  • Disputes
Site app (mobile)
  • Home
  • New request
  • Tracking
  • Handover
  • History
Public site
LandingFor vendorsChoose your roleOne sign-in for everyoneChoose a workspace
04 — One design system, four themes

One library, re-themed

The foundation is a quiet, document-like system: cream canvas #F5F1EC, ink #111, hairline #D3CEC6, and Inter with JetBrains Mono for IDs.

One component library is re-themed by a single "Portal" variable mode, so every portal feels related but distinct: Contractor orange, with ink text on the accent; Vendor blue, Warehouse green and Admin crimson, with white text on the accent.

Charcoal is always the primary button. The accent colour is used for at most one hero action per screen.

#FF5600
#2F45FF
#08845B
#D9145A
ButtonBadgeText fieldSelectTableAlertModalTop barStat cardStock meterOrder stepperTimeline eventQuote cardDocument tilePrice
Design System & Components page
157 screens built from the same components.
05 — One order, end to end

The whole loop, one record.

ORD-2026-0419 · 750 bags UltraTech OPC 53 · Skyline Heights

Wed 17 Sep → Mon 22 Sep → paid by 21 Oct. Each step is the real screen at that moment.

01
Contractor
Wed 17 Sep, 8:30 AM
Sean asks once.

750 bags go to every verified dealer who delivers to Kakkanad, not four phone calls.

C-04.2 · New enquiry
02
Contractor
8:31 AM
Reuse before buying.

Truss checks Skyline's own stores first: Vyttila has 120 surplus bags, moved later by transfer (TRF-0032).

C-04.3 · Modal · Stock check — reuse before buying
03
Admin
6:00 AM, every day
The market rate everyone sees.

Truss publishes the Kochi median (₹412/bag) from live vendor prices. Outliers are held for review, not published.

A-05.1 · Rates · Daily board
04
Vendor
10:05 AM
Anita quotes in two minutes.

₹412/bag incl. GST, delivery 19 Sep, 30-day credit, with today's market rate beside her price.

V-03.2 · Enquiry · New → Send quote
05
Contractor
10:40 AM
Three quotes, side by side.

Price, delivery, credit terms and vendor record in one view, against the market rate.

C-04.4 · Compare quotes
06
Contractor
11:02 AM
Negotiation without attrition.

Sean counters in the thread with the ₹405 quote as leverage. Prestige settles at ₹408 with 30-day credit.

C-04.5 · Negotiate with a vendor
07
Contractor
11:12 AM
Order placed · ₹3,06,000.

Purchase order PO-SKY-2026-118 is generated from the record. Under Sean's limit, so no approval step.

C-04.6 · Modal · Place order
08
Vendor
11:40 AM → Fri 7:30 AM
Confirm and dispatch.

Prestige confirms, generates the E-Way bill and adds the vehicle. The store sees it instantly.

V-04.3 · Order · Ready to dispatch
09
Warehouse
Fri 19 Sep, 7:30 AM
The store knows it's coming.

Rahul's day starts with the gate schedule: 750 bags, KL-41-H-2218, ETA 9:40.

W-02.1 · Home · Today
10
Warehouse
9:36 AM
Paperwork matched at the gate.

Vehicle, E-Way bill, quantity and amount are checked against the order automatically. A missing test certificate is flagged.

W-03.2 · Delivery · Gate check-in
11
Warehouse
10:18 AM
Quality check with evidence.

750 counted, 12 torn bags rejected with photos, setting-time sample sent to the lab.

W-03.3 · Delivery · Quality check
12
Warehouse
10:22 AM
Goods received note.

Stock updates (42 → 780 bags), a ₹4,896 credit note is requested, and Sean can pay ₹3,01,104.

W-03.5 · Delivery · Goods received
13
Contractor
10:23 AM
Sean hears about it on his phone.

One message with the outcome and a link; no portal visit needed.

M-01 · Messages · Contractor (Sean)
14
Site app
Mon 22 Sep, 6:34 AM
180 bags to the slab.

Anil signs for the cement on his phone. ₹1,04,640 is booked to Block B, 9th floor.

S-05 · Handover · Confirm receipt
15
Vendor
Due 21 Oct
Paid what was accepted.

Prestige sees ₹3,01,104 against INV-2026-0402, with credit note CN-PM-0012 already applied.

V-04.9 · Payments · Receivables & payouts
16
Admin
Payment day, 4:00 PM
Truss pays out T+1.

The payout run sends cleared money to Prestige's verified account. Holds and disputes are skipped automatically.

A-06.5 · Payments · Holds & payouts
06 — Numbers that carry through

Every portal shows the same figures, because they all read one record.

Vendor
₹412
Prestige's quote
→
Contractor
₹408
negotiated price
→
Contractor
₹3,06,000
750-bag order
→
Warehouse
12 bags
rejected at the gate
→
Warehouse
– ₹4,896
credit note
→
Contractor
₹3,01,104
invoice paid
→
Admin
T+1
payout to Prestige
07 — Portal highlights

Four cockpits.

Contractor

Projects carry budgets. Buying is one flow: stock check → enquiry → compare → negotiate → order. Orders above ₹5 L go to the director.

C-02.1 · Home
C-03.5 · Project · Material plan
C-05.5 · Modal · Report a problem (raise dispute)
Vendor

Real enquiries from verified buyers, today's market rate next to every quote, credit limits per customer, payment T+1.

V-02.1 · Home
V-04.8 · Dispute · Respond
V-04.9 · Payments · Receivables & payouts
Warehouse

Receiving is a guided flow (gate → quality → goods received note), with partial acceptance built in. The stock register reconciles itself, and site engineers request material instead of calling.

W-04.2 · Stock · Item ledger
W-05.2 · Request · Issue material
W-07.2 · Reports · Monthly consumption
Admin

A risk-first home. Verification with automatic GSTN, PAN and bank checks, and a 24-hour deadline. Rates that need review only on exceptions. Disputes decided on the order's evidence.

A-02.1 · Home · Needs attention
A-03.2 · Verification · Review vendor
A-06.2 · Dispute · Detail
08 — Beyond the portals

The rest of the system

Truss Site (mobile).

Site engineers request material from the store's real stock and sign for it on their phone.

S-02 · Home
S-03 · New request
Messages & documents.

Short chat and SMS updates with one link, plus a purchase order, goods received note and GST tax invoice generated from the same record.

D-03 · Tax invoice + credit note
Public site & one sign-in.

A landing page, then one door that routes each person to their portal.

P-01 · Landing page
P-05 · Choose a workspace
System states

Offline at the gate (check-ins queue on the tablet), session expired, no access, maintenance.

X-05 · Offline at the gate
09 — Design decisions

Six decisions that make one record work for five people.

01
One order record, many views.

The enquiry, PO, GRN, invoice and payout are all views of one record, so ₹3,06,000 is ₹3,06,000 everywhere.

02
Partial acceptance, not pass/fail.

Accepting 738 of 750 bags with a photo-backed credit note removes the most common argument in the loop.

03
Show the market next to every price.

Vendors quote against the published Kochi median and contractors compare against it. Negotiation becomes a conversation about data, not stamina.

04
Review exceptions, not everything.

Rates publish automatically and only outliers (more than 8% from the median) wait for a person.

05
Reuse before buying.

The stock check runs before an enquiry goes out. Surplus at one site becomes a transfer, with the cost moved between project budgets.

06
One system, four themes.

A single component library themed by a Portal variable mode: orange, blue, green and crimson accents from the same components.

10 — Outcomes (targets)

What it should buy back.

4min
gate check-in (vs ~40 min of calls and paper)
3.4
quotes per enquiry
6.2%
saved vs walk-in prices
0
unexplained stock differences at month end

Outcome figures are design targets from the prototype data, not measured results.

11 — Reflection

Designing the record, not the screen

The work on Truss was less about individual screens than about the thing underneath them: a shared order record, and a system of components that could show it five different ways without disagreeing with itself.

The hardest part was keeping those five views consistent down to the rupee. A rejection at the gate has to move a credit note, an invoice total, a project budget and a payout run — and each portal has to explain the change in its own language without changing the number.

What I'd test next: gate check-in on a real site tablet, where the network drops and hands are busy, and whether vendors trust the published market rate enough to quote against it.

Next up

Servo.

Read the case study →