Soprano

Services

UX and UI Design

Client Introduction

Soprano is a white-labeled chatbot within the Disprz platform that employs conversations programmed by trainers at the company to provide employees with an interactive learning environment. 

Design Challenges

01

To create simulated human-like facilitation for learning on the platform.

02

To enable customization and white-labelling of the chatbot across platforms.

Research Insights

We researched chatbots featured on B2C and B2B2C learning platforms to generate the following insights:

  • Users have a low tolerance for errors and glitches. If the bot responds in a conflicting manner, skeptical users promptly close the chat window.
  • Users don’t perceive chatbots as problems-solvers; they look for the FAQ section of the platform when they experience a roadblock. 
  • Most chatbots across individual and/or guided Learning Management Systems (LMS) cannot offer ‘natural’ learning assistance on the platform.
  • Chatbots don’t offer a natural extension to the personality of the company they represent, thereby creating a disconnect. 

Strategize

Our primary goal was to simulate a real conversation with a trainer. To make the chatbot as unique and interactive as possible, we did away with the text-based communication expected; instead, the Soprano chatbot is a full-screen interactive experience with a virtual avatar and spoken sound. The design heavily emphasizes the “current” message sent by the bot to the user, accompanied by micro-interaction elements to create a branded ‘memorable’ experience. Other older messages grey out and fade away from view as the conversation progresses to the next screen.

The UX is designed to bring in forms and inputs as needed – for example, when the chatbot asks the user for their name, a text input appears. The lack of a permanently available input field allows the trainers to limit the types of input that can be entered into the system, and simplifies the core issue of error identification and problem-solving that typically arises with robots. The chatbot displays and integrates with other forms of media such as infographics, documents, and videos in a distraction-free manner. A core part of the learning cycle involves MCQ-type questions; the Soprano chatbot provides users with instant feedback on whether their answer is right or wrong, which answer is right, and reasons for the same.

The chatbot also allows spoken-word input at any time, and uses speech recognition to understand and respond to the user’s queries. A help button was permanently provided to the user to overcome any confusion arising from intricate interactions with the system and prevent dead-end conversation loops.

Deliver

The chatbot was primarily designed to be a complete, full-screen experience. The primary background color defaults to Disprz’s brand color, but can be modified by the company to better reflect their own brand’s visual language. We chose a serif font (Martel) due to its long-standing association with books and educational content; the font is also easier to read in long paragraphs which improves the overall legibility of the content.

The entire UI relies heavily on interaction design to present information and input as needed, in a step-by-step and focused manner. Disprz allows the entire UI to be white-labelled as per the company’s preference.

Soprano-UX-design
Soprano-chatbot-UI-screens
Soprano-homescreen
Soprano-typograhy
soprano-colours
Soprano-iconography