Designing Copilot Chat in Outlook
Designing Copilot Chat in Outlook
Designing Copilot Chat in Outlook
Impact beyond business metrics: Turning design constraints into user engagement, delight, and product innovation
Impact beyond business metrics: Turning design constraints into user engagement, delight, and product innovation
Impact beyond business metrics: Turning design constraints into user engagement, delight, and product innovation
Role
Role
Lead Designer (Outlook)
Year
Year
2024
Platforms
Platforms
OWA (Outlook on the Web)
New Outlook on Windows
Teams Involved
Teams Involved
Outlook Feature Design (Me)
Fluent Design System
Office Design
OVERVIEW
The promise of Copilot Chat in Outlook is to be your context-aware, conversational AI assistant.
This is the story and reflection of how dangerous preconceptions can be and how (healthily and tactfully) challenging existing paradigms can not only drive retention but also pave the way for innovation and bring user delight.
The promise of Copilot Chat in Outlook is to be your context-aware, conversational AI assistant.
This is the story and reflection of how dangerous preconceptions can be and how (healthily and tactfully) challenging existing paradigms can not only drive retention but also pave the way for innovation and bring user delight.
With AI and Copilot being all the hype that anyone at work could talk about, why couldn’t I shake this heavy feeling that we weren’t doing enough?
With AI and Copilot being all the hype that anyone at work could talk about, why couldn’t I shake this heavy feeling that we weren’t doing enough?
Introducing Microsoft 365 Copilot – Your Copilot For Work
Introducing Microsoft 365 Copilot – Your Copilot For Work
https://blogs.microsoft.com/blog/2023/03/16/introducing-microsof…
https://blogs.microsoft.com/blog/2023/03/16/in…
the problem
We successfully shipped fast, but our experience wasn’t meeting user expectations
We successfully shipped fast, but our experience wasn’t meeting user expectations
Chat works, but it didn’t meet our quality bar (yet)
Chat works, but it didn’t meet our quality bar (yet)
The truth was, beyond the glitz and glamour, there were glaring issues.
Our latency was slow. 25% of the time, chat would reference the wrong email you’re asking about. We didn’t have any special Outlook actions Chat could perform on your behalf yet.
The truth was, beyond the glitz and glamour, there were glaring issues.
Our latency was slow. 25% of the time, chat would reference the wrong email you’re asking about. We didn’t have any special Outlook actions Chat could perform on your behalf yet.
the opportunity
But with every hard hitting blow came glimmers of hope and opportunity of what Chat could be.
But with every hard hitting blow came glimmers of hope and opportunity of what Chat could be.
Approach & Strategy
Approach & Strategy
We had an infinite amount of scenarios to potentially tackle, so the burning question was: which one first?
We had an infinite amount of scenarios to potentially tackle, so the burning question was: which one first?
BUSINESS PROBLEM
The engagement is simply not where we want it
The engagement is simply not where we want it
HYPOTHESIS
We believe that designing an interactive, inline chat experience in Outlook will drive Copilot engagement because of its “magic” factor in making common tasks more intuitive and satisfying.
We believe that designing an interactive, inline chat experience in Outlook will drive Copilot engagement because of its “magic” factor in making common tasks more intuitive and satisfying.
1
1
1
USER PROBLEM
User feedback consistently shows that going to Settings feels like a chore.
Ever since New Outlook for Windows emerged, change management was our achilles heel.
User feedback consistently shows that going to Settings feels like a chore.
Ever since New Outlook for Windows emerged, change management was our achilles heel.
HYPOTHESIS
We believe that busy commercial users want an easier, simpler way to personalize their Outlook experience so they can stay in flow while feeling like their email experience is catered to them.
We believe that busy commercial users want an easier, simpler way to personalize their Outlook experience so they can stay in flow while feeling like their email experience is catered to them.
2
2
2
quantitative survey
In launching a survey to 80 commercial users and using feedback from Microsoft’s AIX00 Research Program, ‘setting my automatic reply’ (aka. OOF = Out Of Office) was the top wish listed item.
In launching a survey to 80 commercial users and using feedback from Microsoft’s AIX00 Research Program, ‘setting my automatic reply’ (aka. OOF = Out Of Office) was the top wish listed item.
Conducted on
design approach
Existing guidance told me that chat should feel as conversational as possible & hand off to the appropriate UX that accomplishes the user job.
Existing guidance told me that chat should feel as conversational as possible & hand off to the appropriate UX that accomplishes the user job.
Existing guidance told me that chat should feel as conversational as possible & hand off to the appropriate UX that accomplishes the user job.
influencing design systems
I created these principles when our team needed a framework on how to guide our Copilot experience in Outlook, which later I evangelized to the broader design team at Microsoft to extend to all Copilot experiences in the company.
I created these principles when our team needed a framework on how to guide our Copilot experience in Outlook, which later I evangelized to the broader design team at Microsoft to extend to all Copilot experiences in the company.
Principles shared across
Fluent Design
Team and Office Apps
applying principles to designs
At the time, coherency with other Copilot Chats across Microsoft was my top priority.
At the time, coherency with other Copilot Chats across Microsoft was my top priority.
In retrospect, I should have questioned my own principles more on whether this really was the envisioned UX for our customers. And here’s why...
In retrospect, I should have questioned my own principles more on whether this really was the envisioned UX for our customers. And here’s why...
But the truth was, what we had was largely underwhelming
But the truth was, what we had was largely underwhelming
When eng discovered that the chat output response is surprisingly flexible and we have the freedom to put anything inside, the philosophical question came up: well, why aren’t we doing more?
My first instinct was to push back, shouldn’t we always follow guidance? That’s why design systems & toolkits teams exist, right?
But he had a point - aren’t we trying to solve for engagement? Aren’t we trying to make the Outlook experience easier so users don’t have to go into Settings?
When eng discovered that the chat output response is surprisingly flexible and we have the freedom to put anything inside, the philosophical question came up: well, why aren’t we doing more?
My first instinct was to push back, shouldn’t we always follow guidance? That’s why design systems & toolkits teams exist, right?
But he had a point - aren’t we trying to solve for engagement? Aren’t we trying to make the Outlook experience easier so users don’t have to go into Settings?
problem solving
Pushback from engineering forced us to really look at the effectiveness of our existing principles
Pushback from engineering forced us to really look at the effectiveness of our existing principles
Back to the drawing board
Back to the drawing board
Two big things stood out as I took a step back.
The chat response card is surprisingly flexible. We have the freedom to put whatever we want in there. (Probably shouldn’t but the point was the flexibility).
The chat response card is surprisingly flexible. We have the freedom to put whatever we want in there. (Probably shouldn’t but the point was the flexibility).
Input box
Toggles
Message bars
Placeholder text here
Action
Action
2023 Project Planning
Jon Smith modified 2 hours ago
1
1
Because we were limited on multi-turn capability and latency anyway, prioritizing back-and-forth conversation felt like the wrong thing to focus on.
Because we were limited on multi-turn capability and latency anyway, prioritizing back-and-forth conversation felt like the wrong thing to focus on.
2
2
the solution
Incorporating inline UX to the experience made all the difference
Incorporating inline UX to the experience made all the difference
With that in mind, I had a lot of fun playing with different options until our team felt good about this direction. It was easy, brought “cumbersome Settings UI” right in front of us, and the most important of all, it felt magical.
With that in mind, I had a lot of fun playing with different options until our team felt good about this direction. It was easy, brought “cumbersome Settings UI” right in front of us, and the most important of all, it felt magical.
Impact & Outcomes
Impact & Outcomes
Tying results back to the original user problems, business goals & communicating impact
Tying results back to the original user problems, business goals & communicating impact
BUSINESS PROBLEM
The engagement is simply not where we want it
The engagement is simply not where we want it
HYPOTHESIS
We believe that designing an interactive, inline chat experience in Outlook will drive Copilot engagement because of its “magic” factor in making common tasks more intuitive and satisfying.
We believe that designing an interactive, inline chat experience in Outlook will drive Copilot engagement because of its “magic” factor in making common tasks more intuitive and satisfying.
1
1
IMPACT
Today, 10% of Chat sessions involve users utilizing our “take action” scenarios (e.g., setting automatic replies, creating inbox rules, drafting emails, etc.), and this number continues to grow every day. From this we conclude the value Chat brings is deeply contextual, proactive help that allows users to have agency.
Today, 10% of Chat sessions involve users utilizing our “take action” scenarios (e.g., setting automatic replies, creating inbox rules, drafting emails, etc.), and this number continues to grow every day. From this we conclude the value Chat brings is deeply contextual, proactive help that allows users to have agency.
FEATURE CREW
Not that there were issues within our PM/eng/design team to begin with, but this new shift in collaborating together had huge effects.
Not that there were issues within our PM/eng/design team to begin with, but this new shift in collaborating together had huge effects.
3
2
2
IMPACT
Efficiency and trust skyrocketed since I started bringing engineering into the design process early on. Discussing technical limitations and options from the start allowed me to explore and weigh the pros and cons more collaboratively, and this shift noticeably energized our team to tackle the next scenarios with a new sense of rigor.
Efficiency and trust skyrocketed since I started bringing engineering into the design process early on. Discussing technical limitations and options from the start allowed me to explore and weigh the pros and cons more collaboratively, and this shift noticeably energized our team to tackle the next scenarios with a new sense of rigor.
USER PROBLEM
User feedback consistently shows that going to Settings feels like a chore.
Since New Outlook for Windows emerged, change management was our achilles heel.
User feedback consistently shows that going to Settings feels like a chore.
Since New Outlook for Windows emerged, change management was our achilles heel.
HYPOTHESIS
We believe that busy commercial users want an easier, simpler way to personalize their Outlook experience so they can stay in flow while feeling like their email experience is catered to them.
We believe that busy commercial users want an easier, simpler way to personalize their Outlook experience so they can stay in flow while feeling like their email experience is catered to them.
2
3
3
IMPACT
From the day we released this worldwide, we’ve been receiving positive user feedback on how magical the experience feels.
I love these integrated controls within chat
I should have used this! Doing this manually was pretty annoying
I love that it's just giving me exactly what I want.
Settings is huge, so being able to truncate that down to exactly what I need is incredible
I think this is the confirmation bias we all need to go on OOF
From the day we released this worldwide, we’ve been receiving positive user feedback on how magical the experience feels.
I love these integrated controls within chat
I should have used this! Doing this manually was pretty annoying
I love that it's just giving me exactly what I want.
Settings is huge, so being able to truncate that down to exactly what I need is incredible
I think this is the confirmation bias we all need to go on OOF
DESIGN ACROSS MICROSOFT
Prior to being challenged, I haven’t questioned the decisions behind the Fluent & Office Design System team.
Prior to being challenged, I haven’t questioned the decisions behind the Fluent & Office Design System team.
4
4
IMPACT
Sharing our findings with OfficeAI and Fluent has helped influenced all AI experiences across Microsoft. I was able to influence official guidance to encourage richer cards and inline experiences in chat based on our learnings.
Sharing our findings with OfficeAI and Fluent has helped influenced all AI experiences across Microsoft. I was able to influence official guidance to encourage richer cards and inline experiences in chat based on our learnings.
Reflections
Reflections
Collateral wins, being introspective, and learning about my collaboration style in a tight-knit team
Collateral wins, being introspective, and learning about my collaboration style in a tight-knit team
Designers don’t always know (design) best
Designers don’t always know (design) best
When the engineer on our feature crew pushed hard for inline UX and challenged me to think differently, I admit it was initially an uncomfortable conversation. But without his input, our experience wouldn’t be where it is today. I’ve learned that although we should always start with guidance as a first step, guidance should also be merely taken as its literal term. Guidance. Not meant to be forever set in stone. Toolkits give us the building blocks we need to get started, but as new user needs arise, so do the toolkits.
When the engineer on our feature crew pushed hard for inline UX and challenged me to think differently, I admit it was initially an uncomfortable conversation. But without his input, our experience wouldn’t be where it is today. I’ve learned that although we should always start with guidance as a first step, guidance should also be merely taken as its literal term. Guidance. Not meant to be forever set in stone. Toolkits give us the building blocks we need to get started, but as new user needs arise, so do the toolkits.
Mutual trust between thought partners is key
Mutual trust between thought partners is key
Matter of fact, it’s exactly this type of healthy back-and-forth that not only improves our toolkits, but also builds that wonderful relationship within the feature crew.
This experience revealed the advantages of looping the crew in early, as opposed to a clean cut design handoff to development at set intervals. I liked (and embraced) the messiness, the constant revisiting of decisions, hundreds of comments littered all over my Figma file. This way of working isn’t a one-size-fits-all, but since AI had been in its infancy, this unstructured, uncharted collaboration actually worked extremely well for us.
Matter of fact, it’s exactly this type of healthy back-and-forth that not only improves our toolkits, but also builds that wonderful relationship within the feature crew.
This experience revealed the advantages of looping the crew in early, as opposed to a clean cut design handoff to development at set intervals. I liked (and embraced) the messiness, the constant revisiting of decisions, hundreds of comments littered all over my Figma file. This way of working isn’t a one-size-fits-all, but since AI had been in its infancy, this unstructured, uncharted collaboration actually worked extremely well for us.
Loads of love to the chat crew
Loads of love to the chat crew
PM
PM
Thomas Constantin
Thomas Constantin
Engineering
Engineering
Eylul Tasyurek
Eylul Tasyurek
Kevin Lee
Kevin Lee
Ania Gonzalez
Ania Gonzalez
Daniel Varela
Daniel Varela
Matthew Liu
Matthew Liu
Yaniv Briker
Yaniv Briker
Rajat Nigam
Rajat Nigam
Research
Research
Ivan Martinez
Ivan Martinez
Design
Design
Justine Du (me)
Justine Du (me)
