Case study

Redesigned chatbot builder with lower entry-treshhold for all users

Learn from Riversoft how chatbot flow can be transformed into a shared workspace for all users, with a redesigned UI and new flow diagram features for an enhanced user experience.

A user interface design showcasing a workflow editor with connected nodes for actions like sending messages, conditions, and HTTP requests. A visual representation of a workflow editor interface with categorized nodes for actions like HTTP requests, conditions, and messaging. The nodes are organized under headers showcasing modular functionality.
Clutch logo in dark mode with a five-star rating and a score of 4.9, indicating high customer satisfaction and excellent reviews.

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!

Client
Business need

modernized design of their tourist application with new features

Scope

Product Design workshops, UX, design system, development

gojs
Vue.js
UX&UI design
IT
Conversational AI
Challenge

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.

Process

From scratch to chatbot builder with conversation flow

01
Product design workshops

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

02
UX design

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

03
Design system & UI design

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

04
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.

A workshop setting with collaborative activities, including sticky notes and virtual/in-person discussions about project goals and client needs.

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.

User personas displayed with detailed profiles, including personas’ photos, skills, and challenges, accompanied by workshop slides.

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.

Wireframes and design prototypes of a workflow editor and chatbot interface with multiple iterations and node customization features.
Solutions

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.

A typography and color palette guide showcasing font styles, sizes, and a range of node color options for a design system.

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.

An interface with an on/off toggle to display notes within a workflow editor, demonstrating examples of nodes with and without accompanying text descriptions.

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.

A workflow editor interface with a palette of icons and a node contextual menu, allowing for node customization and functionality adjustments.

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.

A categorized view of nodes in a workflow editor, organized by usage type, along with a detailed color palette for styling 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.

A comparison of "before" and "after" workflow editor designs, highlighting improved visual clarity, organization, and user-friendly node arrangement.
Results

Meet benefits of seamless diagram integration with your existing software

Increased user engagement

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

Improved collaboration

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

Enhanced flow editing

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

O
u
r
c
o
o
p
e
r
a
t
i
o
n
w
i
t
h
t
h
e
S
y
n
e
r
g
y
C
o
d
e
s
t
e
a
m
p
r
o
v
e
d
t
h
e
y
a
r
e
a
p
r
o
f
e
s
s
i
o
n
a
l
d
a
t
a
v
i
s
u
a
l
i
z
a
t
i
o
n
e
n
g
i
n
e
e
r
i
n
g
c
o
m
p
a
n
y
.
T
h
e
y
d
e
m
o
n
s
t
r
a
t
e
d
e
x
c
e
p
t
i
o
n
a
l
t
e
c
h
n
i
c
a
l
s
k
i
l
l
s
,
a
t
t
e
n
t
i
o
n
t
o
d
e
t
a
i
l
,
a
n
d
a
d
e
e
p
u
n
d
e
r
s
t
a
n
d
i
n
g
o
f
u
s
e
r
e
x
p
e
r
i
e
n
c
e
.

Portrait of Alex Kuo smiling and wearing glasses in a navy-blue suit jacket and a light blue shirt.
Alex Kuo
CEO at Riversoft

W
h
i
l
e
l
o
o
k
i
n
g
f
o
r
a
p
r
o
f
i
c
i
e
n
t
s
e
r
v
i
c
e
i
n
c
r
e
a
t
i
n
g
g
r
a
p
h
i
c
a
l
c
o
m
p
o
n
e
n
t
s
,
w
e
w
a
n
t
e
d
t
o
w
o
r
k
w
i
t
h
e
x
p
e
r
t
s
t
h
a
t
w
o
u
l
d
a
d
v
a
n
c
e
o
u
r
t
o
o
l
w
i
t
h
e
x
c
e
p
t
i
o
n
a
l
U
X
a
n
d
U
I
,
w
h
i
c
h
e
n
a
b
l
e
d
u
s
t
o
w
i
n
n
e
w
d
e
a
l
s
w
i
t
h
s
i
g
n
i
f
i
c
a
n
t
c
l
i
e
n
t
s
.

Portrait of Aurelien Masse wearing a dark blue shirt and looking at the camera.
Aurelien Masse
VP Engineering at Zeenea

Find out how we can help you enhance your software for improved user satisfaction

Contact details
By sending a message you allow Synergia Pro Sp. z o.o., with its registered office in Poland, Wroclaw (51-607) Czackiego Street 71, to process your personal data provided by you in the contact form for the purpose of contacting you and providing you with the information you requested. You can withdraw your consent at any time. For more information on data processing and the data controller please refer to our Privacy policy.
*Required
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.