Amazon Lex console experience redesign
Role
Led design to overhaul the Amazon Lex console, one of the AWS AI services. Amazon Lex is a complex tool for building AI powered chatbots, from initial drafting conversation flows to deployment, version control and performance analytics.
Challenges
There were two main objectives underpinning this work:
At the surface level the product needed to be updated to work with the AWS design system to look and feel at home alongside the latest suite of AI products in AWS.
Additionally the capability of the product had been ambitiously scaled to be competitive in the emerging field of tools for conversation designers/developers, with support for multiple languages, greater flow flexibility and a more accessible workflow with a focus on consumer grade interaction patterns to appeal to a wider audience of customers.
Often pushing the boundaries of the AWS design system (“Polaris”); several new interaction patterns were contributed to better facilitate quick iteration with deeply nested and complex flow configurations in a web console framework.
Amazon Lex console v1 (pre-redesign)
The original design was looking quite outdated compared to newer tools in the rapidly evolving chatbot / conversation design tool space. Additionally the information architecture did not scale to support critical functionality like multiple locales.
Designing the new console
Understanding the challenges - the intent editor
The intent editor is where the each specific conversation flow is crafted, step by step. Conversation flows can vary from very short and simple to potentially long and complex, so the user experience needs to scale accordingly.
The initial new intent editor design was a very long page vertically stacking each step of the conversation with many configuration options. There were some very obvious scaling and navigation challenges.
Refining the experience - progressive disclosure and visual metaphor
Exploring ways to visualize steps in the conversation as configurable message ‘bubbles‘ - vertically compact and easily toggled on/off and edited inline while iterating and testing conversation flows:
Enhanced IA patterns
One of the challenges with working around the limitations of a rigid page based UI framework was affording easy and clear contextual editing. Conversation design is not a linear process and requires the ability to drill down into deeper layers of configuration without losing sense of place in the flow.
Introduction of a contextual right pane to enable quick editing of advanced nested options without losing sight of the editor hierarchy:
Conversation flow concept
Designing a conversation flow can get pretty complex, so we introduced a visual outline of the conversation structure, based on a familiar chat UI representation. This served as a handy way to easily ‘jump’ to key steps in the flow editor without needing to scroll through the whole page or navigate to right sub editor page to make a quick edit.