Background: In Spring 2020, a team of researchers at New York University partnered with Microsoft to improve the Live Share feature in Visual Studio Code. 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.

Microsoft Visual Studio Code Live Share Chat

Team Members: Nick Grant, Amy Hu, Ellen Shiu, and Muhan Guo

Role: UX Designer


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 the following:

We asked the respondents how they code collaboratively and the biggest hurdles. We learned the following:

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:

As a result of these insights, peer programming is significant. 

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 a storyboard 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:

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: