InVision’s Focused Product Tour

March 21, 2019
Product tour

By Emily Carlin, Product Designer at Appcues

InVision’s entire onboarding flow is streamlined and polished. From conditional branching based on the user’s role (e.g. engineer, designer), to informative empty states, to prompts to download helpful plugins like Craft—it’s exactly what you’d expect from an industry-leading design tool.

And their onboarding isn’t just a flash-in-the-pan series of welcome modals—it continues to support you as you discover new areas of the tool, giving you just the right type and amount of information at just the right time.

InVision gradually provides options and information as users naturally uncover them, as opposed to overwhelming users all at once. In UX, this is called “progressive disclosure.”

Progressive disclosure is a great principle to apply to onboarding, where it can be tempting to show off every single great thing your application offers to users.

In InVision’s case, they save a simple tour of their prototyping tool’s functionality until after a user uploads their first screen to a project:

this is a gif image of invision's new user onboarding tour for their prototyping tool. It shows a minimal onboarding tour that highlights a few key features on a toolbar at the bottom of the screen. this is a good example of a simple focused new user onboarding product tour
InVision's streamlined product tour.

Why this is really good UX:

  • In UX, as in life, timing is everything! InVision could have chosen to show off all these cool features right after a user created an account, but they didn’t. Instead, the tour appears after a user has uploaded their first screen—which isa good signal that they are ready to start taking advantage of all the interface has to offer.
this is a gif image of someone uploading their first screen into invision's prototyping tool as part of the design company's new user onboarding process
Uploading my first screen!
  • Effective visual design. The color of the icon in each tooltip matches the active state color of the feature being described. In addition to being visually pleasing (shoutout to the aesthetic usability effect), the variation of color on each step makes the tour feel more dynamic, and helps users begin to differentiate between each feature available in the bottom toolbar.
this is a screenshot image of a tooltip with colorcoded icons from invision's product tour. it shows a simple white tooltip against a dark background with a pink icon and 2 cta buttons (next and skip tips) plus a single line of ux copy
  • Value for returning and brand new users. The “inspect mode” step has a “New!” badge on it, calling special attention to a feature that may be new even to people who may have used InVision in the past.
this is a screenshot image of a tooltip with colorcoded icons from invision's product tour. it shows a simple white tooltip against a dark background with a gold icon and 2 cta buttons (next and skip tips) plus a single line of ux copy. a blue badge that says NEW lets returning users know that the feature is new
  • It’s focused. There are 6 steps in the tour, highlighting features on a toolbar that has 14 total options. Invision doesn’t try to teach new users everything at once, and instead focuses their attention on the features that are most critical.
this is a screenshot image of a toolbar with colorcoded icons from invision's product tour. it shows a simple toolbar with icons that change color in their active state
  • Left-to-right readability. Each step unfolds in a straight, left-to-right line across the bottom of the screen, which respects the way people who read left-to-right languages like English are used to reading a screen (as opposed to popping tooltips up in variable locations on the screen and making people shift their gaze around in an unnatural way).

Why this really good UX really matters:

When you have a product full of cool features, it’s natural to want to show them off. But far too often, well-intentioned companies pack their product tour so full information that users are left feeling overwhelmed. 

Overwhelmed users = frustrated users = unmotivated users = churned users. 

The road to bad user onboarding, they say, is paved with good intentions.

InVision sidesteps this problem by keeping their prototyping product tour topical, contextual, and limited to only the most critical features. As a result, their user onboarding experience moves new users toward their first aha moment in a way that feels simple and seamless.