Flow Designer

The Challenge

"Press 1 to get your account balance, Press 2 to check your recent transactions..."

Does this sound familiar? Customer care is a crucial part of a business, and as business grows on maturity, the needs of industry-specific operational teams, regulations and business processes emerge. The growing needs for companies of all sizes to set up their contact centers with dynamic, flexible and AI-powered systems have been the challenges our team at Cisco Webex Contact Center was focusing on.

In the beginning of 2020, I was tasked with this initiative with another designer on the team, with the goal to build this scripting tool Flow Designer in a year to unblock business needs and reduce operational cost. It not only involved deep understanding of the existing infrastructure and routing mechanisms but also required a creative mind to enable non-technical users to build contact center workflows from scratch.

The Status Quo

Shortly after the project kick-off, we investigated the existing experience and understood that it was broken due to a lack of essential features. It also resulted in significant time and money for our customers to pay for professional services in order to make things work.

Designing with Systems Thinking

At its core, Flow Designer is a visual scripting tool that allows users to build automated experiences involving workflows and conditions based on conditions such as channel type, customer inquiry, customer information, transaction and so on. The reason why it was extremely challenging was because there are endless possibilities and combinations that we needed to factor in and designed workarounds to ensure holistic experience.

One designer and I mapped out the core components based on competitive research, existing infrastructure and foundational research. We ran countless design sprints and brainstorming workshops with PMs and engineers along the way to ensure we could not only address use cases holistically but also making sure the tool can be scalable and flexible.

Concept Validation

Once the key concepts were defined, we set up a usability testing session with 5 users spanning across different levels of experience and background to test out our ideas. Observing them use the tool was extremely crucial to helping us fix some obvious usability issues while evaluating their perception on the components we defined both conceptually and visually.

One realization we got from the research was the importance of validation and debugging. We saw that users had a hard time identifying the root cause and recovering from errors where in our design we relied only on a small panel with technical instructions. With this in mind, we decided to scope down the features for the initial rollout and to focus on designing a more guided experience for users to stimulate the flows and recover from error scenarios.

Designing Interactions for a WYSIWYG Tool

Designing a What-you-see-is-what-you-get tool requires a lot more than just static design mockups. Besides being a workflow design tool with various conditions and technical limitations to deal with, designing interactions such as snap-to-grid or overflowing prevention requires a lot of handholding in the implementation phase where I worked closely with the product and engineering team to prototype and demo different approaches and make decisions together.

How to indicate incomplete or error configurations in a flow? After learning it was difficult for users to recover from error using the validation features, we put more thoughts into showing small visual components that indicate any situations requiring users to address on the fly.