Visual Studio Git Tooling
Visual Studio is a comprehensive Integrated Development Environment (IDE) from Microsoft, providing a rich set of tools for writing, debugging, and deploying software across various platforms and languages. Its vast user base primarily consists of professional developers, students, and open-source contributors working on applications.
My role
Sr. UX Designer
Company
Microsoft
Project Duration
6 months
Overview
Note: The lack of screenshots is due to some features not public yet
Challenges
One of the most popular features of Visual Studio is its Git tooling, which provides a integration with Git repositories and allows users to manage their code. However, community feedback around the Git tooling has largely consisted of criticism of lacking features and clarity making it difficult for users to navigate and use.
Business Goal
Improve conversion by supporting customers in their repository management journey?
Business Goal
Increase customer satisfaction and retention by reducing friction?
Business Goal
Improve retention by reducing feature gaps leading to multiple tool workarounds?
Accessibility Goal
Improve the accessibility of the Git tooling to support users of all skill levels?
Kickoff & Interviews
Before starting the design process, I conducted a kickoff 1 hour meeting with the product manager and developers to understand the current state of the Git tooling, technical constraints, and the goals of the project. The goal was to make quick decisions, confirm commitment, establish a timeline, and ensure alignment on the project's direction.
By brainstorming and feature prioritization, we were able to focus on the most critical areas to be addressed. Using a Figma board, we created a feature list and prioritized the most critical features to be addressed. In this case study I will be addressing the Git graph.
Phase 1
Discovery & Strategy
Interviews
In this phase, I started by getting a clear understanding of the current state of the Git tooling by identifying user pain points to inform the scope of the project. I also conducted a competitive analysis of other IDEs and Git clients to understand industry best practices and identify opportunities for differentiation.
Focus Areas
Repository Management
What are the most common Git workflows users perform?
History & Branching
How do users navigate and understand the Git history?
Commit & Merge
How do users perform commits and merges?
Conflict Resolution
How do users resolve conflicts before commiting changes?
Pain Points
Repository/Branch Relationships
Users were having a hard time navigating the graph and felt that it lacked necessary features to help understand the relationships between branches and commits. were having to leave Visual Studio and navigate to Github or Azure DevOps to understand the impact of a pull request on other pull requests and commits due to the lack of visual clarity in the
Conflict Resolution
Users expressed frustration when dealing with merge conflicts due to lack of features and insight into affected areas of visual studio including files, branches, etc. Students and junior developers would often lack confidence that the changes they were making were not going to break the build.
Committing
Users felt that the experience lacked the necessary features to communicate changes to other devs, and lacked ways to commit changes in a contextual manner.
Hypothesis
After synthesis of the user feedback and experience audit, I developed a set of hypotheses to guide the design process.
Multi-branch view
"If we provide users with a visually clear, interactive graph that displays multiple branches and their relationships, then users will be able to better understand complex repository histories and more confidently manage merges and rebases, leading to an increase is user satisfaction."
Pull Request
"If we simplify the pull requests and commit process, then users will be able to better understand the context of a pull request and more confidently perform merges and rebases, leading to a decrease code iterations."
Methodologies
User Feedback Collection
Using a combination of methods, including surveys, interviews, and usability testing, I gathered user feedback through various channels and used affinity mapping methodology to synthesize insights to identify pain points and areas for improvement.
Experience Audit
I conducted an audit of the current experience with heuristic evaluation methodology to understand the end to end user journey and identify potential friction points. This involved documenting the pathways users took to perform actions like committing, branching, merging, and resolving conflicts.
Competitive analysis
Conducted a competitive analysis by trying out competitor products, feature benchmarking, and creating a SWOT analysis report, to understand industry best practices and identify opportunities for differentiation and improvement.
Pull from and push to remote repository
"If we provide a more transparent experience to address code merges, then users will be able increase efficiency in code integrity and will have less merge conflicts."
Related work items and pull requests
"If we provide users with a more contextual and transparent experiences, then users will be able to better understand the context of a pull request and more confidently manage merges and rebases, leading to a more confident context in pull requests and merge conflicts resolution."
Phase 2
Ideation & Prototyping
I used the lean UX methodology to work through this phase. Each week I would meet with stakeholders to align on direction > Ideate on prototypes > test > reapeat.
Git Graph View
Navigating the old Git graph was tough because its tree view made it hard to track branches and relationships, with many branches looking alike and lacking clear patterns. To improve this, I teamed up with another engineer to explore common Git workflows and merge scenarios. We focused on creating a scalable and compatible solution. Together, we designed a clear layout with a straightforward hierarchy for better navigation. We also moved branch heads to the left, placing branch names closer to the graph and commit messages, which made it easier to read Git history and understand branches. Using Visual Studio's color palette, branches are now color-coded by their columns, improving visual clarity, especially during merges. Finally, we added a "history excising" feature to help users navigate distant commits and enhance performance by hiding off-screen commits.
Explorations
The most common request from engineers is to put as much in view as possible. In the initial explorations I experimented ways to expose the most information while improving usability.
Version 1
Horizontal guides next to branch head. The idea here was to improve acuity through horizontal markers for branch heads that would serve to create better relationship indicators and improve scan-ability. After testing we found that this created more visual noise and did not scale well in repositories with a large number of branches.
Version 3
Combining branches with commits. In this exploration I was further exploring ways to maximize information displayed as well as strengthen the clarity between commit and branch relationships. Also explored a collapsing branch panel.
Version 3
Merging branches that contain multiple commits can often be a complex task. I sought out better methods to present information clearly and enhance the overall understanding of the intricate relationships between commits and branches. In my exploration, I also took a closer look at the potential advantages of implementing a collapsible branch panel to effectively organize and display this information.
Version 2
In this version I wanted to increase the amount of info on displayed while improving the clarity between branches and commits. I explored ways to combine the graph and branch tags into one column, placing the branch tags right next to the branch heads, so users could easily identify branches and the related current commits. We found that this offered no improvement in scan-ability or clarity of relationships.
Before
Version 4
Further exploration into a condensed view I explored having on column for branch tags, graph, and commits. This received great feedback for its ability to maximize information display but we found it wasn’t an improvement for navigation.
After
Phase 3
Validation & Iteration
During the validation process, we held weekly meetings with the engineering team to ensure technical feasibility and gathered their feedback on Git tools. These discussions provided valuable insights, allowing us to quickly improve before the next user studies.
In our weekly user studies, we conducted A/B tests with both simple and detailed prototypes to evaluate our concepts and identify any overlooked technical issues. We added new graph features such as handling large gaps in commit displays, allowing users to choose between topological and chronological order for commits, and collapsing commits for a cleaner view.
As we received positive feedback from user studies, we worked with the UI team to ensure our new graph was accessible and aligned with Microsoft branding. Their expertise helped us enhance visual accessibility. Initially, the contrast was a challenge for colorblind users, so we added outlines to branches for better separation. We also increased the size of branch heads to make distinguishing between different branch and commit states easier. Testing with colorblind users confirmed they could navigate the updated graph without problems.
Phase 4
Implementation
Before the project officially began, I was unexpectedly moved to a different product team to offer my design support and expertise. As a result of this transition, I unfortunately couldn't continue into Phase 4, which was crucial and involved addressing various issues related to technical feasibility, time constraints, and comprehensive quality assurance.
Results
How did we do?
When we first embarked on this ambitious project in the year 2020, the Visual Studio Git Tooling was had by approximately 80,000 users across the globe. As of today, we are pleased to report that this impressive figure has grown significantly, now exceeding an astonishing 300,000 users worldwide.