Using the Visual Design Studio vs. the Classic Designer

Overview

This article shows users who are familiar with the Classic (formerly Legacy) Designer how to complete common actions within the Visual Designer. For more users who are comfortable with custom code and wish to add more of their own customizations should continue to use the Classic Designer.

Introduction to the Visual Design Studio

We created the Visual Design Studio to make Pendo’s Guide creation accessible to teams across an organization, regardless of their technical knowledge. Whereas the Classic Designer requires a basic knowledge of coding languages such as HTML and CSS, the Visual Design Studio uses a visual point-and-click interface. This makes building and editing Guides a more intuitive experience.

For a thorough introduction to the Visual Design Studio, refer to the Getting Started article.

Creating a Guide

Creating and editing a Guide is now a simple process with the Visual Design Studio. This video provides a quick overview:

For a more in-depth overview, refer to the Create a Guide article.

Creating a Button

Creating a button in the Classic Designer requires you to manually code it with something like this:

Then, styling your button required additional CSS coding. Creating a button in the Visual Design Studio is much easier. After choosing your desired Layout and launching the Designer, simply click on the blue line that appears between items inside the Guide to open the Building Blocks menu.

In the Building Blocks menu, choose “Button” and begin configuring actions and styling it according to your preferences. You can edit the button text, colors, and size, as well as what action it takes after a user clicks on it. No coding is required.

Tip: Learn more in the Building Blocks article.

Layouts vs. Templates

Layouts are the Visual Design Studio’s form of Templates. Just like Templates, you can create a Layout five general types of Layouts:

Lightbox
Banner
Tooltip
Poll
Walkthrough

This way, Pendo administrators can still create and manage Layouts so users with “Create Guide from Layouts” permission can stay within brand guidelines and update content as needed.

Note: If you already have existing Templates created in the Classic Designer, feel free to keep using them in the Classic Designer.

Tip: Learn more in the Layouts article.

Navigating the Guide Details Page

The Guide Details page for the Classic Designer displays a variety of information. However, in order to edit any of it, you have to open up the Designer. In contrast, the Guide Details page for the Visual Design Studio allows you to get an at-a-glance view of your Guide and make quick changes to it, all without opening up the Designer. Even if your Guide has multiple steps, each with different settings, you can view each step and make edits accordingly.

Tip: For a general introduction to the Visual Studio’s Guide Details page, refer to the Guide Details (Visual Designer) article.

Within the Visual Design Studio’s Guide Details page, you can edit the following:

For more information, refer to the Guide Details - Settings article.

The Visual Design Studio’s Guide Details page also offers a more detailed readout of user interaction and metrics. On one page, you can view:

You can also overlay feature usage above the weekly views chart, allowing you to gain additional insight into how a Guide is affecting a particular feature.

For more information, refer to the Guide Details - Metrics article.

To learn more about the Visual Design Studio, refer to the following articles: