Client:

Microsoft - VSC UX team

My role:

Lead UX/UI Designer

Key Skills:

UX Research & Testing, Prototyping, UI Design

Time Line:

Oct – Nov 20

01/

Understanding Problem

A deep understanding of the problem was the first step of this project.

“This is such a basic task, and I cannot complete it. Why?”

          From the initial participatory interview, our team found out that users, especially first time coder, had troubles to run even simple line from Visual Studio Code. Interface overview that already existed to explain functions of each icon haven’t much supported users to learn how to use the program. We concluded that VSC user experience for beginner was not well thought out and need to improve.

potential pain points

I found several pain points while I was interacting with VSC. As first time user, VSC UI was not friendly
for beginner and its user experience was not straightforward to immediately know how to use the program.
‍

02/

Persona

Understanding of our target user.

Journey map

Creating a map to discover user's pain points at each step of the process.

03/

research

Our team went through three research process: 1) Competitive Analysis 2) Survey 3) Participatory Interview.

Competitive Analysis

Before proceeding with profound research and design process, we analyzed the competitors of VSC. While there are many code editors and IDEs, each of them has diverse features and purposes of usage based on targeting customers. For example, PyCharm only offers Python language and p5.js is optimized for visual projects. And only few of them offer follow-able and informative tutorials to learn how to use them for beginners.  With these details in mind, we set out participatory interview and survey questions to found out first time user’s experience on VSC.

Findings from survey

We obtained over 122 survey responses from computer science and information technology students and analyzed the results to find out targeting audiences’ general opinions and pain points while utilizing VSC.

Findings from participatory interviews

We had participatory interviews with 5 participants. We gave them 4 tasks to observe their first interactions with the VSC. 4 out of 5 students couldn’t successfully finish the tasks.

The participants had trouble at step 4. They attempted several times to complete it but failed, because there were no clear tutorials to support them while they were trying to accomplish the task with VSC. From this activity, majority of participants felt very frustrated and make them to be afraid of learning code with the program. Throughout the interviews, we discovered that root causes of the problem is informative tutorials are not provided for first time users. Thus, we determined to create an on-boarding tutorial for providing a self-explanatory user experience to first time coder.

04/

solution

Provide a new service to improve users' pain points.

Design system

Visual Studio Code has a default brand color palette and font, and we followed as it is to create a cohesive tutorial from existing VSC environment.

user flow & script

Before diving into a wire-framing, we created a user flow with draft of scripts in order to understand the overall system we designed for.

HIGH FIDELITY PROTOTYPE

We decide to create a participatory on-boarding tutorial for first time users. Throughout the tutorial, they will learn how to write a simple line of code in VSC with step by step instruction, and be familiar with major features and environment of VSC. This experience will be trigger to users to explore the program further more quickly and efficiently.

Solution1 - 4 major steps

Based on the research analysis, we decide to educate the most essential steps that the first time users should know to run the code. It will be 4 steps: 1) install extension, 2) write code, 3) save file and 4) run & check

Solution2 - Learn by doing

To offer an immersive on-boarding experience, users will click and write with the actual features to learn the aspects of the programs from VSC environment. 

Click actual icons to learn the process, step by step

Write a code in actual VSC environment to be familiarized

View Final Prototype

05/

value

Why is "Learn by doing" onboarding so Important?

value for users

1. Shorten users’ time to familiarize the program to value the product
2. Learn by self-taught at their own pace
3. Offer an immersive onboarding experience to motivate users learn the program
rather than read through heavy text.

Benefits for business

1. Build confidence and trust with users.

Most first time users are intimidated by learning code from complicated editors. But if the on-boarding process helps give users a sense of what they will need to do in order to get what they want to achieve from the program, then users will keep relying on the service and start to use it immediately without worrying about the program’s complexity and usability.

2. Form user retention in early stage.

One of the greatest strengths of VSC is that users can use multiple languages with the editor. 
Once they start to use VSC, users will continue to use the product although they switched to another language. Therefore, it’s very important to familiarize users with the VSC environment from the earliest interactions, before they are tempted to abandon it altogether.

3. Positive impression to first time users. 

Throughout the survey and interview, many participants thought that VSC is not user friendly for the first time users and they thought it’s more focused on professionals. If the tutorial gives them a better idea on how to utilize the program immediately, they will think that VSC is also easy to start with and will recommend it to other first time coders. First time users are very important to the business aspect,  because they are most likely to be loyal customers once they go into the industry and use VSC on a daily basis.  

OverviewProblemPersonaResearchSolution