Building onboarding for long-term guidance

Originally published at www.kryshiggins.com in 2017

In a previous post, we looked at multiple opportunities over time for user onboarding techniques to be useful in our products. If we design for those opportunities ad hoc, we risk unscalable designs and frustrating users with fragmented education. Instead, let’s see how to tackle onboarding design so that it fits into a long-term approach to guidance.

When designed as part of a long-term approach to guidance, the seam between everyday user education and onboarding can be invisible.

Start at the end to map key actions

To avoid an onboarding experience that forces all users to follow the same path in the narrow window of the first run experience, we want to focus on finding the key actions that signpost various paths to success. It’s tempting to identify key actions by starting at the beginning of the user’s journey and plotting a path forward. But I prefer the perspective of designer Jonathan Korman who, in a recent thread about first-time use, said:

If you know the intermediate-use destination, you can strip stuff away to figure out what essentials to reveal for first-time use

— Jonathan Korman (@miniver) December 8, 2016

By “intermediate,” Jonathan means to focus on core users instead of idealized expert users (since, as Alan Cooper says in his book “About Face,” most users are “perpetual intermediates“). These are the customers that sustain your product with good retention, engagement, or other contributions. These core users are the destination to which onboarding experiences should lead.

We also should look at unsuccessful users — those that churn or otherwise don’t contribute to our bottom line. Because that’s where we don’t want onboarding to lead new folks. Once we’ve defined these destinations, then we can reveal key actions by working back through the paths groups of these users took to get there.

It’s a bit like drawing the solution to a maze. Sometimes it’s easiest to see the solution by starting at the end and working out to the beginning. Similarly, if we start with the current state of core and unsuccessful users, we can work backwards to understand what established their current routines. What actions did core users share? What actions did core users take that unsuccessful users did not, and what actions did unsuccessful users take that core users did not? Many research methods can be useful here, including but not limited to cohort analysis and diary studies. If you have a brand new product, then work backwards from hypothesized core user destinations to map out assumed key actions.

Consider this hypothetical example of an app that helps users sell items. Core users may be people who sell items once a week and unsuccessful users may be those who abandoned a listing before posting it for sale. By working back through their paths, we can identify actions that were key to success. For example, the “Copy a listing” action was shared by many core users, and missed by many unsuccessful users, which may indicate the importance of guiding users to this action.

Just be mindful that designing onboarding by starting at the end, after you’ve defined core use, isn’t the same as designing it late. The process of designing onboarding can uncover issues with the core product that you need time to address.

Break down key actions

Once key actions are identified, we can set about guiding users through them. We can break each action down into 3 parts to clarify how guidance should flow through an action. Those parts are the trigger(s), the activity, and the follow-up, like we’re building a feedback loop. The following list covers what guidance may be necessary within each component. Trigger(s)

• Use history (such as entry point) and surrounding context to make the trigger compelling
• Explain the benefits of acting on the trigger
• Set expectations about what will happen next

Activity

• Assist with the skills or knowledge needed to complete the activity (this is where UI guidance can come in)
• Restate the benefits of this task
• Guide the user through any subtasks or obstacles

Follow-up

• Give feedback about what happened, whether successful or unsuccessful
• Lead to next available actions

Apply guidance to the trigger, activity, and follow-up of an action.

Here’s how we might break down the key action of signing up for a New York Times subscription.

The first trigger for signup that most people see is a tip at the bottom of an article. It appears if a user has read 5 or more articles on nyt.com in the past month.

The trigger becomes a full page overlay if the user hits the monthly 10-article limit.

Once the user acts on this trigger, they move to the activity of signing up. This involves a few subtasks, including selecting a plan.

Other subtasks include creating an account (shown) and paying for the subscription (not shown)

When the activity of subscribing is complete, the user is presented with follow-up guidance that encourages them to sign up for daily emails.

And that follow-up action of signing up for emails results in triggers for new actions, like recommended reading links delivered to one’s inbox.

By breaking key actions into modules, we see how the follow-up of one action can link up to triggers in others. Onboarding becomes more about binding together interchangeable links in a chain, and less about creating a single string of actions everyone has to follow in the same order.

The follow-up portion of any onboarding action can serve as the bridge to other actions.

For a deeper dive into the concept of feedback loops, check out Microinteractions by Dan Saffer.

Reinforce

Long term guidance also gives onboarding the chance to reinforce the concepts it introduces. One reason we get stuck in a one-time-use mindset is by thinking that people only need to be exposed to something once to retain it. We touched on the concept of spaced repetition in a previous post. It’s the idea that people retain information and form habits effectively by repeatedly engaging in practice over time. Learning something only once is subject to a steep forgetting curve.

In addition to ensuring that onboarding techniques guide through interaction (which makes them inherently practicable), techniques should also have some means of reinforcement.

Reinforcement can be achieved through product-driven repetition or user-driven repetition. Product-driven repetition means that your site, app, or service decides when and how guidance should be repeated. User-driven repetition is when the user initiates repetition.

In this scenario, Facebook reinforces a piece of guidance by varying its presentation. It starts with a proactive blue tip and also reiterates that guidance via the omnipresent cue text in the search field.

This is another example of product-driven repetition. Adobe is trying to call out their new “Save for screens” feature, and presents a relevant, actionable message in both the Photoshop and Illustration “Save for Web” dialogs

To ensure you are reinforcing concepts instead of mindlessly repeating them, vary how you present each iteration, the location of each iteration, and/or the frequency of repetition. For guidance presented proactively (like tooltips in an app or voice tips on a home speaker device) define an end condition: stop repeating them after n times; stop after the user demonstrates repeatable engagement with an action; include a dismiss function; and/or stop showing repetitions after n times with no user engagement.

The Reddit mobile app does not have an end condition for their notification access prompt; it will pester you endlessly until you allow (or go insane).

User-driven repetition allows the user to control when guidance is next presented. This sense of control naturally combats mindless repetition.

This is an example of user-driven repetition. Etsy proactively offers a product tour to a user. The user can repeat it by clicking on the “Take a tour” link that is a permanent part of their dashboard.

Building for reinforcement is a great way to break teams out of a one-time-use mindset. When creating an educational moment, ask, “How can I reinforce this concept a second, third, even fourth time? Can the user revisit this?” When faced with making assistance useful multiple times, it helps steer us away from ad-hoc solutions like first run slideshows.

Choose appropriate methods

With a sense of where to apply and reinforce guidance, we can gather the best methods to our onboarding toolkits. The methods we build need to be appropriate for the user’s situation and the product’s (or new feature’s) situation.

Consider whether the user is in an exploratory situation when they arrive at the action requiring guidance, or on a mission. For example, a new user who leisurely browses to your website’s home page, or downloads your app from a promoted apps list, may be exploring and browsing. Meanwhile, someone accessing a shared document from a colleague is likely on a mission, and wants only guidance relative to that task.

Consider the product or feature’s situation, too. Users may expect prominent assistance for a new product type, like a VR headset or a bitcoin trading service. On the other hand, people probably prefer a lighter touch for established products like email. Typically, the more novel the value proposition or interaction space, the more prominent guidance may need to be.

This chart can be a starting point for determining the appropriateness of onboarding techniques.

When in doubt, stick to lightweight guidance.

Zoho mail uses a lengthy slideshow to introduce new users. While the imagery in the slideshow itself is beautiful and probably aligned with their brand, it feels like overkill for the established email space.

On the other hand, the “welcome” email waiting in the user’s app after account creation is more appropriate. It’s lightweight and relevant.

This BB8 onboarding experience is comprised of detailed, interactive tutorials. While something like this would feel heavy-handed in a productivity app, most users expect a playful experience from this toy and are less driven by a specific mission.

Be appropriate for your product

In addition to being appropriate for the situations of your users and your general product type, all methods in your onboarding toolkit should act like they’re playing for the same team. Anything not matching up to your product’s identity will be disruptive or, worse, ignored.

Facebook has established two patterns for education, inline cards and occasional blue tooltips. It maintains consistency between these and its brand without blocking interaction with feed content.

Relying on third party onboarding or user education plugins can lead to inappropriate guidance. There are a growing number of onboarding tools out there, some specializing in walkthroughs, others offering tooltips and overlays. They might be OK for prototyping some ideas for triggers and placement. But these tools often don’t provide solutions that feel like a natural extension of your design language.

Often, educational content gets left out of design system and pattern library work. Perhaps that’s because it’s highly stateful. As product designers, we should develop an onboarding philosophy as part of our design systems and include user education and onboarding elements (tooltips, default states, inline guidance, on-demand help, reactive messaging, user feedback mechanisms, etc.) in our libraries and audits.

This example audit of the guiding elements of a shopping assistant app shows that whle many methods are used, they all express the product’s identity and tone of voice.

You can also catalog elements in a spreadsheet. Below is a quick example, using Brad Frost’s Atomic Design methodology, of how you might incorporate the stateful behaviors of onboarding and user education alongside the rest of your product’s patterns. Spreadsheets are particularly helpful if you are working on some non-visual or hard-to-screenshot surfaces, like VR or voice interaction.

Set up learning checkpoints

The previous activities help us structure guidance for our users. But we should also give them the opportunity to guide where we take our onboarding experiences. We can, and should, use a variety of research techniques like diary studies and cohort analyses to evaluate our progress, and I covered how to evaluate onboarding in another post. But we can also learn directly from users by making feedback checkpoints a part of their onboarding experience.

We can set up an optional checkpoint to solicit feedback when we introduce users to new features.

And we can solicit feedback whenever a user churns out of our product

Making learning part of our onboarding process ensures that we stay apprised of new situations, and feeds into our discovery of key actions on the path to success.

Summary

To recap, we can add a few activities to our design process to help onboarding fit into a long-term approach for guidance. At the very least, they help us move away from a mindset that onboarding is a one-use experience. These activities include:

• Mapping out key actions by working backwards from the current behaviors of core users
• Breaking down key actions into triggers, activities, and follow-ups so that they can link to other actions
• Adding reinforcement to break out of a one-use mindset
• Assembling methods that are appropriate for our users and part of our design language
• Establishing learning checkpoints into our onboarding experience

By thinking about onboarding as part of a larger system of guidance, we create techniques that can be reused across the customer journey.

Originally published at www.kryshiggins.com.