CASE STUDY
Mapping out unfamiliar codebases in Visual Studio Code
Project Summary: A navigation tool that transforms puzzled coders into confident contributors
Visual Studio Code:
Project Summary
Visual Studio Code:
Project Summary
Visual Studio Code:
Project Summary
ROLE
Product Designer
TIMELINE
8 weeks
Jan - Mar 2025
TEAM
Angie Vo (Designer)
Noah Jaurigue (Researcher)
Clarkson Phan (Researcher)
SKILL
User Research
User Experience Design
User Testing
Prototyping
TOOL
Figma
CONTEXT
What is Visual Studio Code?
Visual Studio Code (VS Code) is a lightweight, open source code editor that supports a wide range of programming languages and platforms. Its main functionalities include intelligent code completion, debugging, built-in Git integration, and a wide marketplace of extensions for customizing workflows.
CONTEXT
What is Visual Studio Code?
Visual Studio Code (VS Code) is a lightweight, open source code editor that supports a wide range of programming languages and platforms. Its main functionalities include intelligent code completion, debugging, built-in Git integration, and a wide marketplace of extensions for customizing workflows.
CONTEXT
What is Visual Studio Code?
Visual Studio Code (VS Code) is a lightweight, open source code editor that supports a wide range of programming languages and platforms. Its main functionalities include intelligent code completion, debugging, built-in Git integration, and a wide marketplace of extensions for customizing workflows.
THE PROBLEM
Creating a way to streamline the process of onboarding a new project
Software engineers joining new projects experience frustration and self-doubt when navigating unfamiliar codebases, as the inability to quickly contribute meaningful work damages their professional confidence and hinders their productivity.
THE PROBLEM
Creating a way to streamline the process of onboarding a new project
Software engineers joining new projects experience frustration and self-doubt when navigating unfamiliar codebases, as the inability to quickly contribute meaningful work damages their professional confidence and hinders their productivity.
THE PROBLEM
Creating a way to streamline the process of onboarding a new project
Software engineers joining new projects experience frustration and self-doubt when navigating unfamiliar codebases, as the inability to quickly contribute meaningful work damages their professional confidence and hinders their productivity.
OUR SOLUTION
Implementing the Project Summary tool into the menu bar
A tool that provides users with a holistic view of the languages, frameworks, and starting points used in projects, enabling them to understand a codebase’s underlying structure and identifying where to begin. They can quickly reference different files organized by the programming languages and frameworks.
OUR SOLUTION
Implementing the Project Summary tool into the menu bar
A tool that provides users with a holistic view of the languages, frameworks, and starting points used in projects, enabling them to understand a codebase’s underlying structure and identifying where to begin. They can quickly reference different files organized by the programming languages and frameworks.
OUR SOLUTION
Implementing the Project Summary tool into the menu bar
A tool that provides users with a holistic view of the languages, frameworks, and starting points used in projects, enabling them to understand a codebase’s underlying structure and identifying where to begin. They can quickly reference different files organized by the programming languages and frameworks.
KEY FEATURE
Clear starting point
Under the “Starting Point” subsection, users can access a markdown file with a general description of the project they are working on. Placing the README file at the top of the Project Summary makes it easily discoverable for new users, giving them a quick overview and developer insights.
KEY FEATURE
Clear starting point
Under the “Starting Point” subsection, users can access a markdown file with a general description of the project they are working on. Placing the README file at the top of the Project Summary makes it easily discoverable for new users, giving them a quick overview and developer insights.
KEY FEATURE
Clear starting point
Under the “Starting Point” subsection, users can access a markdown file with a general description of the project they are working on. Placing the README file at the top of the Project Summary makes it easily discoverable for new users, giving them a quick overview and developer insights.
KEY FEATURE
Analytical insights and file navigation of programming languages and frameworks
The breakdown of the project’s languages and frameworks were crucial to the users as they expressed how Visual Studio Code lacked these analytics. Expanding the specific languages or frameworks displays a sorted list of all files within the project that fall under that specific subsection.
KEY FEATURE
Analytical insights and file navigation of programming languages and frameworks
The breakdown of the project’s languages and frameworks were crucial to the users as they expressed how Visual Studio Code lacked these analytics. Expanding the specific languages or frameworks displays a sorted list of all files within the project that fall under that specific subsection.
KEY FEATURE
Analytical insights and file navigation of programming languages and frameworks
The breakdown of the project’s languages and frameworks were crucial to the users as they expressed how Visual Studio Code lacked these analytics. Expanding the specific languages or frameworks displays a sorted list of all files within the project that fall under that specific subsection.
Scroll to learn more about the process
Scroll to learn more about the process
Scroll to learn more about the process
DISCOVERING THE PROBLEM SPACE
We want to devise a solution that makes technology a tool professionals are working with, not against
As cognitive science and computer science students, we have all experienced how minor inefficiencies and a notable learning curve can result in an evident decrease in the overall productivity within a rapid professional or educational environment.
We conducted 2 remote interviews with stakeholders, Clark (Software Engineer @ L3Harris) and Tanvi (Product Marketing Associate @ Visa) to gain insight into how they leverage technology in their day-to-day lives.
DISCOVERING THE PROBLEM SPACE
We want to devise a solution that makes technology a tool professionals are working with, not against
As cognitive science and computer science students, we have all experienced how minor inefficiencies and a notable learning curve can result in an evident decrease in the overall productivity within a rapid professional or educational environment.
We conducted 2 remote interviews with stakeholders, Clark (Software Engineer @ L3Harris) and Tanvi (Product Marketing Associate @ Visa) to gain insight into how they leverage technology in their day-to-day lives.
DISCOVERING THE PROBLEM SPACE
We want to devise a solution that makes technology a tool professionals are working with, not against
As cognitive science and computer science students, we have all experienced how minor inefficiencies and a notable learning curve can result in an evident decrease in the overall productivity within a rapid professional or educational environment.
We conducted 2 remote interviews with stakeholders, Clark (Software Engineer @ L3Harris) and Tanvi (Product Marketing Associate @ Visa) to gain insight into how they leverage technology in their day-to-day lives.
KEY FINDINGS
Unnecessary clicks to access crucial information disrupts workflow and focus
Need for better high-level understanding of codebases to identify entry points
Ability to quickly navigate through projects reduces friction when locating files and understanding code changes
COMPETITIVE LANDSCAPE
The competition lacks a tool dedicated to providing a holistic view of the project’s structure
Four integrated development environments (IDEs) were researched to understand the benefits and downsides of each, unveiling a gap for exploration in Visual Studio Code to simplify the onboarding process and offer a brief understanding of the project’s structure.
COMPETITIVE LANDSCAPE
The competition lacks a tool dedicated to providing a holistic view of the project’s structure
Four integrated development environments (IDEs) were researched to understand the benefits and downsides of each, unveiling a gap for exploration in Visual Studio Code to simplify the onboarding process and offer a brief understanding of the project’s structure.
COMPETITIVE LANDSCAPE
The competition lacks a tool dedicated to providing a holistic view of the project’s structure
Four integrated development environments (IDEs) were researched to understand the benefits and downsides of each, unveiling a gap for exploration in Visual Studio Code to simplify the onboarding process and offer a brief understanding of the project’s structure.
USER PERSONAS
Exploring different end users to inform my design decisions
Visual Studio Code is not limited to just software engineers in industry. I created Jennifer to represent students who can benefit from the Project Summary feature to provide guidance on a project and minimize the learning curve of Visual Studio Code.
USER PERSONAS
Exploring different end users to inform my design decisions
Visual Studio Code is not limited to just software engineers in industry. I created Jennifer to represent students who can benefit from the Project Summary feature to provide guidance on a project and minimize the learning curve of Visual Studio Code.
USER PERSONAS
Exploring different end users to inform my design decisions
Visual Studio Code is not limited to just software engineers in industry. I created Jennifer to represent students who can benefit from the Project Summary feature to provide guidance on a project and minimize the learning curve of Visual Studio Code.
Primary: Software engineers working in fast-paced environments who constantly join new projects
Secondary: Students who are beginners to coding and reference existing projects to bridge the gap between theory and practice
UX FLOWS
Ideating two workflows of how the Project Summary can seamlessly integrate into Visual Studio Code
We wanted to implement the Project Summary feature in a way that is easily accessible for users to discover and refer back to it. To do so, we explored two different user experience flows that follow the existing structure of Visual Studio Code.
UX FLOWS
Ideating two workflows of how the Project Summary can seamlessly integrate into Visual Studio Code
We wanted to implement the Project Summary feature in a way that is easily accessible for users to discover and refer back to it. To do so, we explored two different user experience flows that follow the existing structure of Visual Studio Code.
UX FLOWS
Ideating two workflows of how the Project Summary can seamlessly integrate into Visual Studio Code
We wanted to implement the Project Summary feature in a way that is easily accessible for users to discover and refer back to it. To do so, we explored two different user experience flows that follow the existing structure of Visual Studio Code.
UX Flow #1: Entry point is opening Visual Studio Code
UX Flow #2: Entry point is the File Explorer page and represents an ongoing coding session
USABILITY TESTING
Users had a strong preference towards Prototype B
We conducted A/B testing with two users over Zoom—each one targeting a user persona—to determine which low-fidelity prototype was more intuitive and beneficial. Both users indicated they preferred Prototype B due to its split-screen capability, allowing for high accessibility and minimal interference when coding.
USABILITY TESTING
Users had a strong preference towards Prototype B
We conducted A/B testing with two users over Zoom—each one targeting a user persona—to determine which low-fidelity prototype was more intuitive and beneficial. Both users indicated they preferred Prototype B due to its split-screen capability, allowing for high accessibility and minimal interference when coding.
USABILITY TESTING
Users had a strong preference towards Prototype B
We conducted A/B testing with two users over Zoom—each one targeting a user persona—to determine which low-fidelity prototype was more intuitive and beneficial. Both users indicated they preferred Prototype B due to its split-screen capability, allowing for high accessibility and minimal interference when coding.
Prototype A
Prompted to view Project Summary when opening new project or repository
Project Summary displayed as full page
Prototype B
Accessible through icon in toolbar
Project Summary opens as a split-screen view
DESIGN DECISIONS
Adding Project Summary to the toolbar
We ultimately chose to create a project summary icon and placed it in the toolbar for a seamless navigation into Visual Studio Code’s existing user interface. In our initial iterations, we visualized this feature as a pop-up, but feedback from users uncovered concerns regarding feasibility and an obstruction of programmers’ workflows.
DESIGN DECISIONS
Adding Project Summary to the toolbar
We ultimately chose to create a project summary icon and placed it in the toolbar for a seamless navigation into Visual Studio Code’s existing user interface. In our initial iterations, we visualized this feature as a pop-up, but feedback from users uncovered concerns regarding feasibility and an obstruction of programmers’ workflows.
DESIGN DECISIONS
Adding Project Summary to the toolbar
We ultimately chose to create a project summary icon and placed it in the toolbar for a seamless navigation into Visual Studio Code’s existing user interface. In our initial iterations, we visualized this feature as a pop-up, but feedback from users uncovered concerns regarding feasibility and an obstruction of programmers’ workflows.
DESIGN DECISIONS
For software engineers, coding is one of their fundamental priorities
The initial prototypes only offered a split-screen view where users noted the inefficient use of white space and preferred the coding file’s size to be minimally impacted. To tackle these concerns, we integrated a function that allow users to customize the layout of the Project Summary where they can reduce the size to optimize their file space for coding.
DESIGN DECISIONS
For software engineers, coding is one of their fundamental priorities
The initial prototypes only offered a split-screen view where users noted the inefficient use of white space and preferred the coding file’s size to be minimally impacted. To tackle these concerns, we integrated a function that allow users to customize the layout of the Project Summary where they can reduce the size to optimize their file space for coding.
DESIGN DECISIONS
For software engineers, coding is one of their fundamental priorities
The initial prototypes only offered a split-screen view where users noted the inefficient use of white space and preferred the coding file’s size to be minimally impacted. To tackle these concerns, we integrated a function that allow users to customize the layout of the Project Summary where they can reduce the size to optimize their file space for coding.
Option 1: Split-screen view with only one file and Project Summary
Option 2: Compatible with Visual Studio Code’s current split-screen view with other files
DESIGN DECISIONS
Enhancing clarity with a guided feature walkthrough
Users initially experienced confusion when testing the prototypes as they struggled to locate the feature. Integrating the icon consistently into the toolbar created a discoverability tradeoff, making it less noticeable to first-time users. To address this, I designed a guided walkthrough that aligned with Visual Studio Code’s existing business model. This not only helped users quickly find the Project Summary but also empowered them to confidently leverage it for future projects.
DESIGN DECISIONS
Enhancing clarity with a guided feature walkthrough
Users initially experienced confusion when testing the prototypes as they struggled to locate the feature. Integrating the icon consistently into the toolbar created a discoverability tradeoff, making it less noticeable to first-time users. To address this, I designed a guided walkthrough that aligned with Visual Studio Code’s existing business model. This not only helped users quickly find the Project Summary but also empowered them to confidently leverage it for future projects.
DESIGN DECISIONS
Enhancing clarity with a guided feature walkthrough
Users initially experienced confusion when testing the prototypes as they struggled to locate the feature. Integrating the icon consistently into the toolbar created a discoverability tradeoff, making it less noticeable to first-time users. To address this, I designed a guided walkthrough that aligned with Visual Studio Code’s existing business model. This not only helped users quickly find the Project Summary but also empowered them to confidently leverage it for future projects.
NEXT STEPS
Ensuring this feature is useful to other software engineers and students
If I had more time, I would conduct more user testing with a larger group of people to gain deeper insights into if this is a feature they would actually use. Since the basis of this project was interviewing a professional stakeholder to uncover pain points and opportunities for improvements that may not be apparent, I focused my efforts on receiving direct feedback from him when iterating on my designs, rather than reaching out to other potential users.
NEXT STEPS
Ensuring this feature is useful to other software engineers and students
If I had more time, I would conduct more user testing with a larger group of people to gain deeper insights into if this is a feature they would actually use. Since the basis of this project was interviewing a professional stakeholder to uncover pain points and opportunities for improvements that may not be apparent, I focused my efforts on receiving direct feedback from him when iterating on my designs, rather than reaching out to other potential users.
NEXT STEPS
Ensuring this feature is useful to other software engineers and students
If I had more time, I would conduct more user testing with a larger group of people to gain deeper insights into if this is a feature they would actually use. Since the basis of this project was interviewing a professional stakeholder to uncover pain points and opportunities for improvements that may not be apparent, I focused my efforts on receiving direct feedback from him when iterating on my designs, rather than reaching out to other potential users.
KEY TAKEAWAYS
What did I learn?
Consistent feedback from users is incredibly helpful throughout each stage of the design process
Constant communication with a professional stakeholder validates assumptions, ensuring the designed features are relevant and impactful
Leveraging existing design systems is essential to speed up the design process, maintain consistency, and reduce the learning curve for users
GIVING FLOWERS
The people that made this possible
A huge shoutout to my team, Angie, Clarkson, and Noah, who helped bring this idea to fruition! Clarkson's and Noah’s proficient knowledge of Visual Studio Code helped inform the design decisions, ensuring it aligned with our target audiences, and Angie’s time management and organization skills were essential to the success of hitting every deadline. Also, I would like to thank Clark, our stakeholder, who mentored us throughout this entire project, providing vital feedback that led us in the right direction.