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.
monthly active users in Fortune 500 companies
decreased time to create a simple flow
product update release
Before diving into the process, let me clarify some keywords for describing the interface:
Through user interviews, the senior engineer and I discovered an operations manager's top difficulties when building a conversation flow.
It takes the user 4 clicks to create one response node and users must use indices to represent options.
Text and file editors all exist as modals currently, which interrupts the user's actions and disables the main content.
There are 14 response nodes for users to choose from, easily overwhelming users building simple flows with less than five responses.
It is time-consuming to recreate the same nodes.
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!
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.
The sidebar effectively hides complicated actions and creates a consistent place to edit global 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.
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.
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.
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.
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!
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.
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.
I grew tremendously as a designer and team player. Some key lessons include:
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.
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.
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.
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 😂
Thanks for reading about my experience! If you are interested in chatting more about my work, I would love to hear from you :))