UX and UI Design
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.
To create simulated human-like facilitation for learning on the platform.
To enable customization and white-labelling of the chatbot across platforms.
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.
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.
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.