Tracking progress in complex processes

A visual language for clear, actionable indicators

bryant
bryant
Jul 10, 2018 · 5 min read
How badges look on the cards
States are grouped into 4 categories

Color as a differentiator

Using multiple visual cues

Color: “Where are we now?”

Background: “What’s next?”

Icon: For emphasis

Putting it together

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

Consistent wording

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

Result: Clear, actionable indicators

Shown in use within a shipping application.

Bryant Peng

Product / Design

bryant

Written by

bryant

💌 newsletter: tinyletter.com/bryant

Bryant Peng

Product / Design