AI enhanced live, portable canvas that span across M365 experiences
Microsoft
2023
Web & Mobile
AI enhanced live, portable canvas that span across M365 experiences
Microsoft
2023
Web & Mobile
AI enhanced live, portable canvas that span across M365 experiences
Microsoft
2023
Web & Mobile
What I did
Product design lead & co-lead on AI framework
I was part of the inital design and creation of the Loop app and led multiple features. I actively crafted the AI framework and AI surface patterns since the early stages through strategy, concepts, and sprints. Later on, I led the implementation of the design concepts and worked out the design system details to a scalable pattern framework. I worked closely with the Engineers, PM, research and data science, building out tons of prototypes to get the best research findings that helped define the project’s success.
What I did
Product design lead & co-lead on AI framework
I was part of the inital design and creation of the Loop app and led multiple features. I actively crafted the AI framework and AI surface patterns since the early stages through strategy, concepts, and sprints. Later on, I led the implementation of the design concepts and worked out the design system details to a scalable pattern framework. I worked closely with the Engineers, PM, research and data science, building out tons of prototypes to get the best research findings that helped define the project’s success.
What I did
Product design lead & co-lead on AI framework
I was part of the inital design and creation of the Loop app and led multiple features. I actively crafted the AI framework and AI surface patterns since the early stages through strategy, concepts, and sprints. Later on, I led the implementation of the design concepts and worked out the design system details to a scalable pattern framework. I worked closely with the Engineers, PM, research and data science, building out tons of prototypes to get the best research findings that helped define the project’s success.
Team
Design partner Paul Scudieri, PM, Research, Full stack engineers, Data scientists
Challenge
Empower users to better work together in a remote world across the M365 ecosystem with a intuitive and effective AI system
Outcome
A completely new AI framework and system within Loop to supercharge workflows. Loop is a powerful and flexible canvas with portable components that stay in sync and move freely across Microsoft 365 apps.
Team
Design partner Paul Scudieri, PM, Research, Full stack engineers, Data scientists
Challenge
Empower users to better work together in a remote world across the M365 ecosystem with a intuitive and effective AI system
Outcome
A completely new AI framework and system within Loop to supercharge workflows. Loop is a powerful and flexible canvas with portable components that stay in sync and move freely across Microsoft 365 apps.
Team
Design partner Paul Scudieri, PM, Research, Full stack engineers, Data scientists
Challenge
Empower users to better work together in a remote world across the M365 ecosystem with a intuitive and effective AI system
Outcome
A completely new AI framework and system within Loop to supercharge workflows. Loop is a powerful and flexible canvas with portable components that stay in sync and move freely across Microsoft 365 apps.
Context
Context
Context
A new platform for live collaboration
Starting with a blank slate. Loop is a new live collaboration application that breaks down the barriers between Microsoft 365, Outlook, Teams, Word, Excel, and PowerPoint applications, providing a fluid and connected user experience. The secret to this seamless integration lies in Fluid Framework technology, which enables the creation of portable components that flow freely between applications while remaining in sync.
A new platform for live collaboration
Starting with a blank slate. Loop is a new live collaboration application that breaks down the barriers between Microsoft 365, Outlook, Teams, Word, Excel, and PowerPoint applications, providing a fluid and connected user experience. The secret to this seamless integration lies in Fluid Framework technology, which enables the creation of portable components that flow freely between applications while remaining in sync.
A new platform for live collaboration
Starting with a blank slate. Loop is a new live collaboration application that breaks down the barriers between Microsoft 365, Outlook, Teams, Word, Excel, and PowerPoint applications, providing a fluid and connected user experience. The secret to this seamless integration lies in Fluid Framework technology, which enables the creation of portable components that flow freely between applications while remaining in sync.
[Hypothesis]
Users need a clear AI (Copilot) system with dedicated entry points and surfaces to feel empowered to collaborate and use AI to enhance workflows.
[Hypothesis]
Users need a clear AI (Copilot) system with dedicated entry points and surfaces to feel empowered to collaborate and use AI to enhance workflows.
[Hypothesis]
Users need a clear AI (Copilot) system with dedicated entry points and surfaces to feel empowered to collaborate and use AI to enhance workflows.
Outcome
Outcome
Outcome
Loop's first AI system and patterns
Paul Scudieri and I have been the designers and drivers for the AI framework, patterns and system for Copilot in Loop that allows other feature teams to leverage patterns for they AI features. We've created a system of 3 Copilot surfaces that work harmoniously together: [1] On-canvas (multiplayer) Copilot experience, [2[ Global command bar that helps users find the right Copilot surface and features, [3] the private Copilot chat surface
Loop's first AI system and patterns
Paul Scudieri and I have been the designers and drivers for the AI framework, patterns and system for Copilot in Loop that allows other feature teams to leverage patterns for they AI features. We've created a system of 3 Copilot surfaces that work harmoniously together: [1] On-canvas (multiplayer) Copilot experience, [2[ Global command bar that helps users find the right Copilot surface and features, [3] the private Copilot chat surface
Loop's first AI system and patterns
Paul Scudieri and I have been the designers and drivers for the AI framework, patterns and system for Copilot in Loop that allows other feature teams to leverage patterns for they AI features. We've created a system of 3 Copilot surfaces that work harmoniously together: [1] On-canvas (multiplayer) Copilot experience, [2[ Global command bar that helps users find the right Copilot surface and features, [3] the private Copilot chat surface
Flexible host integration pattern
A unique case we've encountered is that in Teams we use a Loop canvas for the meeting notes that Copilot should collect during the meeting being recorded. In this scenario, Copilot actively goes through the transcript to take down notes - so we had to adjust the UI to fit this use case. Based on the environment, the surface also takes on the theming of the host environment.
Flexible host integration pattern
A unique case we've encountered is that in Teams we use a Loop canvas for the meeting notes that Copilot should collect during the meeting being recorded. In this scenario, Copilot actively goes through the transcript to take down notes - so we had to adjust the UI to fit this use case. Based on the environment, the surface also takes on the theming of the host environment.
Flexible host integration pattern
A unique case we've encountered is that in Teams we use a Loop canvas for the meeting notes that Copilot should collect during the meeting being recorded. In this scenario, Copilot actively goes through the transcript to take down notes - so we had to adjust the UI to fit this use case. Based on the environment, the surface also takes on the theming of the host environment.
Approach
Approach
Approach
AI - a new tool with a steep learning curve
AI is driving entirely new intent-based commanding patterns but all work is, and always has been, collaborative. There is a need/opportunity to consider how these new patterns impact already messy collaborative context and how we can help users prompt and steer AI to get the output they desire.
From a business perspective, Microsoft cares to drive MAU and growth of Loop usage by empowering users to be more efficient in their workflows with the help of Copilot.
AI - a new tool with a steep learning curve
AI is driving entirely new intent-based commanding patterns but all work is, and always has been, collaborative. There is a need/opportunity to consider how these new patterns impact already messy collaborative context and how we can help users prompt and steer AI to get the output they desire.
From a business perspective, Microsoft cares to drive MAU and growth of Loop usage by empowering users to be more efficient in their workflows with the help of Copilot.
AI - a new tool with a steep learning curve
AI is driving entirely new intent-based commanding patterns but all work is, and always has been, collaborative. There is a need/opportunity to consider how these new patterns impact already messy collaborative context and how we can help users prompt and steer AI to get the output they desire.
From a business perspective, Microsoft cares to drive MAU and growth of Loop usage by empowering users to be more efficient in their workflows with the help of Copilot.
Competitors as of Nov, 2024
Design process - be as agile as possible
Due to the high pressure of needing to deliver a high quality AI system as soon as possible to compete with the competiton, we had to be as agile and flexible as possible. This especially affected design and research so we could do a lot of rapid prototyping and quick user testing on the fly.
Design process - be as agile as possible
Due to the high pressure of needing to deliver a high quality AI system as soon as possible to compete with the competiton, we had to be as agile and flexible as possible. This especially affected design and research so we could do a lot of rapid prototyping and quick user testing on the fly.
Design process - be as agile as possible
Due to the high pressure of needing to deliver a high quality AI system as soon as possible to compete with the competiton, we had to be as agile and flexible as possible. This especially affected design and research so we could do a lot of rapid prototyping and quick user testing on the fly.
Minimal viable product
Minimal viable product
Minimal viable product
1st experience: On-canvas mulitplayer AI experience
For the on-canvas experience users can start from scratch and create content with Copilot suggestions, or refine existing content with the help of AI and together with other collaborators.Here is a flowchart to showcase the creation on canvas.
For a better understanding on how interactions and behaviors are tied together, I created a user flow diagram to illustrate the steps for the on-canvas Copilot steering experience. A user has the options to start with new content, or by leveraging existing content written by a human or by AI for the next re-write iteration.
1st experience: On-canvas mulitplayer AI experience
For the on-canvas experience users can start from scratch and create content with Copilot suggestions, or refine existing content with the help of AI and together with other collaborators.Here is a flowchart to showcase the creation on canvas.
For a better understanding on how interactions and behaviors are tied together, I created a user flow diagram to illustrate the steps for the on-canvas Copilot steering experience. A user has the options to start with new content, or by leveraging existing content written by a human or by AI for the next re-write iteration.
1st experience: On-canvas mulitplayer AI experience
For the on-canvas experience users can start from scratch and create content with Copilot suggestions, or refine existing content with the help of AI and together with other collaborators.Here is a flowchart to showcase the creation on canvas.
For a better understanding on how interactions and behaviors are tied together, I created a user flow diagram to illustrate the steps for the on-canvas Copilot steering experience. A user has the options to start with new content, or by leveraging existing content written by a human or by AI for the next re-write iteration.
1
Zero Query State
When the user is adding a new Copilot block to the canvas, we provide a range of suggested prompts (intent based) and refiner suggestion while they type a prompt to understand the multi turn ability.
2
Active Copilot block
Users have the ability to manually manipulate the content, steer with Copilot in a multi turn fashion, and even collaboratively prompt with Copilot. All of these experiences were favourably compared to ChatGPT.
1
Inactive Copilot block
Once the user is done with the iterations, the block visually integrates with the other block experiences on the canvas. All the steering and re-writing history is stored and can be accessed again when the user wants to edit the block
Fazit: Users loved the V1 experience, but we could do better
[1] Retain the aspects of the v1 design that resonated
[2] Customers expect to use LLMs to interact with existing content in addition to generation of new content
[3] Tighter integration - The v1 block felt a little disjointed from the canvas, so we wanted to make the content and the entry points feel more integrated[4] Responsive behaviour - As Loop Copilot experiences begin to traverse the M365 ecosystem, we wanted to design an experience that was responsive to many different screen sizes
Revision
Revision
Revision
The vNext
Based on all the learnings we've had from the v1 experience, we could easily break down what needed to change for an improved experience. The main focus was to make it feel more integrated with the canvas experience, not to hide any content and not to break up any reading flow the user is actively doing.
The vNext
Based on all the learnings we've had from the v1 experience, we could easily break down what needed to change for an improved experience. The main focus was to make it feel more integrated with the canvas experience, not to hide any content and not to break up any reading flow the user is actively doing.
The vNext
Based on all the learnings we've had from the v1 experience, we could easily break down what needed to change for an improved experience. The main focus was to make it feel more integrated with the canvas experience, not to hide any content and not to break up any reading flow the user is actively doing.
Information architecture
I constructed an information architecture map of the older design (before), to better understand how to group and separate the jobs and information, according to past feedback and asks. The new mapping has clearer delegation of jobs and also helped with designing the new UX
Information architecture
I constructed an information architecture map of the older design (before), to better understand how to group and separate the jobs and information, according to past feedback and asks. The new mapping has clearer delegation of jobs and also helped with designing the new UX
Information architecture
I constructed an information architecture map of the older design (before), to better understand how to group and separate the jobs and information, according to past feedback and asks. The new mapping has clearer delegation of jobs and also helped with designing the new UX
Responsive states (for big and small screens)
After collaborating with multiple feature teams working on Loop, it had to develop a new variant to account for smaller surfaces.I created a decision flowchart, in order for partners to understand which variant would best apply for their scenario.Example where flyout is needed: Teams meeting notes, Loop components
Responsive states (for big and small screens)
After collaborating with multiple feature teams working on Loop, it had to develop a new variant to account for smaller surfaces.I created a decision flowchart, in order for partners to understand which variant would best apply for their scenario.Example where flyout is needed: Teams meeting notes, Loop components
Responsive states (for big and small screens)
After collaborating with multiple feature teams working on Loop, it had to develop a new variant to account for smaller surfaces.I created a decision flowchart, in order for partners to understand which variant would best apply for their scenario.Example where flyout is needed: Teams meeting notes, Loop components
Accessible for everyone (web + mobile)
Microsoft has a high bar for inclusive and accessible products, so I spent a decent amount of time to figure out the right patterns so this experience would be accessible to any user.
Accessible for everyone (web + mobile)
Microsoft has a high bar for inclusive and accessible products, so I spent a decent amount of time to figure out the right patterns so this experience would be accessible to any user.
Accessible for everyone (web + mobile)
Microsoft has a high bar for inclusive and accessible products, so I spent a decent amount of time to figure out the right patterns so this experience would be accessible to any user.
Feedback
Feedback
Feedback
Continuous testing with users was key
As we there were no existing patterns we could lean on, it was crucial to continously test our ideas and system directions to verify what works and what didn't. Especially in the beginning, we had research rounds with users within every 2 week timeframes, so we wouldn't head down the wrong path.
Continuous testing with users was key
As we there were no existing patterns we could lean on, it was crucial to continously test our ideas and system directions to verify what works and what didn't. Especially in the beginning, we had research rounds with users within every 2 week timeframes, so we wouldn't head down the wrong path.
Continuous testing with users was key
As we there were no existing patterns we could lean on, it was crucial to continously test our ideas and system directions to verify what works and what didn't. Especially in the beginning, we had research rounds with users within every 2 week timeframes, so we wouldn't head down the wrong path.
"I love that this is all under a single Copilot umbrella…it feels like a system or a bridge, like Copilot is a bridge like Google is one big bridge. I like this."
"I love that this is all under a single Copilot umbrella…it feels like a system or a bridge, like Copilot is a bridge like Google is one big bridge. I like this."
"This is going to boost collaboration and remote work in amazing ways with transparency and accountability, but in a smooth and inviting way."
"This is going to boost collaboration and remote work in amazing ways with transparency and accountability, but in a smooth and inviting way."
SUSANNE DUSWALD
©
All rights reserved. 2025
SUSANNE DUSWALD
©
All rights reserved. 2025
SUSANNE DUSWALD
©
All rights reserved. 2025