https://tangolanding.webflow.io/how-tango-delivers-on-ease-of-use

How Game Design Helps Tango Deliver on Ease of Use

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Hannah Cohen

Published:

06/25/24

•

5 min read

Table of Contents

The observation that started it all

A game designer’s framework

Where traditional documentation falls down

Changing the game with Click-to-Create

Where traditional software training falls down

Changing the game with Guide Me

The bottom line

Think about the last software training project you led.

1️⃣

How long did it take to create how-to documentation?

2️⃣

How many of your end users got the hang of it without additional enablement?

If you answered “way too long” and “not nearly enough,” you’re in the right place. And if you’re skeptical of SaaS applications that claim to be easy to use, we don’t blame you. There is a tendency to overstate. Especially when it comes to phrases like, “user friendly,” out-of-the-box,” and “no special skills required.”

For that reason, we won’t spend too much time telling you why Tango is the easiest way to create step-by-step software walkthroughs and drive higher process adoption.

Instead, we’ll show you how game design mechanics inspire Tango’s frictionless, fast, and focused UX that every user experiences for the first time during their onboarding flow—and let you decide if there’s any doubt about time-to-magic and time-to-value. 📈

The observation that started it all

On the surface, high-craft enterprise software designed to drive digital adoption doesn’t seem like it has much of a connection to games played to escape the daily grind.

But there’s one thing that games do better than any product on the planet—and that’s onboarding.

A quote from a Tango power user about expectations for (brief!) video game learning curves.

Take a game like Mario. Mario is a masterclass on experiential learning, implicit education, and ease of use. How so?

There are no manuals to read or recordings to watch about how Mario works. New players start playing, and as they do, they discover the first of many core mechanics.

Affordance through the use of space tells players where to go. ➡️ To signal to players that they must move right, Mario always starts all the way on the left.
Goombas are bad, and the only way to avoid them (and stay alive) is to jump. 💪🏾 The first encounter with Goomba may be painful, but players get to start over and try again quickly.
Unlike Goombas, mushrooms are good. 🍄 To make this obvious, after jumping over their first Goomba, the game puts Mario on a path where he's forced to collide with the mushroom.

A screenshot of three core mechanics used to make learning to play Mario easy.

Learning to play Mario doesn’t feel annoying or overwhelming. It’s organic. Entertaining. Instinctive. And it all takes place within the first 10 seconds of the game. 🏆

For Tango’s Co-founder and Chief Technology Officer Brian Shultz, games like Mario set the gold standard for intuitive user experience (UX). Similar levels of curiosity, care, and strategy should go into design and UX decisions for setting new software users up for success.

A quote from Brian Shultz, Tango co-founder and CTO, about onboarding goals.

It’s a lofty north star. As it turns out, building a product that’s ridiculously easy to use is remarkably hard.

What Tango customers experience as an effortless way to create and follow standard operating procedures (SOPs) is actually a result of meticulously crafted game design mechanics. Every subtle detail and decision behind the scenes stacks up to quickly build user confidence.

How does that work, exactly? We’re glad you asked.

A game designer’s framework

To understand the subtle cues that accelerate aha moments and make experiential learning magical, game designers often refer to the MDA (Mechanics, Dynamics, and Aesthetics) framework, the most cited in the field.

We like the adaptation from Game Maker’s Toolkit, which talks about Mechanics, Actions (Behaviors), and Feelings.

This framework gives us a simple way to think about what goes into the best games, how those components build on one another, and how they impact user experience.

The MAF Framework

Game design principle

Metallic silver gear or cog with industrial mechanical design

Mechanics

Retro red joystick controller for classic arcade video game console

Actions

Blue dart hitting the bullseye of a red and white target

Feelings

What it means

How the game works

How players behave
in response to mechanics

How players feel when they act in such a way

Where it happens

In the code

In the actions players
take (or in their behaviors)

In players’ emotional responses

How it might manifest
(in a horror game)

Hallways with lots of
corners and occasional monsters around them

Proceeding with
extreme caution when rounding a corner

Fear and anticipation

What it means

How the game works

How players behave
in response to mechanics

How players feel when they act in such a way

Where it happens

In the code

In the actions players
take (or in their behaviors)

In players’ emotional responses

How it might manifest
(in a horror game)

Hallways with lots of
corners and occasional monsters around them

Proceeding with
extreme caution when rounding a corner

Fear and anticipation

The most talented game designers tend to work backwards and ask:

How do we want people to feel as they play?
What actions or behaviors will make those feelings possible?
Which mechanics will prompt players to take those actions?

To game designers—and to us—every mechanic matters. Each one either adds simplicity or complexity to our onboarding flow, and contributes to or detracts from our customer experience.

A quote from Brian Shultz, Tango co-founder and CTO, on the value of removing friction from the user experience.

Obsessing over every single detail in service of making Tango feel frictionless, fast, and focused is a full-time job. And—fun fact—that’s why we’ve treated it like one since the beginning.

Tango had a grand total of eight employees when we decided to make hiring a game design consultant (previously from Halo) a priority. He helped us become students of the very best game mechanics—and figure out how to translate them to enterprise software.

Over the years, we’ve continued to study and obsess over the best video game mechanics to:

Empower process experts to learn “how to Tango” while using Tango for the first time
Make our onboarding flow so seamless that it doesn’t feel like a tutorial at all

Since looking at game design in practice is a lot more interesting than talking about game design in theory, let’s consider 1) the problems Tango solves, and 2) how we borrowed brilliance from game design to solve them.

Where traditional documentation falls down

When we came up with the idea for Tango in 2020, we talked to 400 training, enablement, and operations managers before writing a single line of code.

They had a lot to say about what it was like to create SOPs and how-to guides the traditional way. Which was great, because we really wanted to understand the problem (the way a game designer would).

Here’s what we learned. 👇🏽

1. Process experts don’t enjoy the process (of creating documentation)

Needless to say, we were interested in how people were creating SOPs (the mechanics of the task) and what went into that (the actions and behaviors required to get the job done).

But we were even more interested in how those things made them feel. So we started backwards, and asked about feelings first.

Process experts in Training, Enablement, Operations, IT, and L&D reported feeling:

Exhausted (by the amount of time required to capture institutional knowledge)

Inefficient (due to frequent disruptions and the inability to prioritize strategic projects)

Uninspired (thanks to substandard guides compromised by tool and time constraints)

2. It’s no wonder they feel that way

To understand what was making 400 process experts feel exhausted, inefficient, and uninspired, next we dug into the actions/behaviors that made them feel that way.

A chaotic flowchart showing the old way of creating a step-by-step how-to guide.

In case that flowchart made your head spin:

Capturing a screenshot, cropping it, annotating it, and formatting it—for every step in a process—required multiple tools, hours at a time, and a high tolerance for tedious work

The chaotic context switching involved with creating *one* fully executed guide was genuinely off the rails (and it’d only be a matter of time until software UI or business processes changed and documentation would be moot anyway)

But what was most frustrating of all, for process experts?

Despite the amount of effort devoted to creating documentation (and encouraging employee self-service!), there were still countless “how do I…” Slacks, emails, and shoulder taps. 🫠

3. The “game” is actually a dreaded chore

By this point, we had a good idea of how process experts felt while creating how-to guides and why. The final step was to understand the mechanics of how “the game” of process documentation worked.

What’d we hear, loud and clear? The game is broken. The game is awful. The game needs a glow-up.

ICYMI—creating documentation the traditional way:

Is manual in every sense of the word

Calls for sequential task completion

Requires special tools and skills to create a beautiful end product

Changing the game with Click-to-Create

We didn’t know everything when we launched Tango. But we were sure about one thing.

A quote from Brian Shultz, Tango co-founder and CTO, about the challenge of convincing people to give documenting their knowledge another chance.

To win over process experts who were fed up with knowledge sharing, Tango needed to be:

Frictionless

Fast

Focused (something that happened in flow state)

Delightful

Here’s how we drew on the ingenuity of game design to deliver on all of the above—and ensure it’d be easy for new users to become power users on Day 1. 👇🏾

To help process experts avoid how-to guide formatting minutiae

⚙️ Mechanic

Clicks create screenshots, annotations, and automatic descriptions.

🕹️ Action/behavior

Users fly through documentation. (What used to take hours now takes minutes.)

🎯 Feeling(s)

Delighted, efficient, fast, frictionless.

🕺 What makes the mechanic easy to learn

Other Digital Adoption Platforms rely on workflow builders so complex they can take up to two years to master. Within the first two clicks during onboarding, Tango users learn:

Actions and clicks create screenshots
The orange box becomes the annotation
Actions auto-generate descriptions

To help process experts avoid context-switching

⚙️ Mechanic

Users must capture a process in full before editing.

🕹️ Action/behavior

Users focus solely on doing the process—from end-to-end, in one continuous flow—before proceeding to edit all steps together.

🎯 Feeling(s)

Focused, accomplished.

Tango software interface showing steps to pull a report

🕺 What makes the mechanic easy to learn

Since the Real-Time Capture Panel lacks editing capabilities, Tango users implicitly learn (in a matter of seconds) that they must finish their process before editing.

According to Brian:

“Most Digital Adoption Platforms make it really hard to document a procedure.
They ask content creators to make a million decisions along the way. So we decided we didn’t want Tango users to break flow or make a single editing decision. We wanted them to build momentum, capture their process, and then refine it after.”

To help process experts feel appreciated and accomplished when capturing knowledge

⚙️ Mechanic

Completing capture triggers confetti.

🕹️ Action/behavior

Users are encouraged to pause to celebrate the outcome of their work.

🎯 Feeling(s)

Accomplishment, appreciation, delight.

🕺 What makes the mechanic easy to learn

Using a [widely recognizable] confetti cannon teaches users to expect surprise and delight within Tango as a way to reinforce that documentation isn’t a chore—and doesn’t have to be painstaking.

While other Digital Adoption Platforms require jQuery, CSS, and HTML experience to 1) create a visually appealing how-to guide, and 2) offer a consistent learning experience…Tango users realize they’ve learned how to do both of those things immediately after they click the green check button to finish capturing a process (and cue the confetti!).

To help process experts avoid how-to guide formatting minutiae

⚙️ Mechanic

Clicks create screenshots, annotations, and automatic descriptions.

🕹️ Action/behavior

Users fly through documentation. (What used to take hours now takes minutes.)

🎯 Feeling(s)

Delighted, efficient, fast, frictionless.

Purple search icon with magnifying glass and plus sign

🕺 What makes the mechanic easy to learn

Other Digital Adoption Platforms rely on workflow builders so complex they can take up to two years to master. Within the first two clicks during onboarding, Tango users learn:

Actions and clicks create screenshots
The orange box becomes the annotation
Actions auto-generate descriptions

To help process experts avoid context-switching

⚙️ Mechanic

Users must capture a process in full before editing.

🕹️ Action/behavior

Users focus solely on doing the process—from end-to-end, in one continuous flow—before proceeding to edit all steps together.

🎯 Feeling(s)

Focused, accomplished.

Tango interface showing instructions for pulling a report

🕺 What makes the mechanic easy to learn

Since the Real-Time Capture Panel lacks editing capabilities, Tango users implicitly learn (in a matter of seconds) that they must finish their process before editing.

According to Brian:

To help process experts feel appreciated and accomplished when capturing knowledge

⚙️ Mechanic

Completing capture triggers confetti.

🕹️ Action/behavior

Users are encouraged to pause to celebrate the outcome of their work.

🎯 Feeling(s)

Accomplishment, appreciation, delight.

🕺 What makes the mechanic easy to learn

Other Digital Adoption Platforms rely on workflow builders so complex they can take up to two years to master. Within the first two clicks during onboarding, Tango users learn:

Actions and clicks create screenshots
The orange box becomes the annotation
Actions auto-generate descriptions

Connecting the dots with a delightful and playful UX

As you can see, studying game design taught us to look for opportunities to sprinkle in elements of surprise, awe, joy, and high craft. So Tango doesn’t just look beautiful. It also feels fun to use.

Keep an eye out for:

Colorful survey design during onboarding
Auto-zoom in screenshots
Animated glow effects to guide and inspire exploration of features

The (G2) crowd has spoken

Five purple stars aligned horizontally on a white background

Accessibility icon with wheelchair symbol in white on lavender background

“Intuitive design shines in Tango.”

Mar 06, 2024

"Learning how to use Tango was ABSURDLY easy. Every element of the interface has been thoughtfully considered which makes using this tool not only easy but fun. I started using Tango to make best practice guides for my team and am in the process of getting other teams to buy in. The more guides I create and put in front of people, the more they love it."

"Creates training documents that system users love."

Feb 22, 2024

"Tango is insanely easy to use and implement. I did not watch a video or read any instructions. Instead, I jumped right in, and I am a huge fan! This product has dramatically decreased the time I used to spend documenting processes, and everyone loves the end result."

Soft pastel pink circles of varying sizes floating on white background

Soft pastel circles of various sizes scattered on a white background

Document your first process free

Where traditional software training falls down

As we were applying game design principles to the act of creating documentation, customers helped us realize that we were only solving half of the knowledge sharing equation.

Process experts were still having a tough time:

🤔 “No one wants to search for knowledge (or self-serve).”

😤 “My end users avoid change no matter what I do.”

🤷 “I can’t tell if my training has an impact.”

What was the aha moment, for us? Being able to make more training materials faster doesn’t solve the bigger problems of getting coworkers to 1) engage with training, and 2) correctly adopt new processes.

To complete the knowledge sharing and process improvement loop, we needed to reduce friction for everyone who creates and consumes documentation.

Here’s what we heard from the latter (when we listened with our game designer hats on).👇🏽

1. Traditional software training doesn’t feel employee-friendly

Like the process experts we interviewed about traditional documentation, employees on the receiving end of traditional software training had thoughts. And by thoughts, we mean feelings.

Software training felt:

Scary (with a large percentage of end users afraid of failure and change)

Inconvenient (with mandatory workshops that pulls people away from their jobs)

Frustrating (with knowledge that can’t be applied in the moment)

Overwhelming (with too many tools to learn and SOPs to memorize)

Boring (with wordy PDFs and long videos with unnecessary fluff)

Irrelevant (with one-size-fits-all resources)

Scattered (with more siloed places to search for answers than ever)

Inconsistent (with erratically designed training in every system)

2. Getting unstuck in software requires 34058391 steps

We were equally curious about what a confused employee would have to do mid-process to get unstuck.

Traditional software training asks end users to:

Stop what they’re doing

Switch tabs

Open Confluence, Notion, or another Knowledge Base

Search for something specific

Sift through a bunch of results

Realize nothing applies to what they’re trying to do

Open Slack or another chat tool

Ask their question

Pull someone else out of the flow of work

Clarify context and trade screenshots

Give up and say “let’s jump on a call”

Needless to say, this rigamarole takes a ton of time (every time). But it also drains an enormous amount of mental energy. Here's what it's like to ping pong back and forth between instructions and what’s on the page to understand what to do next:

3. No one’s winning, in this scenario

Lastly, we wanted to understand the mechanics of the game (or how software training worked).

Again, we found that the game isn’t working. And if it isn’t working for end users, it also isn’t working for the process experts trying to enable them.

Traditional software training doesn’t:

Empathize with end users being asked to lean into a lot of change

Surface knowledge where and when employees need it most (without switching tabs!)

Make information brainless to digest and easy to apply

Cut down on repetitive questions and retraining requests

Help anyone redirect time and energy towards more meaningful work

Changing the game with Guide Me

With the full scope of the knowledge sharing problem in hand, it became clear that Click-to-Create was destined to become just one feature of what’s now known as the Software Knowledge Layer.

And to bring that solution to life, we needed to build another feature. (👋🏼, Guide Me!)

Guide Me:

Transforms static how-to guides into interactive walkthroughs

Increases self-service by embedding instructions in the tools where people work

Minimizes FAQs by teaching end users how to use software while using it

Drives higher (and more measurable!) process adoption

A quote from Brian Shultz, Tango co-founder and CTO, about using the ideal user experience as a north star.

The ideal user experience always goes back to onboarding. Ours now needed to explain:

1️⃣

️How to make a Tango (with Click-to-Create)

2️⃣

How to follow a Tango (with Guide Me)

...as implicitly as possible. Because “frictionless, fast, and focused” is still the name of the game—and it’s all too easy to clutter up an app interface and slow people down.

Here’s how we used game design principles to flatten the learning curve for end users and make process adoption a no-brainer with Guide Me. 👇🏾

To help end users avoid guesswork and mistakes

⚙️ Mechanic

Instructions are placed on screen.

🕹️ Action/behavior

End users are immediately drawn to the relevant area to perform an action.

🎯 Feeling(s)

Focused, confident.

Purple and white user interface with a View Report button

🕺 What makes the mechanic easy to learn

Similar to Click-to-Create, Guide Me only takes two clicks to understand. End users see a spotlight on the action box with a description during their first guidance experience, teaching them to:

Click the action box to get started (by default, because the only thing they can do is click)
Distinguish between what’s Tango (the action box and tooltip) and what’s the underlying site (everything else on the page)

To help end users avoid distractions

⚙️ Mechanic

Fluid progression through steps.

🕹️ Action/behavior

Users’ eyes are fluidly guided through processes without breaking flow state— resulting in faster execution.

🎯 Feeling(s)

Effortless, empowered, accomplished, focused.

🕺 What makes the mechanic easy to learn

The magic of following the orange box is so simple and self-explanatory that it almost speaks for itself—but it’s worth double clicking on the fluidity of the experience.

Without Guide Me End users have to squint at busy screenshots and do the mental gymnastics of figuring out which action to take for each step.
With Guide Me The highlighted action box quickly catches the eyes of the end user and implicitly teaches them to focus on the next relevant action.

P.S. Want to add context that’s not a click? We’re working on weaving callouts and text instructions into this same fluid experience, so that end users can access and apply even more knowledge without breaking flow state.

To help end users avoid context-switching

⚙️ Mechanic

Tangos are embedded directly on the screen.

🕹️ Action/behavior

End users can start guidance in-context without having to search.

🎯 Feeling(s)

Frictionless, fast, focused.

🕺 What makes the mechanic easy to learn

To teach end users what pinned Tangos are and how they work during onboarding, we invite curiosity by using a glow effect.

When end users hover over the glowing pinned Tango, a tooltip that takes 3-5 seconds to scan explains everything they need to know.

To help end users avoid guesswork and mistakes

⚙️ Mechanic

Instructions are placed on screen.

🕹️ Action/behavior

End users are immediately drawn to the relevant area to perform an action.

🎯 Feeling(s)

Focused, confident.

Purple and white interface with a View Report button

🕺 What makes the mechanic easy to learn

Similar to Click-to-Create, Guide Me only takes two clicks to understand. End users see a spotlight on the action box with a description during their first guidance experience, teaching them to:

Click the action box to get started (by default, because the only thing they can do is click)
Distinguish between what’s Tango (the action box and tooltip) and what’s the underlying site (everything else on the page)

To help end users avoid distractions

⚙️ Mechanic

Fluid progression through steps.

🕹️ Action/behavior

Users’ eyes are fluidly guided through processes without breaking flow state— resulting in faster execution.

🎯 Feeling(s)

Effortless, empowered, accomplished, focused.

🕺 What makes the mechanic easy to learn

The magic of following the orange box is so simple and self-explanatory that it almost speaks for itself—but it’s worth double clicking on the fluidity of the experience.

Without Guide Me End users have to squint at busy screenshots and do the mental gymnastics of figuring out which action to take for each step.
With Guide Me The highlighted action box quickly catches the eyes of the end user and implicitly teaches them to focus on the next relevant action.

To help end users avoid context-switching

⚙️ Mechanic

Tangos are embedded directly on the screen.

🕹️ Action/behavior

End users can start guidance in-context without having to search.

🎯 Feeling(s)

Frictionless, fast, focused.

🕺 What makes the mechanic easy to learn

Dispatches from SEARHC'S ERP team

“Guide Me is so self-service it’s ridiculous.”

Mar 04, 2024

"For our CIO, Guidance sold it. When I told him not only will Tango create our software training, but it'll also make everyone feel like a subject matter expert is sitting next to them and walking them through processes step-by-step...that sold it. Literally."

"A must-have for process experts AND end users."

Mar 22, 2024

"If you're introducing new software, you need Guide Me. It takes away the communication barrier. People don't need to think very hard or even read the steps-they just need to follow them."

Talk to Sales

The bottom line

If you ask us, software should be so user-savvy that no one has to worry about being tech-savvy.

Tango’s game design-inspired UX unlocks faster time-to-value for process experts and their end users. Obsessively tested mechanics (which influence actions taken and feelings felt) make painful knowledge sharing experiences things of the past.

As our product becomes more powerful, stripping complexity away from our onboarding flow and ensuring Tango’s core UX remains easy for everyone to use over the long-term has become an even bigger focus. We have a lot to learn from game designers, who excel at what hardly even registers as enablement. ✨

How Game Design Helps Tango Deliver on Ease of Use

The observation that started it all

A game designer’s framework

The MAF Framework

Where traditional documentation falls down

1. Process experts don’t enjoy the process (of creating documentation)

2. It’s no wonder they feel that way

3. The “game” is actually a dreaded chore

Changing the game with Click-to-Create

Connecting the dots with a delightful and playful UX

The (G2) crowd has spoken

Where traditional software training falls down

1. Traditional software training doesn’t feel employee-friendly

2. Getting unstuck in software requires 34058391 steps

Traditional software training asks end users to:

3. No one’s winning, in this scenario

Changing the game with Guide Me

Dispatches from SEARHC'S ERP team

The bottom line

You may also like:

HubSpot and Tango Team Up To Drive Process Adoption

How SEARHC Rolled Out Workday To 1,400 Employees With Tango Enterprise