PIPELINE INFRASTRUCTURE LIMITED • 2025 – 26 · 3 min read

PIL's operations dashboard took minutes to load. I got it to seconds.

Pipeline operations, redesigned

As the product designer for Pipeline Infrastructure Limited from November 2025 to February 2026, I faced one problem: the operations dashboard's tables took 2–3 minutes to load. With Shrishti Singh, I redesigned its tables, forms and loading states, on a four-theme design system in light and dark. Today the whole table loads in 2–3 seconds.

Figma link

PIL Home Master · view only

View in Figma

OVERVIEW

2–3 min → 2–3 s

Load time

For the whole table.

4 months

Nov 2025 – Feb 2026

Theme combinations

Four colours, each in light and dark.

15 · 30 · 50

Rows, the user's choice

The rest loads behind.

THE SITUATION

A tool people opened many times a day, and avoided.

Maintenance, pipeline and rebalancing work all ran through one internal dashboard.
Its tables took 2–3 minutes to load. For a tool opened many times a day, that's a reason to avoid it.

The core challenge:

Make a data-heavy, compliance-bound system fast and legible — and theme it four ways, in light and dark.

THE USERS

Operations staff, mostly 35 to 40.

The people using it daily
Mostly between 35 and 40, and the existing system was hard for them to work with.

PAIN POINTS

Everything was there. None of it was in one place.

Scattered
Forms and tables everywhere, and nothing tying them together.
Minutes to load
The dashboard fetched everything up front, so every visit began with a wait.
Too much data at once
Tables with hundreds of rows, all rendered before anyone could read the first.
Saves that went silent
Every save runs compliance checks first, so a click could sit for seconds with nothing on screen.
A system that fought its users
The existing interface was hard for the people who used it most.

WHY IT HAPPENED

The data was the problem, not the design.

All forms and tables, with far more data than anyone could see at once.
The fix was restraint: render only what's on screen.

DESIGN GOALS

Design goals

One system, four colours
Make big data sliceable
Load only what's seen
Make waiting feel like progress

SOLUTION

Core solution modules

Filters and sorting
Slicing and dicing a table without exporting it.
Pagination with a row picker
The first 15 rows arrive first. A picker in the footer switches to 15, 30 or 50; the rest loads in the background.
Three kinds of loader
Skeleton screens while a table loads; a spinner with short facts while a save clears compliance; then a success message.
A themed design system
Four colour themes, light and dark, so the patterns held as screens were added.

PROCESS

From discovery to handoff

01 · LOADING
Skeleton, spinner with facts, success
Skeleton, spinner with facts, success
02 · FORMS
Pipeline and rebalancing forms
Pipeline and rebalancing forms
03 · PRODUCT
Final screens · Illustration
Final screens · Illustration

DECISIONS & TRADE-OFFS

Key decisions and trade-offs

Show 15, load the rest behind
The table shows 15 rows and pages the rest in the background. People pick 15, 30 or 50; the API fetches only what's shown.
Break the wait into steps
A save that has to clear compliance can't be instant, so the wait was split: a spinner with informative facts for a few seconds, then a success message. Nobody wonders whether it froze.
Four themes in two modes
Eight combinations from one design system — red, orange, blue and green, light and dark, orange primary.Trade-off: It was genuinely hard to design. It was only possible because the underlying system was consistent.

OUTCOMES