Improving Chatbot UX – Case Study

Riversoft turned to us to redesign chatbot platform, improve its user interface and simplified the conversational flow creation to reinforce the app’s user experience.

Estimate Similar Project

See the Solution

How to design chatbot UX and UI to make it accessible for technical & non-technical users?

Riversoft offers an application supporting travel agencies. One of its features is a chatbot platform. They wanted to enhance it by redesigning its interface to make it more accessible for both – technical and non-technical users.

The main goal was to create a common workspace for technical and non-technical users engaged in conversational workkflows creation. The cherry on the top was development of a flow editor, that made it possible to create conversation scenarios through interactive diagrams within the application.

The client decided to partner with us, because they appreciated our developers’ experience in creating flows with GoJS library and our former projects’ beautiful and eye-catching design. Explore our cooperation with a Riversoft whose vision is to become a primary provider for tourist industry in Europe. Delve into improving chatbot ux case study!

Client	Riversoft
Business need	modernized design of their tourist application with new features
Scope	Product Design workshops, UX, design system, development
Technology	GoJS, Vue.js

Challenges of Chatbot UX Redesign

Create UX for Technical & Non-technical User

We had to make client’s application accessible for technical and non-technical users, so that they could work together and seamlessly on chatbot’s conversational flows.

Redesign an Outdated
User Interface

The app’s old UI was archaic and increased the app’s entry-threshold. That’s why our product designers had to redesign the chatbot platform’s UI along with suggesting new features to boost its usability.

Visualise Chatbot’s Flows with a Diagram

Client wanted to create conversational flows in visual form of a diagram. However they struggled with using GoJS library, so we backed them with our GoJS expertise.

Our cooperation with the Synergy Codes team proved they are a professional data visualization engineering company. They demonstrated exceptional technical skills, attention to detail, and a deep understanding of user experience. […]They kept us informed at every stage, promptly addressed our concerns or queries, and ensured a smooth collaboration from start to finish.

Alex Kuo Chairman, Riversoft

Process & Insights

Product Design Workshop

Collaborative session to brainstorm new product ideas together, using various tools and techniques.

UX Design

Refinement and validation of our idea with interactive prototypes to make sure it works well.

Design System & UI Design

Creating final look&feel of the product to ensure right user experience and visual consistency.

Development

Developing new features and refinement of the old ones.

Workshops

The workshops’ primary goal is to deeply understand real users’ problems, based on shared understanding between team and client, and then find the right solution.

After each workshop session, there is time for internal brainstorming and analyzing earned materials. We polish user flows, create mockups, and consult technology solutions.

The workshops were held remotely through MS Teams and Miro.

User Persona

To gain a deeper understanding of our users’ specific needs, we created user proto personas. This helped us grasp the intricacies of our target audience, allowing us to design a tailored experience. Our main challenge was harmonizing technical and non-technical user experiences while constructing a seamless flow diagram.

Wireframes

Through collaborative workshops with our client, we crafted wireframes showcasing the user flow. This step empowered us to validate and refine our proposed solutions prior to the final implementation, ensuring a seamless user experience.

The Solution of Chatbot UX Redesign

See the chatbot UX best practices behind the client’s application’s reinforcement.

Design system

Our team of product designers took the initiative to revamp the application icons and UI elements. We introduced fresh and modern colors for different object categories, along with new shapes and colors for sidebars and panels. These updates had a significant impact on the chatbot UX design by giving the application a modern look&feel.

As a result, users now benefit from enhanced navigation capabilities. They can move through the application more efficiently, locate specific features effortlessly, and enjoy a more satisfying and streamlined experience.

Node’s description and notes

Nodes have been equipped with notes feature. A non-technical user can create conversation history of the chatbot’s interaction with a human (the flow of the chatbot), leaving notes in the nodes to describe the specifics of how each of them works. Thanks to this, flow is designed for the user, ensuring a positive UX.

Thanks to the notes, the developer (technical user) easily finds himself in the designed flow and knows exactly how to introduce changes designed by a non-technical user that will allow the chatbot to work.

Context menu

The user can build the diagram by dragging its elements from the palette (drag&drop), and also thanks to the context menu attached to each node. This accelerates work as the user can view and choose recently used node types.

Fixed color palette

The application’s default setting allowed to change node’s color freely, which was confusing for users because nodes of the same type could have different colors.

We have introduced a fixed color palette and icons for nodes, giving them specific meanings. Thanks to this, user can easily read the diagram by distinguishing individual nodes.

Flow editor

The flow editor with an intuitive graphical user interface (GUI) allows users to effortlessly create and modify conversational flows and operational structures through an interactive diagram. The result is a visually appealing representation of chatbot scripts and processes that are easy to read and understand.

The Results of Chatbot UX Redesign

New user interface, designed to keep users engaged, simplify feature utilization, and facilitate seamless navigation.

Chatbot platform accessible for technical and non-technical users, that can work together on chatbot flows.

Flow editor that enables creating chatbot flows in the form of an interactive diagram.