Visual Design Studio
Lead Product Designer
November 2021 - January 2023
Product Design, UX, Research, Illustration
Pendo's first guidance tool required a strong understanding of code to properly target and deploy guides.
Visual Design Studio was created as a no-code upgrade to this product, but fell short in a few key areas due to technical limitations. I spent several months exploring how we could transform it further to meet the expectation's of modern design software.
Business Goals
Provide data backed insights on the ideal experience coupled with recommendations for roadmap and architecture changes to successfully build this work.
Success Metrics
Positive scores in our UMUX-LITE survey amongst internal Pendo users, power users and new customers based on our assumptions.
The Mighty Team
Daniel Hamilton
Kelsey Hughes
Caleb Holloway
Amit Vakrat
Jay Wyche
Alona Sanbira
I embarked on this research and design effort to prove an architecture shift was needed to unlock the best experience possible for our customers.
Some key challenges we faced:
Confusing UI
Lack of hierarchy in UI, combined with confusing workflows and mixed settings made guide building frustrating for customers.
Churn Risk
Roughly 25% of ARR was tied to users actively managing guides in our older, classic designer.
Not a true no-code solution
Custom code blocks were still being used extensively by customers to circumvent feature limitations.
Research
I started by auditing the designer and its various settings, grouping them by function.
We worked with customers and internal users digging into our feature requests to identify core areas to improve on.
NPS Data
Some examples of detractor NPS responses specific to Visual Design Studio. These were some of the sentiments we hoped to change through this work.
Lack of Flexibility
"Minor flexibility with design elements, lack of tools for design independent of code, major dependency on only code for visual enhancements of tooltips, etc."
Not User Friendly
"It’s not user-friendly, not even a little bit. I hate working with Pendo. Sorry :("
Redundancies
"In-app guide functionality was not usable for my team. Pendo interface navigation has a lot of redundancies."
Card Sort
We tested internal Pendo employees as well as a select group of new and seasoned customers.
Ideal Workflow: Each user was presented with a pre-defined set of actions and asked to place them in the order they’d typically take when approaching building a guide.
Groupings: We grouped these actions into categories. Comparing participant responses, we could glean patterns to the ‘average’ approach one would take.
Design Sprint
Since the studio was such an integral part of our product across all of Pendo, we gathered the entire design team to spend two days exploring how we might improve the overall experience. Using data from the card sort, user interviews and NPS data we got to work reimagining the guide building experience.
Assumptions
We identified three core assumptions that could significantly improve the Visual Design Studio experience through workshops, customer calls, and NPS data.
Separate Styles from Settings: Style controls were mixed in with unrelated settings, making it difficult to find and remember where key controls were, resulting in a slower guide building process.
Quick Format Bar: Many settings and controls were managed through a floating UI element called the "UFO" which frequently hindered editing and deviated from typical content editing patterns.
Enable Multi-Column Layouts: The editor lacked the basic ability to create side-by-side columns in guides, requiring the use of custom code. Customers could only place blocks above or below one another. This feature would provide greater flexibility for more interesting layouts.
Explorations
I spent several months refining ideas with customers and internal coworkers, as well as the executive team. This work continued to unfold and receive positive traction, resulting in constructing a high-fidelity prototype for testing our assumptions.
At the time, we were also expanding our design system and applying a new series of styles to our growth product, Pendo Adopt. I used this as an opportunity to test aesthetic preferences of users as well.
Prototype
All of this work cumulated in a massive Figma prototype to be shared with our customers, engineering and internal customer success teams.
Segment: We deployed a Pendo guide (dogfooding for the win!) to new and seasoned customers, all with a range of sentiment towards VDS to find willing participants to test our assumptions.
UMUX Lite: My PM partner and I used the UMUX Lite methodology to capture overall feeling towards these proposed improvements.
High Fidelity Prototyping: I was concurrently improving Pendo's overall visual aesthetic with the work being done in the design system efforts. I used this opportunity to gather visual feedback from customers as well.
Outcomes
Our hard work paid off. Overall, customer sentiment was glowingly positive and this work helped inform and shape key roadmap discussions for Pendo’s largest product offering.
This project also proved to be an excellent partnership between engineering and product leads, leading to innovative feature development in the following quarter.
Feedback
Customer feedback on the prototype.