Baby steps into user onboarding through instructional design

Billy Reano
NYC Design
Published in
7 min readDec 5, 2017

An organized plan for your onboarding practices that helps users learn

When users interact with products for the first time, they are met with new scenarios that may be challenging. User onboarding practices excel in overcoming those pain points and empower users. But even expert users fail to take advantage of useful features introduced later on that would benefit their product experience.

That’s because new features are often only introduced, instead of being taught to the core users. When this happens, some dedicated users notice and incorporate those features into their use flow. However, others dismiss those new features and guard their current practices.

Over the past months, I have placed my baby boy down in a jungle gym filled with colorful balls and shiny rings, hoping he’d play. I eagerly watched for his reaction, but he wouldn’t move.

As weeks passed, I saw something new. The baby moved its arms slowly side to side, and not up to the balls. And that moment things clicked for me. The baby was still learning how to move his arms. He had smaller, immediate tasks to accomplish before even thinking about playing.

That realization of seeing the baby learn changed the way that I plan and design onboarding experiences.

Instructional design in user onboarding

Our goal with using instructional design in onboarding is to arrange events of instruction that will lead to rapid, obstacle free learning (e.g. learn how to move your arms before you can learn how to aim for the toys). But when creating an onboarding plan within digital platforms, how do you come up with events of instruction?

In Principles of Instructional Design, the authors present a model for the derivation of an instructional system, which is an arrangement of resources and procedures used to promote learning. I’ve adapted heir model to work for building onboarding communications.

How to create an onboarding instructional system

This model consists of defining goals of success for your onboarding plan, creating learning objectives to derive what needs to be taught, and outlining and designing tasks to validate learning and performance.

To illustrate this system in action within each section, read how a hypothetical team would build and utilize this plan to reach their goals.

Goals

Define goals of an onboarding system

  1. Perform an analysis of needs, goals, and priorities
  2. Translate each goal into a framework

Perform an analysis of needs, goals, and priorities

List out a few overall objectives that you believe would lead to the consumers being successful with your product. Understand that this will require buckets of consumer empathy. These goals can align directly with your business goals, but often they may be different, and that’s okay.

For example, a team behind a cooking recipe app recently introduced an interactive cookbook feature. They feel that if customers use this feature, they will use the app often. They form an onboarding goal of getting users to fill their personal cookbooks with recipes.

The purpose of this is to understand what needs to be taught during our onboarding process. After all, this goal will require the user to know multiple processes within our recipe app. Knowing these goals could influence the user interface, marketing, or the product design itself, and thats where needs and priorities could come into play.

Translate each goal into a framework

Break out the goals into smaller goals that would accomplish this goal. Consider these to be our target objectives. If you notice that a goal has many objectives, you may want to reconsider that goal to be more specific that leads to consumer success.

For example, the team noticed that in order to add recipes to their personal cookbooks, the users must be able to browse recipes, add a recipe, and find their personal cookbooks to access their collection. They list their three objectives.

Objectives

Explore learning objectives

  1. Organize your target objectives by order of understanding
  2. Create a list of tasks under those objectives

Organize your target learning objectives by order of understanding

The target objectives listed aren’t always accomplished in the same way. To ensure that the user can progress freely from one objective to the next, organize them in order of understanding and priority.

For example, the team knew that informing the user about the new personal cookbook section was the most important, followed by adding recipes and then browsing recipes. By accomplishing these objectives, the user will be successful in filling their cookbook.

Ask these questions to yourself when reviewing your objectives:

“What will the user be able to do after the instruction that they couldn’t (didn’t) do before?”

“How will the user be different after the instruction?”

Create a list of tasks under those objectives

This is where things get real. Within each objective, list out the steps that the consumer must know and experience in order to reach their goal of success. Each step of that plan is a learning task.

For example, the team started with their most important objective, finding the personal cookbook. They began to list the steps:

select the personal cookbook icon in the bottom navigation of the app, which opens up the cookbook

select the browse icon in the middle of the screen, which opens up the browse section of the app.

Tasks

Choose instructional strategies

  1. Add detail to each learning task
  2. Plan for other experiences that can bring about learning
  3. Select materials and media
  4. Assess the performance

Add detail to each learning task

For each task, examine the communications of that task, whether it be through visual or written form. You can do this in two ways:

  • Define the task purpose (what is the user learning)
  • Define learning outcome (how to evaluate learning)

At this moment of our plan we lock in the specifics of color, branding language, and accessibility for our user.

For example, the team needed users to understand that if they select the personal cookbook icon, it would lead them to their own cookbook. They decided to implement a popup modal display that defined what the cookbook was and highlighted the icon in the bottom navigation.

Plan for other experiences that can bring about learning

Seeing that our instruction is taking place digitally, look for ways to incorporate other sources to help the user understand. List those opportunities. Onboarding features can incorporate video or slideshow to further illustrate a topic.

Select materials and media

With the detail of communications in place for each task, choose images and animation that support the instruction.

For example, when users would visit the cookbook for the first time, a custom animation of a book opening on their screen would take place, revealing the UI to add a recipe.

Assess the performance

As you plan for the user to interact with each task, look for ways to provide feedback to the user, or progress within your onboarding system.

For example, the team wanted to motivate users to add recipes to their cookbook, so once they added a recipe and visited their cookbook, they would receive a new notification congratulating them and offering another recipe that they could be interested in.

By organizing onboarding communications through goals, objectives, and tasks, we can better instruct users about new products and features. This instructional system isn’t a new concept, but it’s a verified model that even babies use to learn.

I’ve provided a link to a fillable pdf form in which you can use with your teams to build out instructional onboarding plans. It’s really helped me organize my thoughts when building out onboarding solutions for digital products & features. I would love to hear your feedback and successes with the framework.

Download Onboarding Forms

Contents:

  • User Onboarding Plan Worksheet
  • Individual Performance Task Breakout Worksheet

References

Gagné, R. M., Briggs, L. J., & Wager, W. W. (1992). Principles of instructional design (4th ed.). Forth Worth, TX: Harcourt Brace Jovanovich College Publishers.

My name is Billy Reano, an interactive UX designer and ambitious learner of user onboard experiences. Check out some of the latest articles about UX design and maybe a dash of NBA culture and board game nerdry.

--

--

Billy Reano
NYC Design

Sr. Designer @ Apple | Always searching for inspiration for my design and thriller novel writing.