PX Engagement Editor
Enhancing User Experience: Redesigning Gainsight PX's Engagement Editor for Improved Usability
Overview
Gainsight PX, with an annual revenue of 13 million, serves as a major platform for product teams. In addition to providing valuable insights into user behaviour through its analytical tools, it enables the creation of in-app engagements for seamless user interaction.
The Engagement Editor which is a pivotal part of PX, helps users to construct, design, and manage these engagements.
Following Gainsight's acquisition of PX, the primary objective was the seamless integration of PX tools into Gainsight’s suite of products. A fundamental aspect of this integration involved revamping the Engagement Editor to enhance its simplicity, user-friendliness, and alignment with Gainsight's design principles.
I undertook the responsibility of reimagining the Engagement Editor, aiming to
- improve its intuitiveness,
- harmonise it with Gainsight's visual identity,
- ensure it caters to customer needs
- and contribute to Gainsight's business objectives.
Role
UI/UX designer
Timeline
July, 2021 - November, 2021
Responsibilities
-
User interviews
-
Competitive Analysis
-
Personas
-
Information Architecture
-
Ideation
-
Low-fidelity wireframes
-
High-fidelity mockups and prototypes
Outcome
-
Effort score doubled (2/5 to 4/5)
-
Adoption rate increased from 40% to 65%
Problems
I started by using the editor to make engagements myself, allowing me to closely evaluate the product.
We also interviewed external customers and internal team members who use the editor to understand their frustrations.
Heuristic Evaluation
Recognition rather than Recall
Some of the icons are not standard which makes them hard to identify.
User Control & Freedom
There is no option to undo an action.
Flexibility & and Efficiency of Use
CSS is needed for a lot of changes and for arranging elements.
User's Frustrations
"Customization is very important, we need the engagements to comply with our product."
“Found out I can edit the text inline but I didn't see any option for custom CSS changes in there”
“Right now, I can only edit the size of an engagement in the editor mode. I'd like to be able to do so when editing in-app."
Summarising Key Painpoints
01.
Inflexible
Layout
Arranging elements on canvas was difficult and frustrating
02.
Non-contextual
Editing options were provided all together out of context
03.
Dependancy on CSS
CSS is needed for a lot of changes and for arranging elements.
04.
Real Estate Issue
While launching the in-app editor, the customer application got pushed down
05.
Limited Capabilities
There were only limited editing capabilities in the in-app editor and no CSS capabilities
After understanding the various pain points and the business goal, I refined the goal of the redesign into three primary themes.
Contextual Editing
Improving the experience of the editor so users can quickly and easily create engagements.
In-app Enhancement
Upgrading the in-app editor to enable and encourage (business goal) users to craft engagements directly within their applications.
Simplified Experience
Eliminating the need for CSS, making the process more straightforward.
Competitor Analysis
I examined how our competitors addressed similar use cases. Following a thorough analysis of their products, including their strengths and weaknesses, I also looked into other template-building products from other domains for inspiration.
Ideation
I collaborated regularly with the product manager, and development team to gauge the feasibility of my ideations. I also had reviews with the design team to refine my solutions.
Solution
Contextual Editing
The editor shows text editing controls as soon as the user clicks on a box containing text.
In-app Enhancement
The steps can be collapsed so that the user can work on a larger area on their application.
Simplified Experience
The user can add a row of single or multiple boxes, as provided by PX, before or after any other row.
Inside each of these boxes, they can add a text, button, or image.
Flow of Editing a Guide Engagement
Outcome
The success of this redesign was dependent on two primary outcomes - reducing the time and effort spent on creating a given engagement and increasing the adoption of the product.
-
Streamlined Editing: We organised options contextually, presenting users with relevant choices based on their tasks. For instance, when editing an image, only image-related options are shown, enhancing intuitive flow.
-
Familiar Iconography: Recognisable icons were integrated, reducing reliance on recall and improving user recognition.
-
User-Friendly Layout: The addition, removal, and layout-setting processes on the canvas were restructured, eliminating frustrations and enhancing user-friendliness.
-
CSS-Free Editing: Most editing capabilities were made CSS-free, simplifying the process.
As a result, the effort score doubled from 2/5 to 4/5, per user surveys.
Additionally, product adoption increased significantly from 40% to 65%, attributed to the introduction of all editing capabilities in the in-app Editor. This approach effectively encouraged more users to engage in creating engagements as now they could create engagements directly on their target applications easily.
My Learnings
-
As an early, large-scale solo project, navigating the complex workflows was initially daunting. However, I soon discovered the effectiveness of breaking down big problems into smaller, manageable parts, enabling me to handle the project more effectively.
-
In my collaborations with the product manager, development team, and stakeholders, aligning everyone's perspectives was challenging due to differing biases. However, prioritizing user needs and leveraging direct user feedback from my research helped us overcome biases and align decisions, replacing assumptions with genuine insights from users.
-
Our beta release of the editor brought out substantial feedback. While the simplified experience was well-received, some features lacked intuitiveness and required a learning curve. To accommodate users, we offered both the new and old editor versions, making it easier to edit existing engagements in the old editor and create new ones in the new editor.