AI-Powered Chatbots
Building chatbots that convert website visitors into pipeline
Role
Associate Product Designer
Context
Scope
Team
1 Designer (me!)
1 Design Manager
2 Engineering Managers
4 Engineers
2 Product Managers
Salesloft is a B2B SaaS company that operates as an industry leader in AI revenue orchestration. I worked on the Buyer Experience team on Drift. In order to maximize customer retention and improve product performance and efficiency, Drift/Salesloft needed to invest in next-generation products and AI capabilities that could enhance its buyer engagement platform.
At Drift, there’s been a long history of the customer success managers (CSMs) and consultants feeling left out of the product process, which I found strange, as they are the ones who are doing the most interaction with Drift users. I wanted to make sure that I could help close that rift and build a stronger relationship with them on behalf of the product org. Wherever relevant, I try to include CSMs and consultants in conversations surrounding product decisions and design work.
[Projected] Impact
• Migrate 100% of customers in 4 months
• Reduce customer support inquires by 35%
• Increased customer AI adoption by 80+%
Timeline
Mar 2025 - Present
I worked on customer migration efforts towards a new and enhanced chatbot, which included giving a visual refresh on the old chatbot, consolidating chatbot settings, and expanding playbook template offerings.
I worked on an agile team as the sole designer for these projects. As a designer, I worked with project managers and engineers to scope, validate, and ship these ideas, while also obtaining feedback throughout from other designers and relevant groups.
Chatbot UI Improvements
(Old) Chatbot
(New) Chatbot
To offer customers a chatbot with faster response times and better fluidity and functionality, a significant overhaul of back-end work had to be implemented to the old chatbot. With old, non-AI chatbots, conversations were strict and structured. As a site visitor, you are given only a few options to respond with; if those options aren’t what you’re looking for, you’re essentially stuck. With AI chatbots, conversations are fluid and ever-changing; site visitors have much more autonomy in their conversations, with conversation flows being much more open-ended. This new chatbot incorporates better AI and LLMs that can better support, deflect, and qualify customer conversations.
With a new and improved chatbot, we saw an opportunity to also improve the design and UI for the chatbot, giving the chatbot a visual refresh that more closely aligned with an “enhanced” chatbot.
Many of the visual UI updates made involved updating the look and feel of the chatbot, along with accounting for designs for some added features and configurations. I contributed to the redesign of the chatbot and facilitated the engineering handoff. We are currently working on migrating all customers from the old chatbot to this new chatbot.
Settings IA
Problem
Approach
Solution
Settings within Drift were previously a difficult experience. Users struggled to efficiently locate specific chatbot and widget-related settings within Drift, leading to frustration and increased support inquiries. Settings in Drift were fragmented and inconsistently categorized across 3+ different pages. Users faced mental overhead trying to recall or guess which section contains the desired setting, often navigating through multiple irrelevant pages.
Ideally, users should be able to quickly and confidently configure or update configurations for any setting related to their Drift chatbot and widget, without unnecessary searching or confusion. They want to feel efficient and in control of their Drift instance. I worked on restructuring, simplifying, and condensing the settings information architecture to better help users navigate their settings across the platform.
GUIDING PRINCIPLES
I knew I needed to design something that would be scalable and fit within the Drift/Salesloft ecosystem. I used these guiding principles towards my redesign:
Simplicity: Users need a straightforward way to manage settings to save time and reduce frustration.
Efficiency: Users should not have to guess where a setting might be located across different sections.
This effort required compiling the settings across the platform, sorting them into relevant groups, then creating bucketing titles and text descriptors.
ITERATIONS
Some of the biggest challenges that stemmed from this initiative included thinking through the navigational aspect of settings (i.e. how do I get from one setting to the next?) as well as how users would make configuration to these settings (i.e. how do I edit these settings?).
Toggling
This initially seemed to be the best option as it was consistent with how settings were previously managed in Drift. Toggle actions in a singular page were easy to see and configure.
However, after further discussions with my PM, we needed to account for more settings beyond what was initially scoped out. Incorporating these settings would make scrolling and identification a cumbersome process.
Accordion + Toggling
Accordions were great at condensing all the settings within a page. Users could easily scan through the settings categories and expand the accordion to make further configurations. With the added settings, icons were removed to reduce visual clutter.
Despite this, I realized that the newly added settings were not all toggleable actions. Some settings required deeper configuration and more contextual information that simply would not fit into an accordion container card.
Modals
While modals provided a more seamless drill-down experience, for settings that required more contextual information, modals weren’t the best option in displaying this information. I realized some settings would need to redirect users to a new tab to fit this information.
VALIDATION
As this was a large undertaking that would effectively be restructing the way settings are managed within Drift, I spoke with consultants and CSMs to:
Test whether the proposed IA changes would negatively impact discovery
Identify any problems that may arise from relocating settings
Determine if the proposed new groupings were intuitive
Doing this research proved to be instrumental, as some of the changes proposed were noted to have potential negative implications if implemented. In particular, the need to differentiate between AI settings and general settings was highlighted, and the distinction between one-and-done settings (settings that were essential to setup, but never really adjusted after) and core settings (settings that settings that may often require further modification after setup) needed to be accounted for.
The new settings page consolidates the previously fragmented experience of setting configuration. Solutions were continuously validated with customers/CSMs throughout the design process.
⛏️ Consolidation through drill-downs
As there were a multitude of different settings within Drift, creating a singular standardized page that hosts all settings allows for a simple way to view, approach, and configure settings. Clear labeling, descriptive text, and intuitive grouping creates easily identifiable “buckets” of settings that a user can easily drill down into to make configurations.
👁️ At-a-glance configuration indications
To account for the wide range of settings being added all on one page, indications for whether a setting has been configured or not allow for users to see the state of their settings. This helps break down the types of settings a user has edited, enabling them to cross-reference or double-check whether a particular setting needs configuration.
Drilling down into the settings by clicking the “Edit” button navigates the user to a new tabbed view with the specific settings outlined through the configuration indications. Below is an example of a group of settings that can be toggled on or off.
Some settings are inherently linked to each other. In these instances, an accordion is used to group these settings together. Expanding this accordion reveals these settings.
With settings requiring more contextual information, this drill-down pattern is further utilized. This type of configuration has the advantage of giving users a clear way to see the contextual information needed.
Playbook Templates
WHAT ARE PLAYBOOKS?
Playbooks can be thought of as the framework for chatbots. They are like a decision tree that determines how the chatbot should respond to or route conversations. They allow users to create pre-defined sequences of messages and actions. Playbooks are built using “nodes,” which are the building blocks that create a playbook. Nodes consist of categories such as “message,” “question,” “routing to conversations,” and “booking a meeting.”
Drift currently has a limited number of playbook templates customers can use. These templates are preconfigured with some nodes and pathways that serve as a starting point for users building their chatbot.
Supporting the transition of the enhanced chatbot also meant a lot of work had to be done to address the playbook templates that served as the frameworks for these chatbots. I worked on expanding and improving the playbook template offerings to reach feature parity with the chatbot’s expanded functionalities.
✨ AI Playbook Templates
While Drift offered some playbook templates that help users get their chatbot setup, none of the given templates utilized any AI nodes. These are nodes that utilize AI skills such as AI-generated chatbot responses and AI lead qualification for site visitor routing. To further adopt customer usage of AI and the usage of the the new AI-enhanced chatbot, we sought to create templates that utilized these AI nodes.
Incorporating AI nodes into playbooks requires a different subset of rules compared to other nodes within the playbook builder. I created a template that adhered to these rules while also being broad enough so that different customers could gain value in using these generalized and expandable templates.
Upon building this AI playbook template, I spoke with CSMs and consultants to verify that these AI playbook templates would be a worthwhile addition that would be helpful to customers. Before its release, I helped train the CSMs and consultants on these new playbooks so they could help train customers.
🔗 Conversational Landing Page (CLP) Templates
Conversational Landing Pages (CLPs) extend chatbot playbooks beyond the chatbot by allowing marketers to deliver conversational experiences through a standalone URL. They are one of the most frequently used chatbots by customers. However, CLPs were constrained by several factors that lead to stalled adoption and lost pipeline opportunities.
LIMITATION #1
Limited styling options
Configuring landing pages to match a brand’s guidelines was difficult for marketers due to the constrained styling limitations.
LIMITATION #3
Narrow content support
CLPs only offered the option to upload either no content or PDF uploads. These limitations made resource sharing restrictive.
Redesigning CLPs involved updating the CLP chatbot to the new chatbot, considering how mobile rendering would look for split views of marketing uploads and the chatbot, as well as thinking through what styling and content improvements should be added or removed.
Mobile rendering issues
Mobile support for CLPs leaves little to be desired. Interacting with the chatbot and viewing marketing content alongside it was difficult to do.
LIMITATION #2