Microsoft Fluid in Teams Chat
Fluid, now Loop, is a lightweight productivity tool for real-time collaboration across Microsoft 365. In the modern workplace, there is an emergence of synergy spanning various apps and devices. The way people and content are brought together will continue towards a new era of ubiquity.
Teams is one of the first major communication apps in Microsoft 365 to integrate Fluid experiences for users to edit and create live content in-line with everyone in chat.
Overview
Shipped • Nov 2021
Worked closely with a design colleague to implement the Fluid UX framework and UI craftsmanship with Teams. Helped draft a high-level scenario to capture each required feature for Microsoft Build 2021 announcement.
Led the theming and communication effort with each engineering team to successfully translate the designs from Fluid to Teams for consistency and public ship.
My Role
UX/UI
Defined theming
Co-led visual craftsmanship
Developed internal design toolkits
Platform
Web & Desktop
Tools
Figma & Azure DevOps
But first, what are components?
Components are live, task-optimized elements — from paragraphs, tables to templated lists (e.g. agenda) — that enable users to collaborate and edit in real-time.
Challenge
Teams chat is a space where users often communicate, collaborate and gather ideas. Context switching and endless conversations conceal information — hence users find it hard to locate and reference it when needed.
93% of people use 2 or more apps and 50% use 5 or more.
“We jump around from thing to thing, switching context often, getting pulled in different directions, answering a quick question here, pulling up this document here, reading this email here, adding a check-list there...”
Solution
Deliver a set of actionable Fluid components in Teams chat for everyone to co-create simultaneously. Enable revisiting components through familiar recall mechanisms throughout the Office ecosystem.
How might we effectively integrate Fluid into Teams chat?
Adaptable
Within each app and context — Fluid components will inherit the theme and design language.
Scenario first
Create a compelling scenario to address and demonstrate how Fluid can be used to collaborate in chat.
Continuous
Components can be edited and consumed across chats, meetings and other supported apps.
Component UX
Components are inserted through the discover menu below the compose box
Components are comprised of a shared header with consistent commanding across different contexts.
Visual Craftsmanship
Built an internal toolkit for engineering, design and PMs to reference.
Created reusable Figma components for design consistency and states.
Components adapt accordingly to different themes, including high contrast mode and meeting WCAG compliance for accessibility.
Accounting for designs in both Teams & Fluid canvas required filing bugs to address inconsistencies across experiences.
Outcome
Since the public release of Fluid in Teams chat:
Over 500+ filed bugs to address inconsistent experiences
Learned how to work cross-functionally effectively
Close communication gaps with engineering
Improved workflow for internal design team
User Feedback
“Working with teammates I collaborate with on a regular basis, moving quicker on small project tasks and being better prepared."
"Mostly for collaboration scenarios with people I don't want to create a together chat for - I can send this to them in my single chats and collaborate across, it's great!"
"Very useful on collaborative teams to update checklist items. Just need to keep it current as the chat moves along."