Project Overview
Problem
Today, SuccessBLOC content is scattered in different tabs across the app and it is not clear to users what a SuccessBLOC actually does. This negatively impacts new user activation, product adoption, deal win rates, and free-to-paid conversions.
Solution
Give users a simple and visual way to design, organize, and manage all of their customer engagements, in a way that makes it easy for everyone within their organization to understand.
My Role
Lead and solo Designer
Team
Nate - PM
Anton - Engineering Team Leader
Denis - Engineer
Artem - Engineer
Impact
The Canvas received a 4.4 Score on the CSAT
Customers requested more related features to enhance their experience
I created a fresh look and feel to a new section in the B2B, which impacted the design of upcoming features
What is a SuccessBLOC
Totango is organized around SuccessBLOCs - a modular concept in customer success, allowing users to focus and manage individually each step of the customer journey.
Each SuccessBLOC module is chosen by the business to meet specific customer success goals. For example: Customers at Risk, Digital Onboarding, Convert Freemiums. The SuccessBLOC contains predefined email campaigns and automations (SuccessPlays) that help users focus on the segments of customers that are being impacted by the SuccessBLOC.
Discovery
Persona
The main persona of the Totango platform is a Customer Success Manager of a SMB or Enterprise organization. Their goals are to collaborate successfully as a Customer Success team and manage their tasks and customers in an efficient way.
User Goals
Understanding and processing complex customer engagement strategies quickly
Quickly activating the SuccessBLOC items
Collaborating easily and sharing the customer journey with stakeholders
From Visual Concept to Product
When I joined the project, there was a visual concept, created by Totango’s Marketing Designer, who was filling in until I joined as the leading Product Designer for this project.
The concept that was chosen as the solution to visualize the SuccessBLOC is Kanban. We decided to add a new tab, called “Canvas”, that contained all the Campaigns and SuccessPlays of the SuccessBLOC.
Preliminary Design Changes & Usability Testing
When analyzing the visual concept, I identified a few potential problems, some related to product definition and some to usability and information hierarchy. We decided to conduct usability testings to get confirmation to my speculations.
Kanban research
During my research I explored other products that suggest a Kanban solution. I went into the details of component hierarchy, font sizes, image sizes, icons, labels, scrolling, columns width and more.
Status Design
Insights:
Users don’t understand that the colorful circle in the bottom is the status of the card
The current color code is different than the existing one
The status is an important element and is not prominent enough in the card’s hierarchy
Design Decisions:
The status will be represented by a label, like it is in other area of the app
New colors were chosen for the labels and their design will apply all across the platform
The level of the status in the card's visual hierarchy remains the same
SuccessPlay Card Redesign
SuccessPlays are an automatically triggered set of tasks that improve team workflows so that CSMs are focused on the meaningful activities at the right time.
Insights:
It is difficult to distinguish between the SuccessPlay and Campaign cards
The value users get from the SuccessPlay cards is intangible
The cards are long and clunky, and take too much vertical space
Design Evolution & Decisions:
The content of the SuccessPlay is valuable for the user, not the amount or type
The structure of the card was changed to be visually different than the Campaign card
The content is limited to show a maximum of 2 automations, which is enough to give a good indication to the content
Segmentation Concept & Design
One of the biggest challenges to crack was presenting the segments of the cards.
Segments are one of Totango's biggest strengths in the market. They allow users to create very specific and detailed group of users or accounts and target them based on different types of triggers.
Insights:
The design wasn’t feasible - the segment is not linked to a Campaign or a SuccessPlay
There is no "name" for a Segment, it is comprised of multiple filters
There are many color codes in the app and adding another one creates confusion
Design Decisions:
Using the existing design of the segments
Design Evolution
Dynamic Status
At this point, we were approaching the deadline, and started to collect internal feedback about the Canvas. The main point that came up was that the journey visualization was very powerful, but the Call to Action was not strong enough.
One of our main goals when defining the Canvas was to increase activation by creating a quick and convenient way to Enable all Campaigns and SuccessPlays after downloading a SuccessBloc.
We changed our approach of Enabling the Cards, and transformed the static Status label to a dynamic label. Users can now change the status from the label itself. This very small and simple change made all the difference.
Skeleton Experience
While working on the Canvas, we identified another important use case - creating a
"wireframe" for the Journey quicky.
Final Design
Release and Reception
4.4 Score on the Canvas CSAT
Feedback was highly positive, users were satisfied and requests for new Canvas-related features and adjustments started to flow in.
“It's easy to create streams, drag cards and provide an overview of active SP, plays for CSMs, and campaigns to other stakeholders.”
Linda, Schneider Electric
“Very easy to use, drag and drop and be able to double down on what automation is working or not. Game changer.”
Monique, Autodesk
Feedback Conclusions & Next Steps
Users are desperate to share a live version of the Canvas (Not just an image)
The Segments give no real value and can even create confusion
Users want the ability to view different flows within the SuccessBlock
Next Steps
• Allowing bulk actions
• Adding labels
