Jun-Aug 2021


Customization of how-to guides for sales teams


Between June and September 2021, I had the opportunity to work with Tango — a B2B SaaS company that's always looking towards the future. Tango's core aim is to simplify the process of creating how-to guides by automatically documenting processes and turning them into interactive step-by-step walkthroughs. They created a Chrome extension that facilitates the onboarding and training process of rapidly growing teams. The plugin enables users to record their mouse clicks, creating shareable how-to guides that streamline the training process for new employees, which is particularly useful in customer support and sales departments. As the Lead Product Designer, my primary role in the project was to improve the user experience and interface over a six-week sprint.

Shaping the Problem

After quickly learning from our customers, I focused on making it easier for Tango's customers to onboard new employees, reducing the repetitive training effort required by managers in fast-growing teams. This was particularly critical for roles with high turnover or rapid expansion, where time and training accuracy are essential.


The journey began with a comprehensive audit of collaborative document space to identify sturdy interactions that would serve our customers well. I took inspiration from both competitors non-traditional models.

Then, I followed by engaging with beta customers for direct insights. This phase was crucial for understanding the current workflows and the potential impact of the product enhancements. Utilizing tools like usabilityhub.com, I conducted quick feedback loops to validate design decisions, complemented by in-depth customer discovery interviews. These efforts provided a rich tapestry of insights that guided the design process.


We believed giving Editors a more flexible and streamlined way to update their how-to guides after taking screenshots would make these guides (aka Tangos) more engaging for the end-user. We'll see more end-users adopting the tangos by adding a table of contents, detailed descriptions, and simple image editing options.

Design System MVP

Collaborating with the engineering team, we iterated on design solutions, improving the editor view, navigation, and the transition between editor and viewer modes. Using Figma and Tailwind CSS, we rapidly prototyped and themed our ideas, ensuring that our designs were visually appealing, highly functional, and user-friendly.

Editor and Viewer modes

Quickly mix up the order of steps in your Tango by grabbing the handles and moving them wherever you like. Just hover over a step, grab the handle, and drag it to rearrange. There is no need to stress keeping track of clicks and steps correctly while recording your screen. This feature lets customers easily tweak how-to guides into a perfect first draft that they can fine-tune as needed.

Onboarding and Activation

Once customers are happy and confident with the how-to document they've created, sharing a Tango becomes a breeze. You can easily send a link to your Tango or embed it directly into various Help Center platforms. Tango handles the formatting to ensure it looks great on your chosen platform. If you need to embed a static version of your Tango, you can export it and cleanly paste it as a moment in time.

Outcomes and Impact

My work resulted in a significantly enhanced user interface for creating, editing, and sharing workflows. I improved navigation and content organization within the app, making it more intuitive for users to manage their documents. The project concluded with a marked increase in the creation and sharing of tangos, signaling a higher engagement and perceived value of the product among users. Feedback from the client and users was overwhelmingly positive, underscoring flexibility in the editing workflows.

A highlight was introducing a sharing and export feature, simplifying the integration of workflows into existing tools and platforms. Embedding how-to guides enabled customers to work with whatever tools they preferred. Making distribution "more open" accelerated Tango's growth by removing barriers to viewing the how-to guides. Subsequently, we observed a notable increase in the adoption of embedding features on a week-to-week basis, surpassing other sharing methods.


This project has demonstrated the significance of rapid feedback with tools like Lyssna in the early stages of development. To enhance Tango's value proposition and make its how-to guides more engaging, deeper integration with existing tools and Help Center platforms is necessary. As AI continues to advance within the Tango platform, editing a document will move beyond just a cursory first draft and closer to a finished document.