Tracking progress in complex processes

A visual language for clear, actionable indicators

Procurement is the process of buying goods or services for company use. Whether you’re an employee getting hoodies for your team or a professional buyer purchasing data center hardware, your request must be approved.

The approval flow is complex. It’s not always a straight path, and a number of issues can come up along the way.

A procurement platform I worked on displays purchase requests as cards. There are 15 possible states, and they’re represented with badges using simple color association.

How badges look on the cards

States are grouped into 4 categories

If you’re a bag of Skittles at the checkout register, splashy colors are great because they draw attention. But for tracking progress in something as complex as procurement, we can be a bit more deliberate.

Color as a differentiator

In a short sequence, color is a powerful indicator of position. For example, traffic lights have 3 states that always happen in the same order; color tells you exactly where you are in the sequence.

For a long sequence, it’s not as effective. You have 2 options, equally bad:

1. Keep the same number of colors, and reuse them.
   When the same color is used for multiple steps, it’s no longer an effective indicator of position.
2. Increase the number of colors, and give each step a unique color.
   Outside of green-yellow-red and the rainbow, there aren’t many universal color sequences.

Color is a meaningful differentiator between states only when there are a limited number of states.

Using multiple visual cues

We can communicate status more effectively by combining color with other visual cues, like background styling and iconography.

Color: “Where are we now?”

Color tells you the current status of the approval process.

• Green means you’re on the happy path to your goal.
• Red means something negative happened, like a rejection or error. Note that negative ≠ bad, because a negative outcome is sometimes desired (e.g. cancelling something).
• Gray means you’re in limbo, neither on or off the happy path. An obvious example is the draft stage, before anything’s been submitted.

Background: “What’s next?”

The background tells you what needs to happen next.

• A plain label means something is in progress.
• Borders mean something is blocked, and the preparer needs to act on it.
• Fill means you’re finished.

We only use the “blocked” state when action is required from the preparer, i.e. the creator of the request who’s responsible for seeing it through. It’d be pointless to use it when action is required from anyone, because that’s nearly every state.

Icon: For emphasis

The icon reinforces the message communicated by color and background. It’s an additional visual cue that benefits everyone, especially colorblind or otherwise visually-impaired users.

Unlike color and background, there are no set guidelines on which icon to use. Appropriate iconography varies by context, and leaving some flexibility allows us to add nuance when needed.

Putting it together

Combining these dimensions, we get a comprehensive vocabulary for describing all possible states.

The new system requires fewer colors and addresses some key issues:

• In many interfaces, blue is reserved for actionable things like buttons and links. Using it for indicators is misleading, especially when they resemble buttons.
  👍 Replaced blue with gray

• It’s hard to read to white text on a yellow background, because there’s not enough contrast.
  👍 Removed yellow (no longer necessary)

Instead of being their own thing, “in progress” states are intermediate steps on the main paths.

Consistent wording

Besides color, there’s another issue with the yellow badges. Can you spot it?

• In Pending Cancellation, “Cancellation” refers to the thing — the cancellation of the purchase request. Same for Pending Change.
• In Pending Approval, “Approval” refers to the status of the thing — that the purchase request is awaiting approval — and not the thing itself. Same for Pending Review.

Applying the Pending X format to everything sacrifices logical consistency for visual consistency.

On the other hand, states like Approved and Rejected don’t tell you anything about what was approved or rejected.

Was it the purchase request, a change to the purchase request, or a cancellation of the purchase request?

We can solve both problems at once by using [Noun] Adjective when applicable.

Result: Clear, actionable indicators

By developing a coherent visual language, we have status indicators that are helpful and easy to understand. Our framework is versatile and can be applied to any kind of workflow, in procurement and beyond.

Shown in use within a shipping application.