Pendo logo on left with a flowchart of labeled steps and buttons on the right against a pink background.

Pendo step map & guide branching

Pendo

Product design & UX research

Pendo's guide authoring visualization was entirely linear, which didn’t account for the dynamic logic of a Pendo Guide. I designed the Step Map and Guide Branching features to solve this, giving guide authors a visual way to understand, build, and manage non-linear guide flows for the first time.

2024 - 2025
Date
Product designer, UX research
Role

Understanding the problem

Why branching, & why now

Pendo's Salesforce data made the case clearly: the absence of native guide branching was cited as a deal-breaker, resulting in $1.3M in lost opportunities and a contributing challenge in $4.4M more.

A customer ideas test with over 150 respondents showed a consistent pattern of enterprise accounts at companies like ADP, Amazon, Thomson Reuters, and McGraw-Hill all described the same workarounds: duplicated guides, fragile custom JavaScript, and skip-step hacks to cobble together branching behavior that should have been native.

Flowchart showing conditional split steps for dashboard creation process with paths for found, not found, and a URL link.
The finalized step map visualization showcasing the conditional split logic of a step.

The competitive landscape

Former WalkMe customers were especially frustrated. Several customers cited branching guides as a feature they lost when switching to Pendo, creating a direct competitive gap.

The core job to be done was clear: guide authors needed to create experiences that respond to who the user is and what's true about their context without writing code.

User interface of a web app showing a step navigation bar with thumbnails labeled Activation, Step 1 through Step 6, and an option to add a step, with a sidebar of icons on the left and a top bar containing exit, save, and other controls.
The dreaded film strip: Pendo's previous guide authoring view. No way to see the full flow logic. No way to visualize any step connections.

Discovery & research

The process

Running discovery across multiple customer segments

I ran a series of discovery calls to pressure-test the problem and understand what a good solution would actually need to do. The most consistent finding was that customers weren't just asking for branching logic.

They needed visibility into their guide logic. As guides grew more complex with things like soft branching logic and conditional steps, the linear film strip made it nearly impossible to understand what a guide actually did, let alone edit it confidently.

Three side-by-side user interface wireframes showing progression from original state with step tabs and a behavior panel, to a horizontal layout with steps on the right, and a horizontal layout with a map view displaying step flow connections with buttons labeled 'Next' and 'Skip'.
Initial ideation that showcased the need for a new mapping style when seeing how guides were already connected.

The main job to be done

It was good to get some solid understanding of the job that needed to be done. The branching logic was half the problem. The visualization of that logic was the other half.

Working with engineering

I made a deliberate choice to bring engineers into these discovery sessions rather than relay findings secondhand. This helped significantly cut down the feedback cycle while building a strong sense of team ownership of this project. The team could hear constraints and edge cases directly, ideate on technical feasibility in the room, and move faster without a game of telephone between design, product, and engineering.

Summary of Findings with six key points on guide preferences, content management challenges, metric limitations, benefits of dynamic start points, UI discoverability, and app tagging consistency.
Here is a share-out slide that I put together for leadership with direct links to customer quotes from these usability and discovery calls.

Visualizing & building guide logic

Building 2 features together

The solution took shape as two interconnected features:

The step map

A full-screen node-based visualization of a guide's complete flow. Every step and button action is represented as a node, with arrows showing how the guide moves between them. Authors can click any node to view or edit that step without leaving the map.

Guide branching (element exists on page)

A conditional split that can be inserted anywhere in a guide flow. Authors select a tagged element, and the guide branches into an if/else path based on whether that element is present on the page for a specific viewer. No code required.

These weren't two separate projects. Without branching, a step map has limited value. Without a step map, branching creates flows that are impossible to reason about. The two had to ship together to actually solve the problem.

Diagram showing action nodes with current and suggested icons, connections between steps, button actions, and layout measurements in a guide branching flow.
This is the fundamental structure of the Guides step map. This artifact was part of the dev handoff to help understand this unique map.
Flowchart showing conditional split steps for dashboard creation process with paths for found, not found, and a URL link.
The editing experience for a branching guide making use of the new step map visualizations

Advocating for design decisions

Designing similar features

Our most significant challenge was an internal one. Another team at Pendo was building a similar step map visualization for Orchestrate Journeys, and leadership pushed for the two to share a visual language. The pressure to unify made sense: one consistent design pattern, less user confusion.

Flowchart diagram showing a customer journey map with steps including welcome guide, conditional splits based on dashboard creation, guides, emails, and exits.Flowchart showing a three-step dashboard creation feedback process with options to dismiss guide, check dashboard creation, learn more, try again, continue, and thank for response.
Journeys map
Guides map
Use the slider to compare the Journeys map and the Guides step map.

Justifying the difference

The two features look similar but function fundamentally differently. Journeys are always forward-moving, which allows them to follow a strict tree structure. Guides are not. A guide can loop back to a previous step, branch and revisit steps, or take a user in directions that a basic tree diagram simply can't represent accurately.

Building the Guides step map to look like the Journeys map would have meant shipping a visualization that misrepresented how guides actually work. This had a big learning issue because it meant teaching users a mental model that would break the moment they built anything that let users go back to a previous step, let alone one that jumps to a step further along in a guide.

Detailed complexity audit diagram explaining time representation in map layouts, guide complexity levels, journey map exploration, and interaction designs with flowcharts and annotations.
This is a summary of some of the considerations we had regarding how both models had to be different to support the functionality of a guide. I'd be happy to discuss this in detail! It's a huge one.
Summary of findings from calls with internal IGST users comparing vertical and horizontal map formats for understanding guide steps, highlighting ease of reading, editing issues in horizontal format, and trouble reading previous steps.
Here is the summary of the audit findings that we created to help get leadership bought in to the technical reality.

Usability testing before GA launch

Validating before launch

Before the GA launch, I ran usability testing sessions with guide authors to stress-test the designs. Key findings shaped the final experience:

Customers wanted condition visibility at a glance

They needed to see what triggers which branch without clicking into each node individually.

At scale, legibility was a real concern

Complex guides created dense maps, and expand/collapse behavior for large branching structures became a priority conversation

The side blade felt familiar and intuitive

It matched existing Pendo UI patterns, reducing the learning curve.

User interface showing a step map for onboarding with steps and button actions including 'Welcome and Select Team,' 'Design Onboarding,' and choices like 'Design,' 'Marketing,' and 'Engineering.'Step map interface showing dashboard creation feedback with conditional split for checking dashboard creation and branching based on element found or not.
Early iterations
Finalized design
Use the slider to compare original designs with ones created after rounds of usability testing

The outcome

The step map in the wild

We initially shipped to internal Pendozers first. As of writing this, the Step Map has seen 2,483 "view-step-map" events over a two-week window and 1,624 monthly users, half a year after its GA launch — a strong signal of sustained adoption.

Average time to first use ranged from 1.8 to 3.2 days amongst frequent guide builders, indicating that users discovered and used the feature quickly after first encountering it.

Using Pendo for analytics

The dashboard analytics told us a lot. The most common tracked feature click after opening the Step Map was interacting with a Guide step node, followed by using the VDS action bar entry point. This told me that users were using the map to navigate directly to the steps they wanted to edit and reopening the map later. This was one of the workflows the research pointed to and we wanted to make sure we designed for.

Dashboard showing general usage metrics for visitors and accounts viewing a step map, step map openings over time line chart, time to first use box plot for various events, and user journey flow diagram mapping clicks after opening the guide's step map.
A snapshot of the Pendo dashboard we created to monitor feature adoption as of April 29th, 2026.

Customer feedback

Customer feedback after launch confirmed both the value and the direction for what comes next:

"Instead of the text step one, step two, step three — if we could have a preview of the guide."
"It would be great to allow copy/paste of step maps to download into a Miro board or other planning board."
"Those notes directly on the step that need to be updated instead of back and forth between those different mediums."

The feedback shows something important. Customers started using the Step Map as a planning and collaboration tool, not just for visualization. This suggests the feature fits more naturally into their workflow than we first thought.

Reflecting on the step map & branching

Going forward

This project is one of the most complex things I've worked on. Sure, the interactions were technically difficult, but the problem also had so many layers: customer jobs to be done, internal organizational dynamics, competitive pressure, and the challenge of designing a new mental model inside an existing product.

The most important thing I learned is that getting to the right solution often means over-indexing on the work that doesn't show up in the final designs. The discovery calls that reframed the problem, the engineering sessions that compressed the feedback cycle, the internal advocacy that kept the Step Map accurate, etc. All of that shaped the outcome as much as the wireframes.

Branching is live. The Step Map is live. We managed to move the needle on the problem we started with: guide creators can now see and control complex flows they never could before.

Let's talk some more

I'd love to walk you through my process and talk through decisions. If something in this case study caught your eye, I'd love to chat.