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?
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 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.
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 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.
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:
- Don’t know that the Live Share plugin in VS Code exists
- Difficulty combining separate code into a larger project
- Enjoy validation from others when peer programming
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.
Live Share Session Start
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
The onboard guide is activated when users first enter Live Share. They can revisit sections or dismiss all of the steps.