Microsoft Copilot Code Interpreter Case Study

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Introduction

A bit about Copilot & Code Interpreter feature

Copilot is a GenAI chat created for the Microsoft community.
Copilot is the revamped version of Bing Chat.
Code Interpreter auto generates python code & has access to many .py libraries. It improves AI chat reasoning, and increases capabilities.

Problem statements

Code interpreter response generation is a bit slower than regular pre-trained LLM response. People are impatient and will leave chat within 30 seconds - 1 minute.
Copilot lacked transparency (Responsible AI). Users were not aware of the steps AI took to generate the response to their prompt.

Goals

Business

Improve responsible AI to build user trust.
Enhance reasoning capabilities.
Convert users into Copilot Pro customers.

Design

H.M.W signify users that it is taking a bit longer to auto generate code to respond to the user prompt?
H.M.W create entry points to view the code and showcase the steps AI took for none-tech savvy users?

Team & My Role

My role

I was an individual contributor product designer who worked on this project end-to-end.
I collaborated with PM partner, principal design manager, copy writer, marketing team, and a dev team to bring these designs to life.
I led the initiatives to improve responsible AI and show code & meta processing stages of Copilot.

Timeline

March 2023

Open AI GPT4 Announcement 14th of March

November 2023

1st - 3rd
Project briefed
Understanding GPT4 ADA
SWOT & H.M.W.

6th - 10th
MVP concept designs
1st Review / Brad A., Jeff & Jake
Review updates / MVP ready

13th - 17th
User stories (Chat IxD) design
Codex huddle review

20th - 30th
Dev team review
BugBash
Dev team support
First launch

December 2023

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

The Verge Article Dec 5th 2023”.

January 2024

Copilot UI Revamp

Updated designs to match the new UI with the newly formed Copilot team

Improved the meta messaging to meet responsible AI standards

February 2024

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Superbowl commercial marking the launch of New Copilot UI. Code Interpreter use is highlighted as one of the use case examples

March 2024

Explored and improved code entry points to match the new UI

Created loading signifier and exported .json files for dev integration

June 2024

New business goal: explored methods to convert regular users to Pro Copilot customers

Created an updated toast notification system for Copilot design system

Research

Design Process

Latency signifier explorations

Users wants a fast response, but the AI model needs bit more time to reason, run code interpreter, and generate a proper response.
I explored multiple ways we can showcase loading signifier to communicate with the user that the AI is "thinking".
After reviewing the concepts with multiple stakeholders, we narrowed the design down to a spinner animation transitioning to a badge button with a code icon. This was also a signifier to view code that the AI has generated to create the response to the prompt.

Reviews

UX developer director & managers.
Copilot design team.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Code view entry point explorations

There were multiple dynamic entry points to view the code in chat.
I explored a range of UI components that can achieve the results we were looking for. I narrowed down through design team reviews and aligned with the Copilot brand and user expereince best pracitices.
I took this opportunity to improve responsible AI practice of improving transparency, primarily for tech savvy users such as our developer community at Microsoft.

Reviews

UX manager.
PM partner & developer team.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Final Solutions

Happy path

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Copilot Pro Upsell

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Limit error + upsell message

Results

Accomplishments

Latest update I was involved in was launched in June 2024.
We improved Copilot capabilities by 20x.
I designed and shipped solutions that improve responsible AI by 40% (based on 5 pillars of responsible AI: explainability, bias and fairness, reproducibility, sustainability, and transparency). Innitives I worked on covered explainability and transparency of AI.
Fun Fact: CVP at Microsoft - Search & AI (Jordi Ribas) shared the work I did with my team on LinkedIn.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Microsoft

Copilot Code Interpreter

Overview

Overview

Overview

Introduction

A bit about Copilot & Code Interpreter feature

Problem statements

Goals

Business

Design

Team & My Role

My role

Timeline

Research

Design Process

Latency signifier explorations

Reviews

Code view entry point explorations

Reviews

Final Solutions

Happy path

Copilot Pro Upsell

Limit error + upsell message

Results

Accomplishments

View More Case Studies

CaseWare IDEA Data Analytics

Canadian Tire Corporation