InVision’s polished product tour

This article was originally published in 2017. It was updated in June 2020 with fresh content and images. Enjoy!

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 user 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:

Why this is really good UX:

• In UX, 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 is a good signal that they are ready to start taking advantage of all the interface has to offer.

• 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.

• 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.

• 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.

• 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.

‍