Cisco Commerce Bots

My Role: UI/UX Design, Prototyping
Platform: Web Application
Tools: Figma, Invision
Timeline: September 2018 - November 2018

01. Overview

The Xioma ChatBOT project is in the midst of exploring the concept of a Service Bot Platform where business users can perform the following:

  • Create their own bots for service-specific needs
  • Create skill bundles that can be repurposed by other bot creators
  • Add/Edit skills tied to a bundle to customize the bot

The new Service Bot Platform will allow for scalability, a decrease in redundancy and simplified system for users.

I was the only designer focus on the whole design flow, with 1 UX Researcher, 1 Project Managers, 3+ Business Analysts (Cisco team) & 3+ developers.

02. Discovery

After doing the current Bot platform research and discussion, we figure it out the current Xioma ChatBOT Information Architecture, and proposed the future IA Diagram.

currentIA
proposedIA

The Painpoints

  • Complex terminology is used and expected to be understood by novice users.
  • The onboarding experience for new users is not informative and users tend to get lost.
  • Novice users with little know-how of the bot creation process do not receive any guidance through the experience.
  • The current user base is decreasing due to the lack of functionality and usability of the the application.

Business Goals

  • The goal of the application is to provide a simplified experience for creating complex bots for users who don’t have a deep understanding of bot creations and/or AI experts.
  • Create a seamless user experience (technology-human interaction) of Xioma platform that provides pipeline of bot innovation.
  • The framework provides an interface for users to create and manage bots and it is quite intuitive.

Our Users(Personas)

After set the IA diagram, we decided to create the mainly type of persona:

TAC Engineer – Phillip Bradley

03. Design Process

Low-fidelity Design

From research to grey scale mock-ups for concept design, we did lots of low-fidelity design works.

High-fidelity Design

I would like to showcase the example for Inventory Page and Create new BOT as High-fidelity Design.

Before – Inventory Page

  • The main inventory page was shown all type of bots, should be simple but categorization.
  • The searching bar is not intuitive for users, need to go back and force to check the Bot names.
  • The current design missing create new bot button and users need ability learn more about the BOT information

After – Inventory Page

  • The updated Inventory page has different types of categories, such as Favorite bot, most used and so. Users are much easier to narrow down and explore the BOTs.
  • We give users flexible choices for card view and list view of the Bots.
  • Each Bot has their details pop-up information and more bulk actions for further purposes.
  • Add the floating “+” button when users need to create new bot, start from here.

Before – Create New Bot

  • The input field with right side warning information could not help user focus on create new bot.
  • The wizard steps are not intuitive design for user when start to select a skill bundle even don’t understand what’s the skill mainly functions.

After – Create New Bot

  • After studying users typing habits – Dynamic quick fill field system has been created, within the description for each input field. Change the left-right structure into the centralize design, help users focus on the creating experience.
  • For adding Skill Bundles (SB), we designed the hover indicators to help user understand the details information about the SB and reduce the selection time.
  • Two options for users to create skill bundles, in case of different scenarios.

More Features

Some other cool features for Cisco Commerce Bot project are are including:

  • Different status of Bots in inventory page
  • Two scenarios of create new skill bundles and skills
  • Save as draft and back to re-edit the Bot

04. Results

Testing & Feedback

Testing was conducted during the early design phase to validate the mainly pain points in the current version. During the redesign: Testing was done with the internal BOT team.

Invision prototypes were shared with stakeholders to get early feedback. After several surveys and testing, we got lots of positive feedback regarding the new design for Xioma BOT and launched the early platform in November 2018 for our partner Cisco.