ChatFusion: Uploading Experience for a Chatbot Builder Platform

Help businesses improve customer satisfaction.
B2B
End-to-end
SaaS Platform
2024
AI
Role
Product Designer
Team
Myself, CEO, product manager, multiple front-end and back-end engineers
Type
0-1, Branding, web app, product strategy, design thinking.
Duration
8 months
Tools
Figma

Overview

About ChatFusion

ChatFusion is an unqiue ChatGPT-powered chatbot builder that enables businesses to easily create and train bots by uploading their own sources. These bots can hold natural conversations and generate leads, signs ups etc, to increase user satisfaction and company growth.

Impact

With the MVP, the team has gotten several US companies like BlackPanda, American Addiction Center to use the product while we continue to build the product and expand our users.

Business Challenge

By providing an easy, self-explanatory bot creation process and unique features that stands out from other chatbot services, getting potential users to sign up.

Objectives

• Keep different users intents and needs in mind when designing to make sure we satisfy all users at different stages
• Design a B2B product with B2C in mind, ensure an easy to use product with data in mind.

Solution

As this is an end-to-end product design, these are some of the many features and views that I designed.

Design Highlight 1: Shared knowledge base to reduce hassle

During the design research phase, we found almost all the other chatbots service on the market support a single chatbot-sources structure. Thus when businesses had to create multiple chatbots, they had to upload sources to the new chatbot all over again, making it a hassle.

We wanted to solve the problem by introducing the notion of knowledge bases, which is a library that consists of different sources that can be shared across projects/chatbots.
When first designing the knowledge base's main page, I came up with a simple card layout with icons and no. of files to display the knowledge bases, but quickly realized the lack of information might refrain users from quickly identifying between different knowledge bases.
Thus in the next iteration, I added other useful data for clear distinction between the knowledge bases for quicker selection.
Lesson: When designing a B2B product, data and information is key as it helps users make quicker actions and informed decisions.

Design Highlight 2: Uploading and managing of sources

To ensure an intuitive and efficient uploading and managing of sources experience, I considered the following key aspects:
• Clear file indications, type and status
• Quick tabs for different file types
• Ability to track upload progress
• Drag and drop support and batch uploading
• Sync files without having to reupload
• Disable files without having to delete
I also designed a loading icon to indicate uploading progress after uploading at the top of the app where users can track the progress whenever.

Design Highlight 3: Ensuring a consistent experience throughout the app (Upload Source)

Familiarity plays a crucial role in the usability and overall user experience of a product or service as they are more likely to be easily understood by users. Within the app, the users can either upload sources to the knowledge base (refer to above design highlight 2) or upload or select sources from the bot settings.

How to keep these two upload user experiences consistent across the product to maximize usability?

In order to utilize the full functionality of the knowledge base, including the selection of existing source and to upload new source, I make use of a full functionality panel module for clear and easy usability.

Thoughts

While the product is still under development, I felt like I have learned a lot from such a large scale project. I challenged myself to think about a lot of variations, created prototypes to test and to communicate within the team. Also to think about design from different users' mindsets, making thoughtful design decisions that benefit my users.

Design System

For design system, we used Ant Design as base model.
Quick bot creation wizard
Below shows a quick prototype to the flow of the bot creation wizard for a first time user that lands on the landing page. The wizard will end with a sign up screen.

Other Works