UserOnboard EXPOSED!

Update 001: Like a Phoenix from the Ashes

You know what's a quick, cheap, and super important part of an onboarding experience to improve?

Letting users know when they've successfully completed something!

It can be done with a simple header state, like how Vimeo welcomes new signups...

Screen Shot 2018-07-18 at 5.55.20 PM.png

... or it can take up an entire screen, like Shopify's "your store is ready" celebration:

Screen Shot 2018-07-18 at 5.58.22 PM.png

... but no matter how grandiose the message, the underlying purpose is the same: to provide users with timely, supportive feedback that what they're doing is working.

I call these kinds of design elements "success states" because they're like "error" states, only the opposite: instead of letting the user know that something went wrong, we're letting them know that they did something right.

Why are success states so important to design for, though?

Well, for three big reasons:

  • It provides the user with confirmation.

    In many workflows, a screen makes a demand of the user and when the user complies, the software moves straight on to the next step like nothing even happened. Taking a beat to verify that all is well can give the user the mental closure needed to start the next task.

  • It also provides the user with encouragement.

    A well-timed pat on the back can simply feel good to receive, especially when it's for a meaningful accomplishment (and isn't just empty praise, which usually erodes motivation, instead).

  • And it ALSO provides the user with context.

    Have you ever played the game Hot & Cold with a kid? It's kind of a similar process here -- as users make progress with your product, success states can be your way of providing feedback about it: "you're getting warmer..." "you're burning up!" "you're standing in lava!"

If you REALLY want to get the most out of success states, though, you can double down on all the above by not only saying that something good happened, but also by harnessing their momentum and steering it into a follow-on activity.

For example, check out how Unroll.Me uses its "inbox zero" success state to guide people toward spamming their friends sharing their stats:

Screen Shot 2018-07-18 at 6.00.30 PM.png

When approached this way, success states not only act as exclamation points for the progress that the user just made, but also as pivot points that direct users straight into another suggested step.

In this sense, you can almost think of success states as the "connective tissue" between two workflows of your choosing. Instead of having an activity simply conclude, another one can immediately rise up after it, like a phoenix from the ashes.

Ok, let's dive into a real-deal redesign!

I kicked off the UserOnboard redesign process by identifying the main "user flows" that the UserOnboard "software" supported:

  • ➡️ Viewing a teardown
  • ➡️ Reading an article
  • ➡️ Signing up for the email list
  • ➡️ Buying the UserOnboard book
  • ➡️ Requesting a private onboarding review

With those firmly on my radar, I did a quick audit to see what kind of "success states" might already be in place for each workflow.

The findings were, shall we say... mixed.

The "viewing a teardown" success states were probably in the best shape, so let's start there.

When I originally coded up the teardown slideshows, I reserved the final slide as a "magic" one that would show a modal overlay asking the reader if they wanted to sign up for the email list:

Screen Shot 2018-07-18 at 6.01.12 PM.png

Not a bad foundation, right? This is the whole "phoenix rising from the ashes" strategy in play, with the end of one workflow jumpstarting the beginning of another.

Still, subscribing to the email list wouldn't have been super helpful for people who were already on the list, so I also coded it up to show a totally different message to active subscribers. Usually, that replacement message was about following UserOnboard on Twitter, but I'd sometimes swap it out with news of an upcoming workshop or seasonal sale, etc.

The "reading an article" workflows had similar success states, albeit less dynamic ones. I could include a quick call-to-action at the end of each post's main content, but since the articles in question were hosted on Medium at the time, I couldn't do any fun coding dynamic stuff (like showing different people different messages) and instead had to stick with plain old static copy.

Sometimes I would go back into each Medium post to update the "success state" message by hand to display something more current, but usually they would just collect dust in their original form. Case in point, the UserOnboard book came out years ago, but the little snippet at the end of some articles I published during that time still seem to have no idea:

Screen Shot 2018-07-18 at 6.05.10 PM.png

(this is a current screenshot 😕)

"If only I could update the success state messages in ONE place and have that automatically show up across ALL of the articles," I sighed.

And then I realized that if I self-hosted the Medium posts, I could code up the same kind of "magic container" from the last slide of the teardowns and have it appear in the footer of every article, as well.

In fact, I could even insert that magic container into any part of UserOnboard that I wanted: at the bottom of the home screen, at the end of the contact section, or even as the success states of any workflows mentioned above, like buying the book or requesting a consultation!

If I could centralize the general display logic, then every success state across the site would be consistent in its aesthetic and current in its messaging. And beyond that, each of them could also take advantage of the dynamic part I mentioned earlier, where anonymous visitors would see an email signup form but active subscribers would see something entirely different.

Screen Shot 2018-07-18 at 7.50.42 PM.png

This led to a simple but challenging question, however: what exactly should that "entirely different" message be? It wouldn't make sense to just say "follow UserOnboard on Twitter" over and over again, especially if someone already was following that account.

Could I customize the success states even further, somehow?

Customizing success states even further

It turned out that I was asking slightly the wrong question: instead of "what's the message that I want to show?" it really needed to be "what's the next thing that the person wants to do?"

Of course, there wouldn't be a "single, specific thing that all people want to do, always," but if I paid attention to the basic context of whichever workflow a person was in at a given time, I could come up with some pretty good guesses.

For example, it already made intuitive sense that the "view a teardown" flow would be followed by the "sign up for the email list" one, so long as the user context didn't include "already a subscriber":

Screen Shot 2018-07-18 at 7.53.18 PM.png

And now that I had the "magic container" at the end of the now-self-hosted articles, I could hook into that same logic:

Screen Shot 2018-07-18 at 7.55.13 PM.png

And naturally, the "sign up for the email list" workflow itself would have "some other workflow" following afterward, as well:

Screen Shot 2018-07-18 at 7.56.16 PM.png

Still, what should that "some other workflow" actually be?

For inspiration, I went back to the five main flows I listed earlier. The first three were already accounted for, which left two to consider:

  • ➡️ Buying the UserOnboard book
  • ➡️ Requesting a private onboarding review

Both sounded like pretty decent candidates, but choosing between the two was hard. What if someone was more interested in one than the other? Or what if someone was interested in both? Or neither of them?

Then it hit me: I shouldn't choose. Or, at least, I shouldn't choose just one.

Stacking the "deck" for success

One of the biggest problems with the idea of having a single, universal "some other workflow" presented across the entire site was that anyone who visited multiple screens would see it over and over again.

"What if instead," I thought, "I created a whole collection of success states and presented one at random anytime a screen loads?"

Screen Shot 2018-07-18 at 8.00.30 PM.png

I could treat all the potential workflows almost like a deck of cards, stacking them up and then dealing them out one at a time.

In fact, to avoid the "same message over and over" problem even further, I could keep track of whichever ones were shown during a user's visit and lower the odds of those messages showing up for them again.

This didn't mean that I had to cede complete control to a random number generator, either: if I had a time-sensitive promotion that I wanted to run, for example, I could always promote it to first-card priority (I guess the relevant metaphor here would be "dealing from the top").

And even better, stacking workflows like a deck also afforded the opportunity to let people say "not interested!" to anything they found irrelevant. Instead of forcing people to either comply with a call-to-action or ignore it, I could give them "veto power" to dismiss it and see the next message instead.

In theory, this would not only help provide a more relevant experience for the user, but also provide UserOnboard with more valuable data on workflow relevance (as well as possibly speeding up the significance of split test results).

Genius idea, right?


Well, sort of.

Regardless of how they're presented, the individual "phoenix states" are still only as relevant as the workflows they're promoting.

I plan on sharing the experiment results collected thus far in a future post, but the early returns seem to indicate that people aren't ready to make a leap straight from reading a teardown into buying a book or requesting a consultation.

This is totally understandable, and the wheels are already turning on ways to provide more relevant "in between" workflows, like offering a free course on how to get onboarding/UX prioritized at your company.

I'm also considering other workflows that are more straightforward to implement (i.e.  don't require an entire course to be created before they can be added), like asking people to share the thing they just read if they liked it.

Anyway, the framework for experimentation is firmly in place, and I'm excited about seeing where I can take it.


For those following along at home, here's what I did to get here:

  • Identified the main workflows that my "software" facilitates
  • Audited each workflow for current/potential success states
  • Dynamically showed the best guess for the most relevant follow-up workflow


And here's where I plan to take things from here:

  • Dig further into the experiment data and share those juicy, juicy deets (coming soon!)
  • Create success states that are of actual quality (what's in place now are basically placeholders)
  • Explore entirely new workflows to introduce (and create the content needed to support them)


Anyway, if you want to see the first draft in action, there's a real live one for you right below  :)

I'd love to hear what you think about the idea and implementation!


Want to read more about this project? Here is The Intro! And here is Update 002!