WORK

STORIES

ABOUT

RESUME

Turning the tables:
Simplifying data interaction for power users

At Delhivery we found that desktop users repeatedly missed inline actions hidden in wide tables because they rarely scrolled horizontally. to fix this we redesigned the listing from a table to a compact card layout that preserves all critical data while surfacing action buttons at a glance. The result: clearer scanning, fewer page opens, and a smoother, faster workflow for users processing orders and tickets.

Product & Org context

Delhivery’s backend tools show rows of orders, tickets, and transactions in dense tables. each row contained the critical data needed to take decisions, with actions (CTAs) placed as the final column on the far right. enterprise clients accessed the product on desktop, processed high volumes of items, and relied on quick, repeatable actions to keep operations moving.

This project started from a small research observation and grew into a redesign effort because that small pattern had big operational impact.

What changed at a glance

Before:

👨🏻‍🦯‍➡️

Wide tables with important columns hidden off-screen

🔍

Actions placed at the far-right column, revealed only after horizontal scroll

🕶️

Frequent jump into detail pages to perform actions

Too much data leading

to increased cognitive load

Hidden CTAs

Not Scalable: Adding more columns will increase horizontal scrolling

After:

🧩

Card-first list preserving all decision-critical data in the top section of each card

🔗

Action zone anchored under each card (no horizontal scroll required)

🎯

Users can act directly from the list, reducing context switches

Why this mattered

Operations teams process hundreds of items a day. Small frictions, hidden actions, unnecessary clicks, repeated detail page opens, multiply into substantial time loss and fatigue. The table layout assumed horizontal scroll behavior that users on windows desktops rarely performed.
This mismatch created a discoverability problem: actions existed, but users didn’t see them.

This project started from a small research observation and grew into a redesign effort because that small pattern had big operational impact.

🛠

We could not remove any columns. Each column surfaced information validated by previous research to be important for first-glance decisioning.

The challenge was to keep the same data density but change the representation.

What users were saying

🤔

“I didn’t even know there were more columns.”

👀

“I always open each order to take action… it’s so repetitive.”

❓

“If only I could see everything without opening the details.”

These remarks came up on multiple client screenshare sessions during research.

What wasn't working

Hidden CTAs

Users missed actions because they didn’t scroll horizontally

Context switching

Users opened detail pages just to take an action present elsewhere

Cognitive load

Scanning dense rows was slow and error-prone

Inconsistency

Mobile used cards, desktop used tables, producing a mental model mismatch

Building trust, one detail at a time

💼

Approach

We translated table rows into cards that mirror the table’s decision hierarchy. every card contains the same critical data points in the top area and a clearly grouped action area in the bottom

🩻

Card anatomy

Top: context and decision info

Identifier (order id), status, timestamps, key flags, short metadata (e.g., COD amount, alerts)

Bottom: action zone

Primary action first, secondary actions grouped; actions sized and spaced for fast clicking

Anatomy of a card

🔄

Iterations (VISUALS + RATIONALE

Variant A (Actions on top - right aligned, detailes below)

Presented a U-shaped reading pattern starting from the identifier to the actions - not common.

Had to remove column headers - drastic user behaviour change.

Variants A

Variant B (Actions on bottom - right aligned, secondary details on middle section)

Users were habitual of seeing a lot of rows in a single viewport height. This version increased the height of each card, hence, reducing the number of rows in one view