<  Onboarding UX Patterns





Progression systems

What are they?

Progression Systems (or progress trackers) break down how to get from "completely new" to "fully capable" and guide users through the journey. They often take the form of to-do lists, completion meters, or some combination thereof.

Do you need a progression system?

The answer is usually yes.

Progression systems are a very effective way to plot a course from a user's "starting state" (where they are, in terms of the problem they're trying to solve) to their "ending state" (where they want to be, with the help of your product if all goes well).

There are two elements that work together to make any progression system effective—the breakdown of steps in the sequence and how effectively each step helps the user move forward.

Put these elements on a scale and you get a graph that looks like this:

Progress Quadrants

The x-axis: The user's progress

The x-axis plots where your progression system is leading the user. The endpoint of your progression system is arguably the trickiest to figure out because it means aligning the product's goals (learning the interface, paying for a plan, or sharing something on twitter) with your user's (taking a real step towards solving a problem in their lives).

The y-axis: Creating a path to progress

The y-axis plots how you lead the user there—laying out the steps to the promised land.

The key here is to remember that activity doesn't always mean achievement. Breaking steps down in a progression system is about finding the shortest path to a real-world outcome—each extra step in the system is a new opportunity for someone to drop off.

Breaking it down

If you feel like your onboarding flow naturally breaks up into steps that users can follow, sketch out your progression system on a piece of paper, rate it, and plot it against the x- and y-axes.

If your system falls in quadrant four, you've got a winner.

Example: GetResponse helps you create an email newsletter in five easy steps.

Quadrants one and two are the trickiest to troubleshoot: your steps either make sense or they don't (that's an easy problem to fix) but you've got bigger problems—you're users aren't making progress.

Example: Quickbooks abandons its progression system before you can set up invoicing or accounting

(correct slide #?)

You should lean against a progression system only in the extremely rare case that your product falls in Quadrant 3 — where users are better off making progress without a clear breakdown of steps for them to follow.

How to nail the execution

To nail your execution, make sure your progression system does these three important things:

  • Situates users: New users don't know enough about your app to comfortably navigate through it. A good progress tracker situates the user—it says, with distinct visual states, "you are here", "that's where you've been", and "you need to go there next."
  • Sets expectations: Progress trackers let users know how much effort they need to put in upfront. They're an opportunity to showcase your onboarding process—the more they know about it, the easier each step will be, and the more likely they are to finish.
  • Balances explanation with action: Start with easy, familiar steps before you move onto new, unfamiliar ones.

Remember to:

  • Make your system visually prominent: If your progression systems blends in with the app it can't provide the vital visual cues users need.
  • Make it easy to parse: Use icons, words, arrows, and colors to make skimming easier.
  • Be honest about effort: Steps within steps, unexpected wait times, and trackers that remain static after a completed step work against situating users and managing their expectations.

More examples of progression systems done right

These progression systems are all quadrant four material:

Zendesk

Zendesk nails the ‘real-world outcome' requirement—you use the progression system to set up your account and finish by solving real tickets:

Small execution nitpick: It feels like a bummer when Zendesk starts you off at 0% inside the app after you've answered five onboarding questions getting there

Waze

Waze gamifies their progression system to boost engagement and track progress beyond onboarding:

Wordpress

Wordpress takes a long series of steps (proof that progression systems don't have to be short to work) and makes them easy to parse with helpful microcopy and ‘estimated time' hints.

Recommended reading




For your consideration


  • Asana created a whole a mini progression system inside their email confirmation message
  • Coinbase made a crucial onboarding step appear to be the final item in a to-do list
  • Evernote created an "Explore Evernote" series of tips in a to-do list
  • OKCupid made a gigantic to-do list and presented it front and center in their post-signup UX
  • Quickbooks tightly integrated their progression system right into the main part of their dashboard -- super nice!
  • Quora gave you a to-do list of two final setup steps, but camouflaged them within three other steps that you'd already completed
  • Waze smartly aligned their progression system around one core unit of progress: distance driven while using Waze
  • WordPress included both a completion meter AND a to-do list in their entire screen dedicated to managing progress
  • Zendesk hid their quasi-progression-system inside a little notification pill -- clever use of space!