Nick Grant

DESIGN TECHNOLOGIST

Microsoft Visual Studio Code

PORTFOLIO
User Experience Design

In Spring 2020, a team of researchers at New York University partnered with Microsoft to improve the Live Share feature in Visual Studio Code. The team consisted of me, Amy Hu, Ellen Shiu, and Muhan Guo.

Microsoft Visual Studio Code Live Share Chat

Microsoft Live Share helps users to quickly collaborate on the same codebase without the need to synchronize code or to configure the same development tool, settings, or environment. When users share a  collaborative session, their teammate sees the context of the workspace in their editor.


Problem Statement

First and second-year undergraduate students have difficulty with learning how to code, which may be resolved by facilitating a more seamless collaboration with others. We know we are correct when students are able to learn the basics of programming together, measured by their ability to complete assignments or onboarding tasks through Visual Studio Code Live Share.

Research

Our team  created a survey, which we circulated at NYU and posted on forums that focus on learning programming for beginners. The survey received 17 responses. They ranged from beginners to advanced coders. We found that while the majority of respondents are familiar with Visual Studio Code, they are not aware of the Live Share function. Additionally, over half of the respondents do not code with others. Please click an image to learn more.

We asked the respondents how they code collaboratively and the biggest hurdles. We learned that coders work collaboratively with over-the-shoulder pair programming, the Discord chat, and discussing out loud while only one person types at a time. For the biggest hurdles, users dislike the difficulty of communicating intent behind code, a partner not giving up control of the keyboard physically, and how someone may be adamant to change the code.

In the New York Education Research Trip in October 2019, 18 students and 5 professors/TAs were interviewed from CUNY City Technical College and New York University. The researchers found that most students do not actively research how to use a tool, but rather learn the basics from the professor. The first and second-year students desire more help on errors instead of spending their time Googling. As a result of these insights, peer programming is significant. 

The first and second-year students are struggling to know if they are “doing the right thing” and seek validation that they are creating positive work. Additionally, the researchers found that almost nobody heard of Live Share. The Live share name does not mean a great deal to students.

Bar chart for VS code in performance, editing experience, extension ecosystem, ease of use, and visual appeal.  Ease of use and performance are low.

Students were asked how satisfied or dissatisfied they were with Visual Studio Code. Out of a weighted score of 6.4, students rated ease of use as 6.07.

Bar chart for VS code in performance, editing experience, extension ecosystem, ease of use, and visual appeal.  Remote development and debugging are low.

Out of a weighted score of 6.2, students rated remote development as 5.44. Students also rated debugging as 5.28. Live Share may improve both of these statistics.

Storyboard

We created two storyboards for Tom, a college freshman who is using Visual Studio Code for the first time.

Storyboard of a freshman computer science student disliking Visual Studio Code

Affinity Mapping Survey Data

Based on the initial research and our own experiences with Live Share as beginners in coding, the team listed out keywords and methods to improve. Each color represents a different member. Afterwards, we grouped the notes into different categories. We concluded that when coding for the first time, guidance is often sought. Encouraging cooperation when learning to code by developing an onboarding guide would be beneficial.

An affinity map for our experiences trying Visual Studio Code Live Share separated by collaboration, account, education, first experience, interface, and coding practices.

We each interviewed students who have learned how to code by asking them a set number of questions. The majority of the users were coding novices. Each interviewer asked the same questions, such as their familiarity with Visual Studio Code, challenges when learning to code, methods to debug, and experiences with collaborative coding. We noticed the following patterns across all of the interviews:

  • VS Code: ​Users do not know many functions in VS code exists, and doesn’t know how they operate.
  • Collaborative programming allows users to remain on the same page when coding.
  • Pain point for combining separate work into a larger project.

Our team created a Miro for us to highlight our insights and found the following four groups: barriers, resources, collaborative, and working preference. 

Interview affinity map with post-it notes based on barriers, resources, collaboration, and working preference.

Feature Prioritization

Next, we created a feature prioritization for our final prototype that we presented to Microsoft.

Feature prioritization for the Visual Studio Code Liveshare function

Final Prototype

We created UI changes, such as the pop-up having a higher color contrast for accessibility. The Side Bar Icons have typography to indicate what the icons mean to the user.

The Live Share Hierarchy changed in terms of the following: 

  • Navigation from a text tree list to be icons, organized where all functionality of communication on top with the programming functions on the bottom. 
  • Contacts is now Participates, where user could see who is in their session and interface with it more directly. 
  • Live Share Guide shows the user where they are during the guide. Additionally, they may revisit a section or look at more advanced areas.