Visual Studio Code Live Share Onboarding Guide

In Spring 2020, Microsoft partnered with New York University to optimize
the user experience of Visual Studio Code for new programmers. These are
some of the questions that we were asked from Microsoft: How can we
make learning to code more accessible for students? What does an educational version of VS Code look and feel?

Visual Studio Code

Visual Studio Code is a freeware source-code editor made by Microsoft for Windows, Linux and macOS. Features include syntax highlighting, support for debugging, intelligent code completion, snippets, code refactoring, and embedded Git.

Live Share

The Life Share function allows users to collaborate on the same codebase without the need to synchronize or 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. 

The Problem

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.

The Goal

1. Create easy collaboration on the Live Share function to encourage learning together
2. Reduce the number of students who have issues as a result of confusion or mistakes

Surveys

In order to have a better understand the difficulties in learning coding, our team created a survey. We circulated the survey at NYU and posted on forums that focus on learning programming for beginners.

Key Findings: 80 percent of users found Visual Studio to not be friendly for beginners. 80 percent of users  prefer doing research by themselves rather than asking people for help. New coders spend time struggling to know if they are “doing the right thing” and seek validation that they are creating effective work. 

Research

In Microsoft’s 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. We analyzed the research provided to us by Microsoft, pulling key statistics that highlight pain points. 
Key Findings: 

Researchers found that students were most satisfied with the visual appeal and least satisfied with remote development and debugging. 

Interviews

Our team each interviewed students who are learning or proficient in coding by asking them a set number of questions. Pattern across all interviews:
 
1. Doesn’t know many functions in VS code exist and doesn’t know how they work
2. Collaborative programming allows users to remain on the same page when coding.
3. Pain point for combining separate work into a larger project.
 
Instead of searching online and filtering through the information, the live share function might be one of the solutions to motivate and create coding communities within classes.
 

Affinity Mapping: Survey Data

Our group acquired hands-on experience with Live Share and created post-it notes of all of our insights directly related to the difficulty in collaborating in Visual Studio Code. We learned during our own experience of downloading Visual Studio Code that the information is scattered and rather confusing. Users are unable to navigate the software at first without watching long tutorials on their official page. 

We believe that these drawbacks might be solved by a step-by-step onboarding guide and a redistribution of information, such as putting the Live Share function to the starter page. Another solution may be intuitive infographics that replace the text-based guidelines on the starter page.

Feature Prioritization

Afterward, we created a feature prioritization and storyboard that outlines the issue from a user perspective. We prioritized the features that are more crucial than others. After discussion, we all agreed that Adobe Creative suite performed well with onboarding and may serve as inspiration, such as the step-by-step guides and animations.

 

UI Design

UI Changes

Live Session Start

1. Session details have a higher contrast than before.
2. Side Bar Icons have text to indicate what the icons mean to the user.
3. Removed the Welcome page to filter advanced functions and prevent confusion.
Before
After

Live Session Start - Invitation Link

1. Changed navigation from a text tree list to icons in which all communication is in the top row and the programmatic functions are on the bottom. 
2. Contacts is now Participants, where user could see who is in their session and interface with them more directly. 
3. Created higher contrast for pop-up notifications and removed the “More info” button.
Before
After

Onboarding

1. Created 10 steps of onboarding guidance for new users.
2. Live Share Guide shows the user where they are during the guide and if they may revisit a section or look at more advanced areas.

Before
After

Prototype