Intro

This project aimed to design a customizable AI-powered website chat widget for small and medium-sized businesses (SMBs) integrated with our Inbox messaging software. The primary goal was to enhance SMB websites by enabling the widget to capture leads, engage visitors, and improve conversion rates. The chat widget would be tailored to each business, providing a more personalized customer experience by using AI to automate responses and reduce the burden on customer support.

Challenge

The challenge was to create a website chat widget that seamlessly integrated with our existing Inbox messaging platform while also achieving feature parity with Broadly, a company we had recently acquired. The design needed to incorporate AI-powered tools to automate conversations, capture leads, and qualify prospects based on each SMB’s unique business needs. Additionally, we needed to allow for human intervention when necessary and provide transparency to the customer. At the same time, we had to ensure a smooth migration of Broadly’s users into our platform, all while strengthening the overall functionality and robustness of our Inbox product.

My impact

As the lead product designer on this project, I collaborated closely with our senior product manager, developers, and engineers to design a seamless web chat product that integrated with our existing Inbox messaging platform. My primary focus was on creating a user-friendly chat widget and configuration page that could be easily installed on SMB websites while also translating the Inbox messaging UI into an intuitive, standalone chat experience. I also helped bring a user perspective when we were developing the AI prompts to ensure it adequately responded in an expected way.

Process

User interviews

Vendasta is a white-label company which means I am unable to interview our small to medium-sized business (SMB) user-base, however I was able to work with one of our partner brands to better understand our SMB users. I interviewed their Onboarding Success team and shadowed customer onboarding calls. The repeating patterns for SMB users that emerged were about trust, time, and ease of use.

Trust in digital products is crucial for businesses. It involves security, privacy, reliability, and portraying a positive image to customers.

Time is often a significant barrier for small business owners, and managing multiple tasks can be overwhelming, especially when it comes to technical know-how, learning something new, and setting up and understanding the value of a new product.

Ease, like time, is crucial for learning and setting up our software. We must consider ease during onboarding and teaching users to ensure our software is user-friendly and valuable to SMBs, reducing churn.

User journey

To gain a deeper understanding of the Broadly customer base and their expectations, I developed a detailed journey map of their existing chat widget. By mapping out the user flow, I was able to identify where feature parity was critical and where enhancements could improve the overall experience. This process not only informed our design decisions but also ensured a smoother transition for Broadly’s users when migrating to our platform.

Competitor analysis

What surprised me was how confusing and technical many of the website chatbots were to set up. Between decision trees, lengthy Q&A forms, and the complexity of embedding them onto websites, users were expected to understand a lot about their own business and handle technical hurdles. Even the simplest chatbots lacked flexibility, offering minimal customization or rigid rules around lead qualification, while more advanced options required significant time and technical expertise for setup, and still lacked intuitive design or smart AI integration.

This highlighted a key opportunity for us to differentiate our chat widget by simplifying the setup process and making it more user-friendly. By focusing on ease of use, automation, and eliminating the need for extensive technical knowledge, we aimed to create a tool that seamlessly integrated into SMBs’ operations, with smart features that could be customized without overwhelming the user.

Design considerations

In designing the Web Chat Widget, the focus was on creating a seamless user experience that balanced functionality and ease of use. The goal was to ensure effortless integration for SMBs while maintaining flexibility for more advanced businesses. This required careful consideration of user flows, customization options, and AI interaction. The widget was designed to be visually cohesive with our existing Inbox interface and featured custom AI knowledge and lead qualification. We continued to iterate based on user feedback, evolving the product with updates like more robust AI capabilities and customizable language settings to enhance the widget’s adaptability and appeal across diverse businesses.

Key components

Web Chat Widget: A small messaging widget Installed on SMB websites for customer communication, leveraging AI for automated responses tailored to the business.

Settings Card: A simplified card that directs users to set up and customize the web chat widget.

Configuration Page: Allows users to customize the web chat widget and provides installation instructions.

Inbox Discovery: When users are new to Inbox messaging, on first landing they will see an empty state graphic that has catered actions based on what the user needs to set up to get the best functionality from the app. Then once it is all set up, there is a new icon added to conversations that have come in from the website chat widget.

Final design

Project details

Milestone 1 (MVP): The initial release focussed on capturing the end customer’s lead information when interacting with the web chat. We developed a prompt that worked well with our software integrations and the types of businesses installing the web chat widget. We also integrated the ability to add custom knowledge for the AI to answer questions specific to the business.

Milestone 2: The project’s future requirements are to be a shared service within the Vendasta software ecosystem, accessible to Vendasta partners, vendors, and SMBs. The design aims to meet the needs of small businesses, but it can also adjust to accommodate more complex businesses in the future.

Alongside some major updates:

• Qualifying leads before visibility in the SMB’s Inbox.
• Introduce a more robust AI Agent and customization abilities.
• More visual customization and adding an avatar.
• Language selection and more customization options.
• Managing multiple widgets per client account.

Results

The AI-powered Web Chat Widget quickly became one of Vendasta’s fastest-growing products, playing a pivotal role in driving the adoption of Inbox Pro which was required to use the new Web Chat Widget. By seamlessly integrating lead capture and messaging capabilities, the widget transformed user engagement on SMB websites, streamlining the process from inquiry to conversion.

Retention rate improvement: The introduction of the Web Chat Widget led to a significant boost in user engagement, with Inbox Pro achieving a 40% weekly retention rate of new users actively sending messages. This retention rate outpaced the overall business app’s retention (at 2%), highlighting the power of AI-driven automation in sustaining user activity.

User activation & adoption: In the first 6 months post product launch the new user activation of Inbox Pro increased by 3-4% every sprint (2-week cycles), showing consistent growth. The intuitive design, combined with AI assistance, reduced setup friction and made it easier for users to implement the chat widget and begin capturing leads immediately.

These metrics reflect the success of the web chat design, not only in enhancing user experience but also on driving substantial business growth for Vendasta.

Reflection & key learnings

User simplicity in complex products: through competitor analysis, I saw firsthand how complicated and technical chatbots can be for SMBs to implement. This reinforced my belief that simplifying the user setup process while maintaining functionality is key to driving adoption. Our focus on ease-of-use, combined with AI-driven customization, proved crucial in delivering a product that users not only adopted but actively engaged with.

Iterative development: In the initial MVP release, we prioritized simplicity and lead capture functionality, which allowed us to launch quickly and address immediate business needs. The MVP successfully integrated with existing software and provided SMBs the ability to customize AI responses, making it a valuable tool for capturing customer leads. However, the project didn’t stop there. The future requirements aimed to elevate the web chat into a shared service across Vendasta’s ecosystem, meaning we had to scale the design to cater to a wider range of users—partners, vendors, and businesses of all sizes. This shift required additional iterations to support more complex use cases while maintaining ease of use for SMBs.

This iterative approach taught me the value of launching fast, learning from real-world feedback, and constantly refining the product to better serve users. Designing a product that could evolve from an MVP to a robust, scalable service taught me the importance of adaptability, foresight, and collaboration in product design.

Ⓒ Amanda Nogier