Visual Studio Code Live Share Onboarding Guide

Team members: Nick Grant, Amy Hu, Ellen Shiu, Muhan Guo

Role: UX Writer, UX Researcher. Duration: 6 weeks

In Spring 2020, Microsoft partnered with New York University to optimize
the UX of Visual Studio Code for new programmers.

Microsoft asked us the following questions:

How can we simplify the current getting started experience in VS Code? What does a “VS Code for Education” look and feel like?

The Editor

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.

The Plugin

Live Share is a plugin in VS Code that allows people to share project code and connect together. They can open files, edit code, and highlight together. Collaborators do not need to configure the same development tool, settings, or environment.

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

Create easy collaboration in Live Share that encourages peer programming with an onboarding guide. Convey a more intuitive interface design.

Research from Microsoft

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. They found these insights:

Most students do not actively research how to use a tool but rather learn the basics from the professor. First and second-year students desire more help on errors instead of spending their time Googling.

Based on survey answers from 1299 students, Microsoft found that they were most satisfied with the visual appeal. Students were least satisfied with remote development and debugging in VS Code.

Interviews

Our team each interviewed students who are learning or proficient in coding by asking them a set number of questions. We asked them how often they code with others, their greatest hurdles, and what resources they seek the most when learning. Each color represents a different member of the team. The patterns across all interviews:

  1. Don’t know that the Live Share plugin in VS Code exists
  2. Difficulty combining separate code into a larger project
  3. Enjoy validation from others when peer programming

Persona

We developed a persona based on our interviews and research from Microsoft. The “Learner” type strives to grow as a programmer. While students are independent, they desire to ask questions in a peer setting. The guide must be direct, short, and exciting to retain their attention.

Voice and Tone

Guidelines based on the “Writing Style Guide” from Microsoft

  • Use big ideas, few words
  • Write like you speak
  • Use contractions
  • Lead with what’s important
  • Always use periods
 

Microcopy for Guide

For the flow of information, I ensured that the text was conversational and concise. The most crucial steps are in the beginning.

I reviewed my draft with my team. We decided that the descriptions should be shorter and the text should be lighter to create greater contrast. We initially had 15 steps, but cut them down to 10. Guides for popular software, such as Adobe Photoshop, have a similar length.

UI Design

UI Changes

Live Share Session Start

1. Changed navigation from a text tree list to icons underneath “SESSION DETAILS”
2. In text tree, communication methods are on top. Programming functions are on the bottom
3. Contacts is Participants who can interact directly. The term is more engaging
4. Created higher contrast for pop-up notifications to construct a more accessible interface
5. Side Bar Icons have text to indicate their meaning and be clearer
Before
After

Onboarding

The onboard guide is activated when users first enter Live Share. They can revisit sections or dismiss all of the steps.

Before
After

Final Prototype