Visual Studio Copilot Integrations

Project Overview

I owned and drove the GitHub Copilot integrations across toolsets throughout Visual Studio. I designed for optimised end-to-end experiences that boost developer productivity while navigating competing constraints across different feature teams, and aligning numerous stakeholders.

UX Challenge

Key challenges included:

• The most product teams worked in silos and lacked of understanding the high-value end-to-end scenarios. • Fragmented experiences and inconsistent UI elements and language confused users and hindered productivity. • Introducing new powerful AI functionality on high-density UI can be challenging so that it's discoverable and understandable but doesn't mess with user's muscle memory.

I collaborated closely with product managers, engineers, and other Copilot designers to identify pain points find opportunities for improvement and break silos between different teams.

Rename Suggestions prototype for engineering handoff.

Example: Editor - Rename Suggestions

• Provide AI suggestions automatically without blocking the underlying UI. • Allow users to opt out and turn off the suggestions permanently. • Prevent unnecessary AI costs by cancelling LLM (Large Language Model) call if the user starts typing. • Provide intuitive keyboard navigation for power users. • Maintain consistency with other Copilot integrations in Visual Studio.

Example: Diagnostics - Visualizer

With the updated UI user can write a natural language query and get relevant diagnostics data visualized directly in the code editor. This helps developers quickly understand and address issues in their code without needing to learn complex query languages or navigate through multiple tools.

User can toggle on the AI prompt and refine the current expression with natural language instructions.

Prototypes like this are at the core of my design process. They help to validate the designs early with users and stakeholders, and also serve as a clear communication tool for engineering handoff. This one was made directly in the Figma design tool using interactive components and animation features.

Table of contents for the Copilot Partner UX Guidelines.

UX Guidelines

Copilot partner teams worked in silos which had resulted fragmented and inconsistent UXexperiences. I created UX guidelines:

• Established a unified design language for Copilot integrations across Visual Studio. • Empowered teams to make informed design decisions without designer involvement. • Strengthened cross-team collaboration and end-to-end user experience.

More designs...

While leading the design efforts for all Copilot integrations in Visual Studio, I created numerous designs across multiple teams. Here are a few additional examples:

Design mockup showing the flow of using Copilot PR Description. — Version Control - Copilot PR Description flow.

Design mockup 2 showing the new indicator interactions. — Version Control - Main UI elements of Local AI Review flow.

Design file screenshot showing high-level view to content exclusion guidelines. — Content exclusion was larger cross-team AI design task where I managed to establish clear UX guidelines and communicate those across multiple teams.

GIF of the doc comments Ambient AI prototype in action. — Ambient AI - Doc Comments feature provides documentation on the fly based on the function code context.

Generate method Ambient AI feature visualised in Visual Studio. — Ambient AI - Generate Method feature helps developers quickly create new methods based on the existing code context.

Diagnostics Performance profiler feature design mockup. — A new diagnostics performance profiler launch page that provides AI recommended tools and allows natural language queries for finding relevant performance issues.