Back to WorkTianyu Wu

May 2025 – Present

GitHub Copilot for IDEs

Human-Agent Interaction Design for Cross-Platform Developer Workflows

I worked on the Copilot plugins for Eclipse and IntelliJ, and will walk through the design process across both.

Role
UX Designer
Team
Cross-functional team of designers, researchers, PMs, and engineers
Timeline
May 2025 – Present
Scope
· Defined cross-platform design strategy for Copilot experiences across Eclipse and IntelliJ · Owned UX design for GitHub Copilot in Eclipse · Contributed to IntelliJ experiences alongside fellow designers · Designed agent-driven workflows, context management, and failure recovery experiences · Partnered with engineers through implementation and launch.
GitHub Copilot for IDEs hero

Chapter 1

Understanding the Product

  1. Users

    Primary users are developers, operators, and QA engineers working inside IDEs. A large share of adoption comes from B2B enterprise buyers who purchase Copilot for teams — so the experience must serve both individual practitioners and organizational buyers who care about control, clarity, and scale.

    GitHub Copilot users worldwide
    20M+
    Fortune 100 adoption
    90%
    Supported IDEs
    Cross-platform

    VS Code · IntelliJ · Visual Studio · Xcode · Eclipse

    Copilot user scale

    • All-time users
    012.5M25M37.5M50MDec 2022Early 2024Apr 2025Jul 2025
    Cumulative all-time users · public Microsoft / GitHub milestones

    IDE footprint among Copilot platforms

    • VS Code51%
    • Visual Studio19%
    • IntelliJ18%
    • Xcode7%
    • Eclipse5%
    Relative share of Stack Overflow 2025 IDE usage among Copilot-supported editors (normalized). Official Copilot MAU by IDE is not published.

    Sources: Microsoft earnings / TechCrunch (20M+ all-time users, Jul 2025; 90% Fortune 100); GitHub public milestones (1M Dec 2022, 15M Apr 2025). IDE bars use Stack Overflow Developer Survey 2025 usage among Copilot-supported IDEs, normalized to 100% — a public proxy for relative footprint, not internal plugin MAU.

  2. Typical Workflow

    How developers collaborate with GitHub Copilot across a coding task — from understanding goal and context through plan, implement, test, iterate, and ship — with retry and rollback paths when things go wrong.

    AI coding flow diagram for GitHub Copilot

  3. AI Capability

    We selectively reveal agent content to users: information that is not critical while the agent is running is collapsed to improve screen efficiency, while users can manually expand it to inspect details. When an error occurs, the full details expand by default so users can locate the issue.

    More autonomyvsMore predictability

    Sub-agent Design

    Expanded sub-agent design after the redesign
    Finished sub-agent design after the redesign

    Thinking Process

    Thinking process states: running, finished, and expand on click

    Context Understanding + Awareness

    Context understanding before and after: compact multi-file context in chat

    Collecting User's Feedback

    User pain points from research interviews

Chapter 2

Beyond Happy Path: Building Trust in AI Coding

When AI is powerful, how do we design for mistakes, uncertainty, and human control?

Traditional software workflows are largely linear, but AI coding is full of uncertainty. The agent may fail, need to retry, or roll back — so the experience has to give developers more control. AI accelerates coding, but it also amplifies uncertainty.

Agent UX flow diagram for failure, retry, and human control paths

  1. Insight 01

    Developers don't follow one path

    Multiple files. Multiple tasks. Multiple AI conversations.

  2. Insight 02

    AI can make mistakes faster

    Faster generation ≠ faster confidence.

  3. Insight 03

    Developers need control points

    Review. Modify. Undo. Switch context.

Error handling experience in AI coding workflows
Rollback and retry controls for AI coding workflows

Chapter 3

Core Feature Design

  1. 01Cost Transparency

    Cost changed to token-based billing UX flow diagram

    Real time cost indicator

    Token-based billing flow for cost transparency
    Token saving tips for managing Copilot usage cost
    Token-based billing notifications and usage alerts
    Usage indicator design exploration and in-product mockup

  2. 02NES (Nest Edit Suggestions)

    A Code Completion capability that surfaces next-edit suggestions directly in the editor — so the main interaction loop stays inside the coding surface, not a separate chat panel.

    Delete

    Delete

    Replace

    Replace

    Add

    Add

    NES color contrast exploration
    NES component states and variants

  3. 03AI Model Management

    BYOK (Bring Your Own Key) lets developers use their own models inside Copilot — including domestic LLMs — via personal API keys and custom endpoints, so teams can choose the model that fits their workflow, compliance, and cost needs.

    Bring Your Own Key model management in Copilot
    Custom endpoint configuration for BYOK models

Chapter 4

UI System Design, Visual Quality & Accessibility

Eclipse Copilot icon system
Eclipse Copilot UI level-up screens

Design for Eclipse Quick Start — prepare for opensource

Eclipse Copilot Quick Start onboarding flow
Eclipse Copilot Quick Start guide modal in light mode

This guidance window automatically pops up for first-time Eclipse users.

Agent

Agent

Ask

Ask

NES

NES

Shipped on JetBrains Marketplace

Official plugin website screenshots featuring the product UI I designed — Agent, Ask, and Code Completion — as shown to users on the JetBrains Marketplace listing.

JetBrains Marketplace plugin website featuring Copilot UI
Agent

Agent

Ask

Ask

Code Completion

Code Completion

Eclipse Copilot visual poster
Eclipse Copilot UI dark theme