Virtual Assistant Chatbots

UI/UX Designer - Product Designer
Project Overview
This is a Conversational Bots (chatbots), which offers tremendous value to an organization whether through saving time, reducing cost, generating sales, providing “after-hours” support, or even just engaging users in a new unique way.It automates FAQs, routing conversations, collecting feedback, streaming transactions, paying bills, booking appointments, and more - the intelligent TELUS International Assistant cognitive solution handles all forms of interaction from simple to complex without coding.
The Problem

Virtual Assistant works hand in hand with human agents to enhance your overall digital customer experience. Firstly this project starts with a proof of concept, when things work in an excellent way and the team grew due to new features in the product, they had to cater to wider use cases and add different features to the original design. Since they didn’t have a designer on the team in the beginning, this led to inconsistent interface design and lack of user experience.

The product was supposed to created for customer support team members to serve customers by training the chatbot for repetitive queries but due to complex UX and lack of cohesive design, client starts complaining about it. The product was suffering from bad mouth of word from existing customers, hence it was getting difficult to engage new customers on board. So, it have been a crucial phase for the product as the organization had already invested a lot for the development.

Scope of Work
  • Improved user experience of existing features of the product by leveraging the existing code components for a cost effective solution.
  • Worked on redesigning the existing user interface for a more user friendly experience.Work on new features, enhancements in the products as per the prioritized product backlog.
  • Set up rules in the design guide to maintain consistency across the application.
  • Sit with developers to find the most optimal solution in the exercise of improving UI/UX which requires minimal change in the codebase from developer’s end.
  • New features asked by the client, those are train the chatbot through FAQ url, chat handover to human for unhandled queries, traffic on different channels like facebook, google hangouts and slack, Statistics to show the chatbot efficiency and much more.
User Research

I needed a plan, and any good plan needs research. Here’s how I did it.

1. Meetings with Product Manager, Business Analyst and attended client calls

Understood the problems clients faced and the users who engage with their businesses.

2. User interviews

of customer representatives and content writers who train the bot

3. Competitive Research

to see how other platforms (Chatbot, Google's Dailogflow, chatfuel, Botsify, Kore.ai, Microsoft's Azure) are solving similar kind of problems.

4. Usability analysis

to identify usability issues from the first-time user's end.

5. Understood technical limitations

Discussed with the developers and product manager to understand development restrictions.

Some of my findings during the research phase
Learnings, Insights & Challenges
1. No source files of the original design

I had to build everything from scratch for new features and took screenshots and did improvements for some use cases to fasten the work

2. Maintain consistency in code base

even the code base structure was not consistent which affected the UI too

3. Take optimal UX decisions to save the dev team efforts

even a single component changes affect the backend effort a lot.

4. Consistency of UI components throughout the product

fonts, buttons, tables, forms, tooltips, graphs and many more needs to be fixed.

5. Findings for description text and tooltips

difficult to understand technical terms throughout the product

Design Process
A design process is a very important part of every designer’s journey to solve the problems. In this project I've followed the following mentioned process.

Sketches

Sketches drawn after the requirement gathering and existing design research to improve the UI and to work on new features asked by the client.

Color Palette

In this project I've used brand's colour palette.
Primary Color
#2B8000
Primary button, backgrounds, text links
Decorative Elements
#66CC00
Use only for decorative items (graphs/charts)
Secondary Color
#4B286D
Headings, secondary button background/ outline, chevron links
Dark Grey
#2A2C2E
Sub headings (H3, H4), body text
Grey
#54595f
Colour for default link
Light Grey
# 71757b
Form input border
Borders
#d8d8d8
Horizontal, vertical and wave dividers
Background
#f7f7f8
Helper/disabled state background
Light Green
#F4F9F2
Success messaging background
Light Red
#FFF6F8
 Notification/error messaging background

Wireframes

Component Redesign

Goal: 1. Modernization of the design components
Analytics & Reports

This component is the landing screen for the user after login to show the statistics. Worked on the iconography, tooltips, consistency, alignments and space to breath.

Create and edit an intent

This is central piece of the product, where the user create intents. Initially there were horizontal bar to select the cards but

Challenge: 1. Unable to see the card's content for which this was designed.

This is central piece of the product, where the user create intents. Initially there were horizontal bar to select the cards but in that way user can not see the content of a card itself and its very hard to manage multiple cards. By moving the cards into right drawer, clearly identify them as actions. Cards drawers order selection of cards with respect to channel selection according to user importance, Card drawers can be shown or hidden to accommodate different layouts.

Conversation Flow Structure

Conversation flow structure is basically a tree consisting of intents in IF and ELSE nodes. I have improved the nodes UI and worked on enhancements (Nodes define their type so that user can take action accordingly, Nodes are draggable, can copied and deleted) as per the client ask.

Chatbots

This is chatbot's section, where all the intents of a particular folder of chatbot is listing. I left the information architecture largely unchanged. worked on the icons consistency, made a wider space for content and improved the layout to give a clean look.

Goal: 2. Enhancements asked by the client

Coming Soon ...

Impact on Business

New enhancements of the product from informational to personalized specific to business needs map out the digital customer experience in an effective way. Through virtual assistant, brands have experienced immense outcomes:

25%

increase in customer satisfaction

55%

increase in employee productivity

35%

reduction in support costs

25%

reduction in call volume

Steps Forward

Going forward, I'm working on the UI/UX product, and there are a number of new additions that will increase the product business abruptly.  But, with every passing day, as team is working on the new enhancements, this is causing a big mess in the architectural design.  Optimizing the information architecture would be the next goal in upcoming days. Below mentioned features are planned in first quarter of this year:

  1. Knowledge Base Search
    All the files and queries required during the customer assistance will be placed in the database and can utilized by the agent if required.
  2. Bot Search
    In case of unhandled chat, every input came from the customer will directly go to the bot search which will help the agent. Bot will match it with the existing training intents and give suggestions accordingly.
  3. Train the bot from historical conversation
    All the historical conversations will be utilized to train the bot, that will save the efforts of content strategists.
  4. Keyword, Slots, Abuse and Sarcasm detection
    Bot will give the suggestions to the customer agent according to the behavioural acts of the customer.

Take aways

  1. Cross-Functional Teams
    Collaborating work  with product owners, business analysts and developers has helped to attain a better perception of the experience required.Communication was much better, particularly when there were some technical limitations.
  2. Accepting Criticism
    Criticism, though at first it can sound hurtful, is a wonderful opportunity for clarity and a solid basis for progress. It's good to take the feedback and stay away from the negativity.
  3. Network with Designers
    I am the only designer in my team, when I'm stuck at a point or need more recommendation and need to discuss, I used call my workshop designers to take their feedback and suggestions. I get to know the importance of networking in this project.
  4. Importance of aesthetics
    Design aesthetic plays an important role for layout, color, and typography.

Thanks for stopping by 👋

Say hello or just save my email for the future.
arsh0392@gmail.com

At the moment

  • 🖥️ Work @ TELUS International
  • ⛷️ Enjoying winters
  • 🚀 Portfolio upgrade