One card system that promotes flexibility, predictability and scalability across all Microsoft products. Web and mobile.
Microsoft
2025
Web & mobile
One card system that promotes flexibility, predictability and scalability across all Microsoft products. Web and mobile.
Microsoft
2025
Web & mobile
One card system that promotes flexibility, predictability and scalability across all Microsoft products. Web and mobile.
Microsoft
2025
Web & mobile
What I did
Product design co-led, driving adoption
I worked on this card system over multiple months, collaborating with multiple stakeholders across timezones and working hand-in-hand with my co-lead Toshie Rashtavie. I specifically focused on driving alignment across card types and team requirements, reducing ambiguity, create collaborative set up between all the teams, led negotiations and spearheaded with system thinking to build out this framework. I also got into the deep end and worked through design challenges and individual card details.
What I did
Product design co-led, driving adoption
I worked on this card system over multiple months, collaborating with multiple stakeholders across timezones and working hand-in-hand with my co-lead Toshie Rashtavie. I specifically focused on driving alignment across card types and team requirements, reducing ambiguity, create collaborative set up between all the teams, led negotiations and spearheaded with system thinking to build out this framework. I also got into the deep end and worked through design challenges and individual card details.
What I did
Product design co-led, driving adoption
I worked on this card system over multiple months, collaborating with multiple stakeholders across timezones and working hand-in-hand with my co-lead Toshie Rashtavie. I specifically focused on driving alignment across card types and team requirements, reducing ambiguity, create collaborative set up between all the teams, led negotiations and spearheaded with system thinking to build out this framework. I also got into the deep end and worked through design challenges and individual card details.
Team
Collaboration between 4 design teams across 3 timezones, and lots of collaboration with multiple other teams for coherency
Challenge
Create a framework for file cards across all Microsoft products to increase predictability and coherency
Outcome
Modular and scalable file card system infused with AI
Team
Collaboration between 4 design teams across 3 timezones, and lots of collaboration with multiple other teams for coherency
Challenge
Create a framework for file cards across all Microsoft products to increase predictability and coherency
Outcome
Modular and scalable file card system infused with AI
Team
Collaboration between 4 design teams across 3 timezones, and lots of collaboration with multiple other teams for coherency
Challenge
Create a framework for file cards across all Microsoft products to increase predictability and coherency
Outcome
Modular and scalable file card system infused with AI
[Hypothesis]
Creating one card framework that's scalable and flexible, building on the same foundation, allows for a predictable file system across Microsoft applications
[Hypothesis]
Creating one card framework that's scalable and flexible, building on the same foundation, allows for a predictable file system across Microsoft applications
[Hypothesis]
Creating one card framework that's scalable and flexible, building on the same foundation, allows for a predictable file system across Microsoft applications
Outcome
Outcome
Outcome
One card system to rule them all...
After multiple rounds of iterations, syncing and collaborating with partner teams, we have finally landed at the point where we created a scalable, modular card framework that works for web applications, mobile and even physical product screens. We've build in enough flexibility so the cards could cater to all the different use cases that the different application environments need to cover. The framework covers the structure and IA, that persistent and predictability across all card types.
One card system to rule them all...
After multiple rounds of iterations, syncing and collaborating with partner teams, we have finally landed at the point where we created a scalable, modular card framework that works for web applications, mobile and even physical product screens. We've build in enough flexibility so the cards could cater to all the different use cases that the different application environments need to cover. The framework covers the structure and IA, that persistent and predictability across all card types.
One card system to rule them all...
After multiple rounds of iterations, syncing and collaborating with partner teams, we have finally landed at the point where we created a scalable, modular card framework that works for web applications, mobile and even physical product screens. We've build in enough flexibility so the cards could cater to all the different use cases that the different application environments need to cover. The framework covers the structure and IA, that persistent and predictability across all card types.
Universal
Plug and play in all surfaces and canvases across the entire Microsoft ecosystem.
Centralized security and compliance
Content card - all in one
Easy switch between AI-infused and "plain" file cards (Copilot vs premium users)
Customizable
Card actions for various In-context experiences
Action set customized per content and endpoint
...that also applies to mobile...
For a full cross-platform system, I also worked closely with the mobile Fluent team to ensure a consistent experience across web and mobile. I took on the lead after their lead designer handed off, to continue the effort and ensure adoption and continuous coherency.
...and devices
For a full cross-platform system, I also worked closely with the mobile Fluent team to ensure a consistent experience across web and mobile. I took on the lead after their lead designer handed off, to continue the effort and ensure adoption and continuous coherency.
Modularity
Modularity
Modularity
Let's play - with building blocks!
To create a modular framework, we started the explores by looking at modular "bulding blocks". The idea behind it is, that teams can turn off the blocks they don't require - only very few elements are mandatory. This leads to different card scales, but they all follow the same architecture and visual treatment - same on web, tablet and mobile.
Let's play - with building blocks!
To create a modular framework, we started the explores by looking at modular "bulding blocks". The idea behind it is, that teams can turn off the blocks they don't require - only very few elements are mandatory. This leads to different card scales, but they all follow the same architecture and visual treatment - same on web, tablet and mobile.
Let's play - with building blocks!
To create a modular framework, we started the explores by looking at modular "bulding blocks". The idea behind it is, that teams can turn off the blocks they don't require - only very few elements are mandatory. This leads to different card scales, but they all follow the same architecture and visual treatment - same on web, tablet and mobile.
Process
Process
Process
Starting with an audit - What a mess!!
To ground myself on what we have today, I started with a typical audit. During this process, I realized there were way too many solutions within the Microsoft ecosystem and they all looked different but were kinda similar. There was a clear need for a better system - so Toshie, Penny and I started to tackle this problem as a trio, with Toshie leading the component implementation and I focused on the scalablility and system strategy. We knew right from the start, that we need to cover the new M365 Copilot app, Teams, Word, Excel and Powerpoint, Outlook, Loop / Pages, OneDrive.. and so many more.
Starting with an audit - What a mess!!
To ground myself on what we have today, I started with a typical audit. During this process, I realized there were way too many solutions within the Microsoft ecosystem and they all looked different but were kinda similar. There was a clear need for a better system - so Toshie, Penny and I started to tackle this problem as a trio, with Toshie leading the component implementation and I focused on the scalablility and system strategy. We knew right from the start, that we need to cover the new M365 Copilot app, Teams, Word, Excel and Powerpoint, Outlook, Loop / Pages, OneDrive.. and so many more.
Starting with an audit - What a mess!!
To ground myself on what we have today, I started with a typical audit. During this process, I realized there were way too many solutions within the Microsoft ecosystem and they all looked different but were kinda similar. There was a clear need for a better system - so Toshie, Penny and I started to tackle this problem as a trio, with Toshie leading the component implementation and I focused on the scalablility and system strategy. We knew right from the start, that we need to cover the new M365 Copilot app, Teams, Word, Excel and Powerpoint, Outlook, Loop / Pages, OneDrive.. and so many more.
Repeated user testing for better results
To make sure we are not messing up any existing system and match user expectations and needs, we conducted multiple rounds of research. Depending on the app environment, the jobs to be done vastly differd, but we had great insights that helped us shape the system model.
Repeated user testing for better results
To make sure we are not messing up any existing system and match user expectations and needs, we conducted multiple rounds of research. Depending on the app environment, the jobs to be done vastly differd, but we had great insights that helped us shape the system model.
Repeated user testing for better results
To make sure we are not messing up any existing system and match user expectations and needs, we conducted multiple rounds of research. Depending on the app environment, the jobs to be done vastly differd, but we had great insights that helped us shape the system model.
Fazit: Users want AI to navigate files
As we have the opportunity to leverage LLMs, we can generate AI summaries, AI insights, ...even propose next steps e.g. suggest similar proposals. Users deemed (especially in the context of the M365 Copilot app) AI-infused experiences as the most valuable when scanning over file content cards. They are willing to skip previews (which often don't have enough information) for reason markers and key insights. Reason markers are always at the top of the card, indicating why Copilot is showing you this card.
Fazit: Users want AI to navigate files
As we have the opportunity to leverage LLMs, we can generate AI summaries, AI insights, ...even propose next steps e.g. suggest similar proposals. Users deemed (especially in the context of the M365 Copilot app) AI-infused experiences as the most valuable when scanning over file content cards. They are willing to skip previews (which often don't have enough information) for reason markers and key insights. Reason markers are always at the top of the card, indicating why Copilot is showing you this card.
Fazit: Users want AI to navigate files
As we have the opportunity to leverage LLMs, we can generate AI summaries, AI insights, ...even propose next steps e.g. suggest similar proposals. Users deemed (especially in the context of the M365 Copilot app) AI-infused experiences as the most valuable when scanning over file content cards. They are willing to skip previews (which often don't have enough information) for reason markers and key insights. Reason markers are always at the top of the card, indicating why Copilot is showing you this card.
Designing like we play - with building blocks
With multiple brainstorming sessions, individual focus time and lot of discussions I started drawing out this framework and started building out some principles. The goal was to play with minimal solutions (chicklets) and extreme versions that have all the building blocks - so I could stress test the model. This should also apply mobile the same way it does on web - for horizontal and vertical cards.
Designing like we play - with building blocks
With multiple brainstorming sessions, individual focus time and lot of discussions I started drawing out this framework and started building out some principles. The goal was to play with minimal solutions (chicklets) and extreme versions that have all the building blocks - so I could stress test the model. This should also apply mobile the same way it does on web - for horizontal and vertical cards.
Designing like we play - with building blocks
With multiple brainstorming sessions, individual focus time and lot of discussions I started drawing out this framework and started building out some principles. The goal was to play with minimal solutions (chicklets) and extreme versions that have all the building blocks - so I could stress test the model. This should also apply mobile the same way it does on web - for horizontal and vertical cards.
From many to a few
We had a clear goal in mind: Reduce the options of different cards, but still keep it a flexible system that can also grow over time. Depending on where the card shows up, the user might want to see the AI insights upfront, OR they are better hidden and accessible via a button because other information is more important. Also in the case that no AI is available the AI-building block can just be disabled.
From many to a few
We had a clear goal in mind: Reduce the options of different cards, but still keep it a flexible system that can also grow over time. Depending on where the card shows up, the user might want to see the AI insights upfront, OR they are better hidden and accessible via a button because other information is more important. Also in the case that no AI is available the AI-building block can just be disabled.
From many to a few
We had a clear goal in mind: Reduce the options of different cards, but still keep it a flexible system that can also grow over time. Depending on where the card shows up, the user might want to see the AI insights upfront, OR they are better hidden and accessible via a button because other information is more important. Also in the case that no AI is available the AI-building block can just be disabled.
Guidance for component system
So partner teams have an easier time leveraging the system correctly, I drew a decision tree to help them decide what type of card or list view would fit best to their experience and needs.
Guidance for component system
So partner teams have an easier time leveraging the system correctly, I drew a decision tree to help them decide what type of card or list view would fit best to their experience and needs.
Guidance for component system
So partner teams have an easier time leveraging the system correctly, I drew a decision tree to help them decide what type of card or list view would fit best to their experience and needs.
Guidance for component system
So partner teams have an easier time leveraging the system correctly, I drew a decision tree to help them decide what type of card or list view would fit best to their experience and needs.
Guidance for component system
So partner teams have an easier time leveraging the system correctly, I drew a decision tree to help them decide what type of card or list view would fit best to their experience and needs.
Guidance for component system
So partner teams have an easier time leveraging the system correctly, I drew a decision tree to help them decide what type of card or list view would fit best to their experience and needs.
SUSANNE DUSWALD
©
All rights reserved. 2025
SUSANNE DUSWALD
©
All rights reserved. 2025
SUSANNE DUSWALD
©
All rights reserved. 2025