Fluid Framework - Seamless collaboration

UXUI Design - Microsoft Office
What is Fluid Framework?
Fluid Framework is a new set of technologies that developers can use to build experiences that break down the barriers between apps.
It introduces a new working experience with flexible individual component parts, helping people turn content they create within apps into collaborative building blocks.
The opportunity
Collaboration is a living, breathing endeavor. Individual actions are taken and collective results achieved. It unfolds in different ways and in different environments, responding to shifting needs and landscapes.

For the next chapter of collaboration to unfold, we need tools as fluid, dynamic, and contextual as the process itself. Fluid breaks down entire experiences into individual component parts, helping people turn content they create within apps into collaborative building blocks.
For Who?
We see this opportunity of enhancing productivity for modern information workers, who are familiar with the concept of online storage and sharing, using online collaboration in their daily work. We several rounds of interviews when kicking off the project. For all the teams we interviewed, it is their everyday practice to deal with remote working sessions and waiting for others(clients or teammates) to piece together the puzzle and wrap up the task.
We are learning from Accenture, Avanade, Cisco, Estee Lauder, Fresenius, Koch Industries, LinkedIn, LLBean, Lobe.ai, Nike, OMG(Omnicom), Usertesting.com, Zillow, etc.
Modern information worker
The problem - Apps fragments, rather than support, workflows
One of the user pain points got continuously brought up during our research was switching between apps for collaboration or tasks.
Our users end up working in the ways the tool dictates, instead of tools supporting the way we work.
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, it just seems like we do this a lot now a days where we are switching context quite a bit. Running to a meeting here and then coming back and "what was that document I was working on?" -- Ben
Seamless collaboration
- with live and connected components
By leveraging the Fluid framework technology, we created a Fluid component system cross the core Office apps. With a Fluid create button, user will be able to create a working component in Outlook web, Teams, OneNote, Word, PPT, and EXL.undefined
The problem - Apps fr
agments, rather than
Those Fluid components can be transferred cross apps, and stay alive & connected. The tech of Fluid framework allows real-time collaboration.
Cross products creation: Fluid components can be created within Outlook, Teams, Word, PowerPoint, Excel, OneNote, etc. And the components are shared with collaborators in the context by default.
Seamless collaboration: The created Fluid components can be cloned cross Apps, and stay live & connected. The tech of Fluid framework allows real-time collaboration cross Apps.
Coherent collaboration UI: To integrate the collaboration flow, we leveraged our current collaboration functions such as people entity,
@ mention, share, and the notification system.
Modern way of working - Light canvas for quick start
Complicated polishing and deep authoring are not anymore indispensable in the process of modern working. People are getting used to relying on the smart tools to deal with formatting so that they can focus better on the content and output faster.
Those changes require a light and simplified canvas, which takes no effort to pull up and re-find. We launched the very first version of Fluid canvas preview
at Oct. 2019.
Canvas visual iterations
We did a few rounds of visual iterations for the canvas, trying to figure out the best layout for a lightweight collab working space. We launched the preview version at Ignite 2019. But the process is still ongoing. :)
Branding moments
Fluid components can be added and live in any canvas/input box/content review surfaces. And Fluid files can be found through search or as MRU recommendations in Office.com.
Branding moments
To manifest the specialty of Fluid components, we created a unique visual identity to help user identify Fluid components at the moment of inserting, reviewing, copy pasting, and re-finding.
Visual toolkit
For building up the product more efficiently and coherently. We developed a visual toolkit for designers and engineers to grab controls, type ramp, and color values. The toolkit is coherent with the Office Fluent design language. Meanwhile, we were also using Fluid as a test field for more possibilities.
Office OutLook         Office Teams
Office Canvas            Office.com
My role
Driving Art direction and brand promotion
UX design for Canvas structure and components behavior
Participate and provide materials for research and brainstorm sessions
Work close with partner teams for coherent UXUI
Build up visual toolkit