Pendo

Background

Repeat Guide Display (RGD) is a new feature that allows Pendo customers to set a guide to repeat a certain number of times and expire after someone dismisses it a certain number of times.

‍This feature was created as part of a broader initiative to give guide administrators more control over how their guides activate. By allowing a guide to display based on customer behavior, administrators can worry less about their customers being "spammed" with unnecessary guides, and have a better understanding of what guides work best for their business.

When a user wants to see how one of their guides is working, they can access the Guide Details page, which functions like a dashboard.

The Activation card, located at the bottom left of the dashboard, provides a quick overview of how a guide activates.

When I joined the team, there was no way to tell if RGD was activated in this card. The excitement of Repeat Guide Display was hampered by these issues, leading to me looking into ways to incorporate this important information into a redesigned Activation card.

Process

FIRST ITERATION

At first, I looked into how to incorporate the details under the "How does this guide activate?" heading.

This was a straightforward option that would be easy to implement, but it started to fall apart when it came to testing edge cases.

For example, when more than 2 activation types are used in the same guide, the sentence grows to be too long and complex for users to understand at-a-glance.

With this in mind, I looked at the bottom half of the card to see how I could reorganize the information in a way that's easier to scan.

SECOND ITERATION

My next iteration focused on parsing the information into smaller fragments with corresponding icons.

While this improved readability and gave Repeat Guide Display a dedicated field, it would've been much more intensive to develop.

Additionally, feedback from users showed that they appreciated the sentence-based explanation of the guide's behavior.

Solution

Background

After completing my first project, I wanted to dive deeper into the need for efficient guide management demonstrated by Pendo's customers. Research uncovered concerns from customers about overwhelming their users with guides, prompting some to limit their active guides.

Recognizing this, my team proposed adding categories to guides to give customers more control and smarter guide management. Each category would have predefined rules to add guardrails for what goes in a particular guide.

When creating guides, customers are able to save the visual and stylistic elements as a layout. With a layout, it takes far less time to create a new guide - customers can select the layout to streamline the addition of new guides. However, some issues emerged.

Layouts were identifiable by name only.

There are no other ways for a user to differentiate between layouts.

There was no way to sort or filter between layouts.

Depending on the customer, this could lead to needlessly long lists of layouts.

Customers cannot edit a saved layout.

To make changes, they have to make a duplicate, edit that one, and delete the old one.

With all those limitations, there was no way for customers to properly organize or manage their layouts, extremely limiting the feature's usability. We decided that adding the ability to categorize layouts would be a foundational step in improving this feature and broadening the capabilities of guide categorization.

Process

Customers would see a new field for adding categories, with a description about the feature. They would use a multi-select dropdown to add one or more categories for their layout.

There was also an idea, formed in collaboration with another designer on the team, to give users a way to update an existing layout. Ultimately, we decided to focus on adding categories, and left layout updates for another sprint.

FIRST OPTION

Initially, I opted for a checkbox-based dropdown used in different parts of Engage, Pendo's main product.

This dropdown organizes options with headers for clarity and categorization. When a user picks a category, it moves to a "Selected" section, allowing users to easily view and remove selected categories.

Although the component is easy to understand, I noticed an issue - when a category moves to the "Selected" section, it loses the context for various use cases provided by the headings in the list.
‍
To address this, I explored alternative components that didn't have this drawback.

SECOND OPTION

I then tested out a dropdown with pill-shaped tags, also found throughout Engage. Unlike the first dropdown, selected options stay highlighted in their original position on the list of categories.

When gathering feedback from my team, we realized that the absence of checkboxes might make users unaware that they can choose multiple categories. Before a user selects anything, this dropdown appears to be identical to the single-select dropdown found in Engage.

To address this, I moved forward by combining the styles of both dropdowns into a custom component.

Solution

The final design combines the simplicity of the checkboxes in the first option with the added visibility of the “tags” in the second option.

‍

When the user selects a category…

‍

• It appears "selected" in the list.
• It appears in a new "selected" area at the top of the list, with an option to clear all categories selected.
• It appears as a static tag in the dropdown field, even when the dropdown is closed.

These simultaneous actions allows for clear visibility of what customers have and have not selected, and preserves all the information they need.

‍

I also addressed the appearance of the closed dropdown. When numerous categories are selected, and their names can't fully display, I introduced a numerical truncation system. It displays what fits within the field and indicates the count of additional selected categories.

Outcome