WebChat configuration

Overview

A product of labor and love, web chat was conceived as a framework-agnostic code snippet that our clients can immediately embed on a website. Web chat was developed to support Watson Assistant’s omni channel strategy and help clients go from build to publish in six month or less instead of a year or more. Web chat can be extended and customized in a variety of ways to adapt to unique solutions. With the collaboration of my product and engineering leads we pushed 33 release updates to the chat UI. This review will focus on the configuration pages in Watson Assistant tooling for which I lead the direction and implementation of design. 

Roadmap

In 2020 IBM required all products to move their code base from Angular to React while updating designs to Carbon v9. In the midst of our design process, Carbon updated to v10 which had vast differences from the last version. The update caused our visual designer to adjust to these new standards and it changed the components we had available to us. In the end we were able to come to a better solution. However, this caused a two sprint churn in the design process and put pressure on front-end development to adjust to these updates while maintaining our original release deadlines.

Process

At IBM we talk a lot about the Loop. The infinite pathway between making, reflecting and testing. This practice is upheld by our design teams and is best applied when the 3-in-box (design, dev, and offering management) work together in an agile manner. We started the configuration page design by adopting previous designs for the web chat integration and quickly identified the limitations the old pattern had as well as its limitations with Carbon v10. In this way the design language was used like a crutch we focused on puzzle-piecing the components together instead of looking at the user journey and the best pathway.

Carbon v9 mid-fis

Taking a step back

With the introduction of Carbon v10 we had access to more page organizational components, such as a tabbing system. The goal was to give Tanya a sense of a workflow through her configuration process. While Tanya only has to name her assistant and then embed for a basic integration, we had additional advanced options. Stacking these options was overwhelming and made it feel like Tanya had to go through all these steps, which wasn’t the case. In addition, as web chat evolved, the amount of configuration elements overwhelmed the original page layout. Tabs allowed us to create a wizard-like experience without forcing the user through every step -  she could jump around at her leisure. For example, she could skip over a service desk set up initially and then return at a later date when that functionality was needed.

Research

Using mid-fi wires, we conducted research with clients already using Watson Assistant to get their feedback on the overall flow and additional needs they required that we might not have considered, or were further down on our roadmap. The series of conversations over video conference allowed us to move forward quickly and launch in conformity with our deadlines.

In follow-up we worked with our Growth team which focuses on onboarding for first time users by implementing a step by step overview of the features and use cases for each advanced phase of the configuration process. Our teams worked together in ideation where they followed up with their own research. The below image shows our working sessions, which were used to identify the best screens to support with an onboarding walk through.

Outcome

We surpassed our goal of web chat adoption by 120% by end of year, with additional feature roll out supporting our goals for weekly API calls by 230%. Additional data pertaining to our mission goals are IBM confidential.