Chatbots on websites are slowly becoming the primary channel for customer service these days. They were meant to replaced costly human resources to answer to website visitors' inquiries and requests at any time of the day.
However, businesses have quickly discovered the limitations to the chatbots currently on the market, that visitors that landed on their websites have find the bots unable to understand them, thus leaving needs unmet, questions unanswered, eventually leading to a disengagement.
Below image shows a common instance of interacting with a chatbot on a gym equipment website, where the users find the chatbot unable to understand their question, giving back irrelevant answers until the user gave up the interaction.
From a business standpoint, the inability to have conversations with visitors has hindered the conversion of visitors into paying customers.
Thus, the team and myself were determined to build a product where users could
1. Create chatbots that are capable of having real, flowing conversations with website visitors
2. Train chatbots by simply entering their website or uploading their own source
3. Give chatbots a job by setting up a chatbot objective (Lead generation, boost actions or redirect resources)
By incorporating these features, the chatbots can be better aligned with the business objectives, leading to more meaningful engagement and ultimately driving higher conversion rates.
Gain users by providing an easy, self-explanatory bot creation process and unique features that stands out from other chatbot services, eventually converting them to long-term users.
To capture the users' interests at an early stage, I created this quick wizard coming from the landing page to let users get a taste of the technology we provide, allowing them to easily upload their website content by merely entering a link, do a bit of customization and interact with the bot that they created, eventually getting them to sign up to actually implement the bot on their site. This process was designed to get low intent users to sign up for our service.
After researching a few similar competitors' bot creation process to gain inspiration and see what might be some pain points to avoid, these are some of the notes I gathered:
1. Different use of the left menu. A functional bot management menu dedicated to create new bot, or a high level navigation menu.
2. Some pain-points include unnatural flow and extra steps to get to important features. In the first app shown below, users have to expand the right panel in order to see the settings whereas the bot appearance can only be edited when click on Publish. In the second app, users have to click on test bot to see the preview of the bot and interact with it.
Unlike most similar chatbot services with a single bot by bot structure, we provide the notion of sources under knowledge bases and bots under projects. So users can better categorize items and resources can be shared across projects.
Dashboard Design
When structuring the dashboard, there were initially two approaches I had when brainstorming - one being an overview and performance of the bots, the other being the easy access of knowledge bases and projects. I had a bunch of discussions with the team and after putting ourselves into users shoes, we decided to go with A as it aligns more with users' needs. We felt good with our decision as we feel that after the bots are all created, users' motivation of returning to the app is to get more insights into how well their bots are performing.
Projects Page Variations
When designing the projects page, due to the many functions and content, I spent a lot of time looking for a most efficient way to display them and the first thing the users should see when they clicked on this project. After many variations, I structured and divided the content into four subpages (tabs) to enhance the experience.
Wireframing & Iterations
As the main functionality of the entire platform, I wanted to give users a friendly experience when setting up their bots, letting the users better access the bot preview instead of having to take extra steps. After several ideation process, I decided a split screen where the settings and preview of the bot is side by side could really help when setting up the bot.
Interface Design
Design Process
Familiarity plays a crucial role in the usability and overall user experience of a product or service. Familiar designs are more likely to be easily understood and navigated by users. As one of the biggest feature in the product, there are 2 places with the ability to upload sources, one within the bot settings, one within the knowledge base. I wanted to try my best to keep these two user experiences consistent across the product to maximize usability.
In the bot settings, a popup when click on "Upload Source" is utilize to feature a smaller but a full knowledge base function. Because of the space limit, I had to think about how to squeeze the full knowledge base function within the pop up. After many variations, I decided to use the notion of a functional sidebar to let users see all the knowledge base available, and checkbox to quick select the entire knowledge base and a button for them add new knowledge base.
Knowledge Base Upload
