Indopaket 3PL Operations Platform

A little context

Indopaket 3PL is an internal logistics platform for land and air shipment operations, used by operational teams and logistics partners. Teams use it to check shipment status, review tracking history, and access operational reports.

My part: Frontend architecture, operational interfaces, form and workflow design, error and empty states, role-aware navigation, data integration, and testing setup.

Collaboration: I worked with backend engineers, Product, and Operations teams to translate operational requirements into usable interfaces.

I’ve simplified the workflows and roles here to keep internal information private.

Where things got tricky

Land and air shipments follow different steps, and some information arrives after work has already started. Operators need to see the current stage and know which actions are available.

Darat vs Udara

Core Workflow

1. Authenticated operational user
2. Role-relevant workspace
3. Shipment mode

• Land

  Linear shipment workflow

• Air

  Multi-stage shipment workflow
  1. Arrival recorded
  2. Transit information updated
  3. Delivery evidence confirmed

The choices behind the screens

Same Destination, Different Steps

Land and air shipments don’t move through the same sequence. Some information arrives partway through the work, and the next action depends on both the shipment stage and the person handling it. One generic flow would have a lot of explaining to do.

I kept the workflows separate, with actions tied to the current stage and the operator’s role. Underneath, they share validation and domain logic.

That leaves more interface paths to maintain. Shared rules help keep the behavior consistent while leaving room for the differences that matter in each operation.

This is the reasoning behind the implemented version. I don’t have a prototype-to-test revision history to share here, or usability results that show how well it works for operators yet.

Selected Interface Screens

I can’t share the product screens publicly. The diagrams above are a simplified look at the workflows and the choices behind them.

Architecture and Reliability

Testing Strategy

I set up unit and component tests with Vitest, Testing Library, and jsdom, alongside ESLint, Prettier, and lint-staged for routine code checks.

The testing priorities are form validation, state-dependent actions, and loading, empty, and error states—the interactions that help operators understand what they can do next.

Before vs After

What’s there, and what I still want to learn

The platform brings together land and air workflows, role-aware navigation, tracking history, and shared validation. Actions follow the shipment stage, so the interface can show what’s available next.

The testing setup covers form validation and interface states. I don’t have operational error rates, task-time comparisons, or usability-test results to share here.

Next, I’d like to observe operators working through both shipment types, especially when information is missing or an action isn’t available yet. Does the screen explain enough? Or does someone still need to ask a colleague? Those moments would tell me where to focus.

What stayed with me

This was my first deep dive into 3PL operations. It made me pay much closer attention to what a screen lets someone do, and when. A button can look perfectly fine and still be the wrong next step. That lesson stayed with me.

What I’d explore next

Reconciliation (Recon)

Explore a simpler way for teams to see reconciliation status and find items that need follow-up. Conceptual exploration — not yet shipped.

Mobile Documentation

Explore capturing and reviewing documentation on a phone. The flow below is a concept; operational details have been simplified.