THE SITUATION
A tool people opened many times a day, and avoided.
Pipeline Infrastructure Limited ran its maintenance requests, pipeline and rebalancing work through an internal operations dashboard. Its tables took two to three minutes to load.
For a tool people open many times a day, a wait of minutes is not slow. It is a reason to avoid the tool.
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.
01
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.
01
Scattered
Forms and tables everywhere, and nothing tying them together.
02
Minutes to load
The dashboard fetched everything up front, so every visit began with a wait.
03
Too much data at once
Tables with hundreds of rows, all rendered before anyone could read the first.
04
Saves that went silent
Every save runs compliance checks first, so a click could sit for seconds with nothing on screen.
05
A system that fought its users
The existing interface was hard for the people who used it most.
THE PROBLEM
The data was the problem, not the design.
It was all forms and tables, and far more data than anyone could look at at once. The fix was mostly restraint about what to render.
DESIGN GOALS
Design goals
01
One system, four colours
Four themes — red, orange, blue and green, orange primary — each in light and dark.
02
Make big data sliceable
Filters and sorting, so people can find a row without scrolling through hundreds.
03
Load only what's seen
Stop fetching everything before showing anything.
04
Make waiting feel like progress
Never leave someone staring at a blank screen, wondering if it worked.
SOLUTION
Core solution modules
01
Filters and sorting
Slicing and dicing a table without exporting it.
02
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.
03
Three kinds of loader
Skeleton screens while a table loads; a spinner with short facts while a save clears compliance; then a success message.
04
A themed design system
Four colour themes, light and dark, so the patterns held as screens were added.
COMPONENTS
The system's building blocks
- Data table
- Filter bar
- Sort control
- Pagination
- Row picker (15 · 30 · 50)
- Skeleton loader
- Spinner with facts
- Success message
- Form fields
- Theme switcher
- Light / dark mode
- Status chips
DECISIONS & TRADE-OFFS
Key decisions and trade-offs
01Show 15, load the rest behind
Decision
The table renders 15 rows at once and pages the rest in the background. People choose 15, 30 or 50; the API fetches what the page shows, so it feels fast because something is on screen immediately.
02Break the wait into steps
Decision
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.
03Four themes in two modes
Decision
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
From minutes to seconds
LOAD TIME
2–3 min → 2–3 s
For the whole table.
THEME COMBINATIONS
8
Four colours, each in light and dark.
ROWS, THE USER'S CHOICE
15 · 30 · 50
The rest loads behind.
KINDS OF LOADER
3
Skeleton, spinner with facts, success.
THE TEAM
The team
Adesh Singh
Product Designer
Shrishti Singh
REFLECTION
What it taught me
REFLECTION
Most of the speed came from not rendering what nobody was looking at yet. The rest came from being honest about the waits that couldn't be removed, and making them legible rather than blank.
Consistency made the themes possible
Eight theme combinations were only manageable because the system underneath them was consistent.
