Tracking progress in complex processes

A visual language for clear, actionable indicators

Bryant Peng
Jul 10, 2018 · 5 min read
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
How badges look on the cards
Image for post
Image for post
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.

Image for post
Image for post

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 tells you the current status of the approval process.

Image for post
Image for post
  • 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.

The background tells you what needs to happen next.

Image for post
Image for post
  • 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.

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.

Image for post
Image for post

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.

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

Image for post
Image for post

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
Image for post
Image for post
  • It’s hard to read to white text on a yellow background, because there’s not enough contrast.
    👍 Removed yellow (no longer necessary)
Image for post
Image for post
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?

Image for post
Image for post
  • 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.

Image for post
Image for post
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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Shown in use within a shipping application.

Bryant Peng

Product / Design

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store