Designing Seamless AI-Driven Experiences in Microsoft Teams

Adaptive Cards Copilot Fluent

november 08, 2024

The rise of bots and AI has brought exciting possibilities, but designing an AI-first experience in structured business applications presents unique challenges. Our goal is to ensure these interactions feel intuitive and familiar, making the user experience seamless within the Microsoft ecosystem.

Key Principles for Designing Teams Apps

We use Fluent UI and React to ensure our Teams apps look and feel native to the Microsoft environment. This approach aligns with Microsoft's design guidelines and allows us to build dynamic, responsive interfaces that handle complex workflows efficiently, providing a familiar experience to users.

Balancing Structured Inputs and AI-Driven Flexibility

In business applications, users are accustomed to forms, checkboxes, and dropdowns—interactions that are precise but can be limiting. While AI-driven chat experiences bring flexibility and natural language interactions, not every user is comfortable with this format. That’s why we design experiences that combine AI-driven interactions with structured inputs provided by adaptive cards where necessary. This approach ensures that users can interact with the AI in ways that suit their preferences, while also providing the precision needed for certain tasks.
For example, adaptive cards are ideal when users need to provide specific data like dates, times, or selection from a list. These structured components keep the user’s input clear and error-free, enhancing the overall experience.

Copilot dos and donts

Enhancing User Control with Sorting and Search

When dealing with long lists—whether of colleagues, files, or projects—it’s important to provide users with tools to sort and filter. This allows them to quickly narrow down results and find exactly what they need without wasting time scrolling. In our Teams apps, we incorporate these features to ensure that users can efficiently manage their data and tasks, improving both the speed and quality of their experience.

Restarting and Resetting for a Better User Experience

One of the core aspects of any app or bot interaction is ensuring users don’t feel lost or stuck. We always provide the option to restart or reset the conversation or interaction flow, allowing users to backtrack or start over if needed. This feature is critical to keeping users in control of their interaction, ensuring they never feel frustrated or trapped in a confusing flow.

Chat design

Rapid Prototyping with Copilot Studio

When building these experiences, we rely on Copilot Studio to design and prototype flows rapidly. This allows us to quickly iterate on different user journeys, test conditions, and demonstrate how adaptive cards and other UI elements will function. By working in a fast, iterative environment, we ensure that our apps and bots are user-friendly before they are fully developed and integrated with APIs and backend code.

Copilot prototyping