Pull Requests in Visual Studio - Design Process Showcase
I led the design of complex UI from the initial concepts to the final implementation to find the optimal solution for code review in Visual Studio IDE.
Category
UX Design, User Research, AI
Role
Principal Designer
Client
Microsoft Corporation
Year
2024
The Objective
A pull request (PR) is a collaborative tool used in version control systems like Git to propose and discuss changes to a codebase. Developers create pull requests to request that their changes be reviewed and merged into the main codebase by other team members.
Visual Studio developer environment lacked all pull request capabilities and the feature was one of the highest request items from the community.
My task was to design a seamless pull request experience within Visual Studio IDE, enabling developers to efficiently review, comment on, and merge code changes without leaving their development environment.
User Research
I started benchmarking existing experiences. At the same time I wrote and collected customer and problem hypothesis and created some lo-fidelity wireframes to support user research and spark the discussion with our customers.
We interviewed developers from various backgrounds and experience levels to understand their pain points, needs, and preferences when it comes to code review and collaboration. My partner product manager conducted the actual interviews while I focused on synthesizing the findings and identifying key themes and insights.
Research Findings
Key findings from user research highlighted the need for seamless integration, efficient navigation, and robust collaboration features within the IDE. Developers expressed a desire for a streamlined workflow that minimizes context switching and enhances productivity during code reviews.
"I want to take full advantage of the Visual Studio while reviewing or fixing issues in the PR”
“As an author I want to use the IDE to fix the PR comments.”
“I want to have the PR open on a separate monitor while working on PR changes”"
UX Challenges
• Full pull request experience contains a lot of UI which would require lots of engineering work. • There were many opinions on what features should be included in the first version and how the UI should look like in Visual Studio. • Simultaneously designing for both GitHub and Azure DevOps pull requests as well as Visual Studio Windows and Visual Studio Code complicated the design process. • How to provide the maximum amount of screen real estate for efficient code review?
Design Iterations
I created multiple design iterations to explore different approaches to the pull request experience. Each iteration focused on addressing specific pain points identified during user research, such as navigation, commenting, and merging workflows. I gathered feedback from users and stakeholders to refine the designs and ensure they met the needs of developers.
UX Challenges
• Full pull request experience contains a lot of UI which would require lots of engineering work. • There were many opinions on what features should be included in the first version and how the UI should look like in Visual Studio. • Simultaneously designing for both GitHub and Azure DevOps pull requests as well as Visual Studio Windows and Visual Studio Code complicated the design process. • How to provide the maximum amount of screen real estate for efficient code review?
Final Design and Phased Rollout
The final design consisted of...