Microsoft

Designing a chatbot builder for simple flows on Azure

Role

UX Design Intern

Timeline

Dec 2020 - Jun 2021

Team

Azure Apps and Infrastructure Team, Michael Shao (Manager), Xianghao Xie (Engineer)

Skills
UI/UX Design Web App Artificial Intelligence
Microsoft Reflection

Overview

From Spring to Summer 2021, I worked at Microsoft on the Azure Apps and Infrastructure team to improve B2B cloud and analytic products. One of the projects I participated in was Bot Portal, a web chatbot builder that operations managers use to answer internal company questions from employees.

As the only designer on the team, I led the web app's end-to-end UI/UX redesign. I was partnered with another senior engineer who acted as the PM.

Microsoft Solution

Problem

Operations managers act as the point-person for questions related to finance, IT, and human resources. They use Bot Portal to automate responses to technical problems and simplify repetitive tasks, such as booking meeting rooms. However, user feedback shows that it takes too long to build short conversation flows on the current interface.

Objective

How do we make the chatbot builder accessible for creating simple flows?

Outcome

10K+

monthly active users in Fortune 500 companies

66%

decreased time to create a simple flow

Q4 2021

product update release

Before diving into the process, let me clarify some keywords for describing the interface:

Microsoft Vocab

Pain Points

Through user interviews, the senior engineer and I discovered an operations manager's top difficulties when building a conversation flow.

⏱ Slow interactions

It takes the user 4 clicks to create one response node and users must use indices to represent options.

🛑 Interrupted flows

Text and file editors all exist as modals currently, which interrupts the user's actions and disables the main content.

💥 Choice overload

There are 14 response nodes for users to choose from, easily overwhelming users building simple flows with less than five responses.

🔁 Redundant workflows

It is time-consuming to recreate the same nodes.

Project Goals

How do we make the chatbot builder accessible for creating simple flows?

1
Create faster flow-building interactions
2
Prioritize frequent actions
3
Enable users to save common nodes

Final Designs

Despite facing many challenges, I was super proud of leading the design of this new iteration, prototyping almost 200 screens. Jump to the process section to read my decision processes!

Redesign 1

Build flows quickly

Users can simply drag and drop nodes from the toolbox to build the conversation flow. I reduced a 4 click step to 1 drag and drop when creating a response node.

Redesign 2

Edit details in the sidebar

The sidebar effectively hides complicated actions and creates a consistent place to edit global nodes.

Redesign 3

Save common nodes

Users no longer need to recreate the same nodes. They can save common nodes as "global nodes," and when they edit the main instance in the Global Node Editor, instances of this node in all conversation flows are updated.

Process

Goal 1: Create faster interactions

Tree Structure

The current structure imitates code, requiring the user to initiate loops and add if statements. Referring to user feedback that wants a clearer display, I changed it to a vertical tree diagram to better show the sequence of events.

Tree Structure 1

Before: Code structure

Tree Structure 2

After: Tree structure - clearer display of the same content on the left

Drag and Drop Interaction

The current implementation requires users to use small add buttons to connect a response node. However, according to Fitt's law, the small targets are difficult for fast, frequent actions.

Therefore, by performing competitive analysis on similar products, the senior engineer and I decided on a drag-and-drop interaction.

Then, I performed user testing on 5 of my colleagues who never used Bot Portal before. Their task was to build one message response node and type "Hello World". On average, the time on task decreased from 15 seconds to 5 seconds, a 66% decrease in time.

Before: Small add buttons, 15-sec to build one message response node

After: Drag and drop, 5-sec to build one node, 66% decrease in time!

Goal 2: Prioritize frequent actions

Reducing Response Nodes

Through card sorting, I categorized actions under shared user motivations, which helped me combine response nodes. I reduced the number of choices by 50%, from 14 to 7, with the most frequently used "Show a message" node at the top.

Choices 1

Before: 14 choices - too many!

Choices 2

After: 7 choices

Goal 3: Save common nodes

Copy and Paste vs Global nodes

The current implementation copies and pastes a response node directly into the same intent, but user feedback states that they also want to paste into other intents and edit all copies of the same node at once.

Thus, I came up with the "Copy to clipboard" idea, allowing users to save common nodes to a clipboard that is accessible across all intents. However, user feedback shows that there are details in common nodes that are often updated, such as system version ids when the user asks the chatbot about IT-related topics.

Consequently, I prototyped a "Global nodes" feature, where users can save nodes as global nodes. When they edit the master instance, all instances of this node in different intents are also updated. This is the iteration approved by the senior engineer!

Before: Copy and paste into the same intent

1st Iteration: Copy to clipboard, accessible to all intents

2nd Iteration: Global Nodes, editing master component can change instances

Exploring and Testing

I created multiple interactive prototypes to test edge cases and compound use cases. This guided our critiques and evaluation process, which also prompted new features that the senior engineer plan to include in future updates.

New Feature 1: Adding customized intents, essentially allowing the user to create new words for the bot to recognize through the GUI

New Feature 2: Storing multiple languages in each node, so that the bot responds in the user question's language

Visual Design

To underscore Microsoft's brand identity, my design system adheres to Microsoft's Fluent Design core principles. I also provided a UI Style Guide that lays out all the components and their states to guide the development process in Angular.

UI Guide 1
UI Guide 2

Takeaways

I grew tremendously as a designer and team player. Some key lessons include:

1. Accessibility

Drag and drop suggests that the user must be able to use a mouse and visually perceive draggable elements and drop zones. To make it accessible, the senior engineer and I discussed a list of requirements- namely, we must make 1) all draggable elements keyboard focusable 2) add event handlers for grabbing, moving, and dropping elements 3) add text that is only visible to the screen reader to guide the grab/move/drop process.

2. Presentation and documentation

While I was only collaborating with one other engineer, I needed to ask questions concisely to make sure my design choices were clear because we mostly worked remotely. Since this was a major redesign, I wrote a PRD so a new designer can easily pick up where I finished.

3. Getting feedback early

Demonstrating the functionality through prototypes better represented the user flows I was envisioning, which made the critique process easier. I also sought out designers on other teams to analyze the new user's experience to create informed and guided interactions.

More Highlights

Mixed Reality

Other than the Bot Portal project, I also developed UX solutions in Mixed Reality. I tried on HoloLens for the first time and even have my avatar made in MR 😂

Mixed Reality 1

My first time using the HoloLens!

My (very ugly) avatar in Mixed Reality

Microsoft Reflection

Thanks for reading about my experience! If you are interested in chatting more about my work, I would love to hear from you :))

Other Projects