How to design chatbot 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 workflows 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!
modernized design of their tourist application with new features
Product Design workshops, UX, design system, development
Modernizing a chatbot builder UI with a user-friendly conversation flow diagram and UX for all users
Create UX for technical & non-technical users
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.
From scratch to chatbot builder with conversation flow
Collaborative session to brainstorm new product ideas together, using various tools and techniques.
Refinement and validation of our idea with interactive prototypes to make sure it works well.
Creating final look&feel of the product to ensure right user experience and visual consistency.
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.
Redesigned chatbot builder with a new design system and contextual navigation features for conversation flow editing
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.
Meet benefits of seamless diagram integration with your existing software
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.