Miro AI
Integrating generative AI to Miro whiteboard
Design lead
2023
UI/UX, UXR
Miro
Miro wanted to be the first visual collaboration tool to integrate generative AI to its product. The goal was to release a beta version to customers in only three months.
My task was to design a framework to allow users to interact with the AI and other teams to easily integrate AI commands to the different widget types. I was responsible for all design work including Interaction design, user flow, look and feel, iconography, and thinking about the future vision. The main design challenge was to find the right balance of flexibility and ease of use.
We launched Miro AI with a set of actions for the most popular widgets: automatically creating mind maps, sequence diagrams, summaries of content, clustering and explaining code in 14 different programming languages.
Mapping the user flow
Since we didn’t have time to do a proper user research, I started out by mapping how the whole customer journey could work for generating content and iterating the results when they aren’t what users were looking for. The flow helped us to spot several edge cases and better understand what we needed to build.
Easy to understand, pre-written commands for popular widgets
To use Miro AI, users can select single or multiple widgets on canvas, and choose a Miro AI action from the context menu. The context menu is an intuitive entry point for the feature because users have explicitly chose a context to apply the AI action to. From the AI menu, users can create mind maps, sequence diagrams, summaries and cluster content and explain code in 14 different languages, among other things with a single click without writing any prompts.
Exploring entry point options and custom prompt support
One major question was how to surface the feature in Miro UI. I explored possible alternatives such as command palette, context menu, separate tool, and an assistant that can be used from anywhere. I quickly settled on the context menu option since it allows intuitively choosing context for each AI command. Second major question was whether we should let users to write custom prompts. A custom prompt would have offered a lot of flexibility but I had concerns that writing own prompts was challenging, especially for novice users. In the end, we decided to offer custom prompt only in the command palette, so that we can keep the context menu entry point simple and easy to use.
Handling the loading and error states
Sometimes generating results took a long time, even tens of seconds. I needed to think how to handle the long waiting times. I didn’t want to block users from working on other areas on the canvas since that would have been bad experience I decided to use a snack bar with several stages and an animated icon in the context menu to convey the loading state. This allowed user to navigate away and continue working on the canvas while waiting. If a user navigates away from the original content while generation is happening, a snack bar shows shows up to let users know that the results are ready. The snack bar shows a link that allows users to quickly navigate back to the content.
Refining the results and sending feedback
We quickly learned that the generated results were not always what you would have expected. That is why a designed a new results menu that shows up when the generation is finished. The menu presents users three options, keep, discard and try again. The try again option launches the generation again with slightly different parameters so that users get different results that might be better than the previous one.
Conquering the 'cold start' problem with command palette
When user creates a Miro board, user is facing a 'cold start' problem where canvas is empty and there is no way to access Miro AI from widgets context menu. To solve the cold start problem, I integrated Miro AI to the command palette as a secondary way to interact with the feature. Command palette offers users more flexibility by allowing them to write custom prompts. Users first selects a widget type they want to generate, and then write a instructions, or alternatively, choose one of the pre-written examples.
Outcome
- AI actions for the most popular widget types - creating diagrams, summaries, clustering and explaining code.
- Command palette integration with custom text prompt support.
- From kick-off to beta launch in three months.
- Highest engaged social media post and beta signups of all time in Miro’s history