Empowering SMEs with our redesigned AI Chatbot, Kotae - Part 2: Tackling User Hurdles with Innovative Design
Design
Written by:
Omar Aujani
In Part 1 of our series, we shared our initial deep dive into understanding how users were interacting with Kotae, our AI chatbot designed for small and medium-sized businesses. Through user interviews and usability testing, we uncovered key areas where the experience fell short of expectations, particularly in the initial onboarding and the usability of the dashboard.
This installment focuses on how we took those crucial insights and transformed them into concrete design solutions. Our goal was simple: eliminate friction, enhance intuitiveness, and ultimately create a chatbot experience that meets our users’ needs.
From Pain Points to Powerful Solutions
The data from our research painted a clear picture of where users were struggling. Here’s a closer look at some of the major hurdles we identified and the design innovations we implemented to overcome them:
The Payment Wall Barrier: Building Trust Before Transaction
The Problem: A significant portion of users abandoned the signup process immediately upon encountering the Stripe payment screen – before they had any opportunity to experience the core functionality of Kotae. Observing our users during testing, we noticed signs of frustration. Several users explicitly stated concerns, such as one user who said: "I'd like to try using it before giving my payment information." This feedback underscored a clear need to build trust and demonstrate value before requesting payment.
Our Solution: We hypothesized that by removing this immediate barrier, we could allow users to explore Kotae's capabilities and build confidence in its value, making them more willing to subscribe later. This led to the decision to remove the Stripe payment step from the initial onboarding.
A Confusing and Lengthy Onboarding: Prioritizing a Seamless First Experience
The Problem: Users found the onboarding process to be time-consuming and unintuitive. As they were hesitant to provide payment information without trying Kotae first, we hypothesized that getting them into the product as quickly as possible would allow us to showcase its benefits and create a positive initial impression.
Our Solution: We prioritized creating a frictionless onboarding experience. Referencing successful onboarding flows from various global products, spanning industries like insurance, tax software, and AI, we aimed to adopt a user-centric approach. While the trend in western UX design leans towards getting users into a product rapidly, we recognized the need to cater to an international user base, including those here in Japan. We believed that a streamlined entry would be appreciated universally.
Therefore, we reimagined the onboarding flow. Now, users begin by training and customizing their chatbot before creating an account. Once logged in, a clear, step-by-step tutorial guides them through the remaining essential setup tasks, reducing friction and accelerating their time-to-value.
When beginning the onboarding process, users are now prompted to enter their website and begin training immediately–allowing users to see how Kotae works before making an account.
A tooltip tutorial now greets users upon their first login, guiding them through key setup steps and helping them learn how Kotae works in the process.
Poor Visual Hierarchy: Enhancing Clarity and Intuition
The Problem: Several areas suffered from poor visual organization, hindering usability. For example, the chat history was presented as one long, continuous page. While headers indicated the start and end of conversations, nesting individual messages under these headers made it difficult to follow the flow of dialogue. Similarly, the settings page grouped three distinct and unrelated sections – appearance, training, and installation – onto a single screen because they were all necessary for initial setup. However, once setup was complete, users found it unintuitive to return to this single page to manage these disparate aspects of their chatbot.
The previous Chat History page, which vertically displayed all chat sessions, lacked visual hierarchy and clarity.
Our Solution: We focused on adopting more conventional and intuitive visual patterns. For the chat history, we moved to a conversation UI heavily influenced by familiar messenger applications, making it easier to distinguish between user and bot and follow the chronological order of messages. For the settings page, we recognized the mismatch with users' mental models. While all three sections were crucial, their lack of conceptual relationship suggested a need for separation after the initial setup phase. We began exploring options to reorganize these settings into more logical and contextually relevant areas within the user interface.
The redesigned Chat History employs a standard chat UI, more closely resembling user mental models.
Anticipating Positive Impact
By implementing these design changes, we anticipated several key improvements in the user experience. Removing the upfront payment barrier was expected to significantly increase the number of users who complete the initial signup and begin exploring Kotae's capabilities. The streamlined onboarding process aimed to reduce the time it takes for new users to experience the core value of the chatbot, leading to higher engagement and a lower churn rate. Finally, the improvements to visual hierarchy were intended to enhance the overall usability and satisfaction with the platform, making it easier for users to manage their chatbots and understand their interactions.
In Part 3 of this series, we’ll cover the validation research we did, and what the data says about how the new design compares to the old. Be on the lookout!
SHARE THIS ARTICLE
About Tokyo Techies
Based in Tokyo, Japan, we are a one-stop IT consulting firm offering product development, IT due diligence, and cybersecurity services.
