Engagement Controller Application
End-to-end product UX/UI design (2021)
How can I control when my site displays or hide the "message us" button automatically, to improve customer satisfaction and grow my messaging business?
As part of our business strategy, we needed to migrate customers from our old chat technology to the most powerful and asynchronous messaging one. However, many customers shared that some functional gaps of the messaging solution were a blocker for the migration. Engagement Controller was born to solve some of these gaps.
The Problem
Customers wanted to migrate from chat to messaging, since data shows that sites with chats can result in 25% less conversations per hour. However, unlikely chat, LivePerson's web messaging solution doesn't allow for managing and controlling when to show or hide the "message us" button based on agent availability. Showing the button even when no agents were available highly impacted customer satisfaction and productivity.
One large telecom enterprise even hired LP to build a small POC custom app to do just that them. Another one has its own way to do the same internally. We knew we needed to productize this capability as part of the core platform to scale it to all customers.
The Process
This product was designed and launched in two phases:
Phase 1
Part of an internal tool with access restricted to LP account managers only. They would do the setup for our customers.
Phase 2
Then, launch it in production as a self-serve tool within our Conversational Cloud platform.
1- Discover
I took the lead for this new product and I started my research by understanding who were our target personas:
-
phase 1 - Account Manager (Customer Success Manager)
-
phase 2 - Campaign Manager (primary) and Account Manager (secondary)
I talked to users to understand their campaign setup and manage flow in our platform. I analyzed the POC solution from our telecom customer and interviewed users to learn why they were happy with that tool, what could be improved, and what was missing. I also did a Conv. Cloud platform analysis to identify where this new workflow should be positioned amongst our current product and capabilities.
DESIGN CHALLENGE / CONSTRAINTS #1: Where will be the app entry-point?
Based on the persona task flow, it was clear that this new functionality should sit within an area of the platform that was not owned by our team. I created a mockup on how the flow should look like, presented to stakeholders, but unfortunately, the VP of Conv. AI wanted to keep this new app within our own space, so he decided that EC would be a module inside another tool we owned: Conversation Orchestrator.
It resulted in EC being placed based on LP organizational structure over the user flow. It also had to follow Conv. Orchestrator patterns and components for consistency, even if those were not ideal.
Based on feedback, users needed to know when
EC rules were being applied to the campaigns. Click to enlarge as a pdf.
2- Ideate and design
Based on the leanings and constraints, I've put together a user flow for our solution, and identified the main user tasks/Jobs to be done (create, enable, edit and delete rules, start/pause all rules, filter/sort, view documentation). First within our internal tool, then within our customer facing UI. I created mockups, and a high def prototype to show the full journey and UI.
One of the 8 task flows/analysis which included my improvement recommendations
DESIGN CHALLENGE / CONSTRAINTS #2: Re-develop in a different tool/tech stack?
My design needed to be scalable and reusable from phase 1 to phase 2. The two tools used different technology so after brainstorming with PM and Dev lead, we decided that, in order to avoid re-coding, for phase 1 we would use the phase 2 app UI patterns and components (Conv. Orchestrator), and just change the bg color to match the internal tool. Then, we would integrate the functional application into Conv. Orchestrator using iframe.
Phase 1 internal tool design
Phase 2 customer facing design
DESIGN INNOVATION:
Our platform users constantly complained how difficult was to start using our products, so in EC I introduced a new in-product onboarding/first-time user experience (FTE) to improve discoverability in Conv. Orchestrator.
IMPACT: Other products within our platform could benefit from this enhancement, so I shared this new design with the design community, resulting in this becoming an onboarding standard for all our products within the platform moving forward.
Click to enlarge
3- Validate
I planned and managed the usability test for our MVP design using a functional prototype. I did qualitative user testing with 5 participants, which included internal and external users. The UT confirmed that our MVP product is easy to use and offer the minimum capabilities that our users need. But it also confirmed that the features we de-prioritized from v1 to v2, are strongly desirable and expected.
Task success rate
88%
goal 80% or higher
User satisfaction rate
88%
goal 80% or higher
UT learnings:
-
MVP design is a success
-
Users sometimes forget to create opposite rules, which potentially can cause real damage to their business/traffic. As a result, as a fast follow, we added a "create opposite rule automatically" feature to the experience.
-
All users expected and wanted the ability to edit the rule. Editing a rule would cause reporting issues, so after discussing options with PM, we decided to make the UI look like an editing action was happening, while in back-end it was still a delete + new rule being created.
-
Users can create conflicting rules. For v2, I wanted us to be proactive to avoid this problem to happen in the first place and offer real-time validation directly in the UI.
-
The users interviewed didn't mind having to go to the Conv. Orchestrator app to access the Engagement Controller app.
4- Build and release
I worked closely with dev using Jira and 1-on-1 meetings to clarify design questions, review and approve tickets before they call it Complete. I was a reviewer and contributor on the EC documentation, and created the storyboard + content for the EC Overview video. I worked together with the marketing team to get a videographer to work on our video, but at that time, they were not able to support our team, resulting the video to be deprioritized. :(
Engagement Controller live
Click to view Engagement Controller in action
Next step: v2 must-haves
Based on user feedback, the following features were added to the roadmap for v2:
1. Users need real-time validation to avoid creating contradictory and ambiguous rules that will cause EC to fail. It will help to increase user trust on the product.
2. Users need a visual indication in the Campaign Builder App to inform that a engagement or campaign has an active rule applied.
EC with validation - Click to enlarge
Results
We launched with 3 customers, but after 1 year live, we reached 23 enterprise customers, being 65% of them migration from Chat to Web Messaging.
Learnings
Engage marketing team sooner
I successfully applied what I've learned from this project into my following product (Dynamic Actions), allowing me to receive the video production support needed for product launch.
Lead meetings to approve the design with leadership
If it was today, I'd not rely solely on the PM to sell foundational/entry-point decisions to the leadership/stakeholders. I'd make sure I was present in the conversations, I'd bring user journey flows, and data points from personas interviews to push for the best experience based on personas job-to-be-done.
Delegate and let
the experts help
My team did not have a Content UX Designer, so even though I felt comfortable creating all the UI copywriting for EC, I should leverage writers/experts from other teams if they are available.