Microsoft Visual Studio
Live Share

Microsoft and STRV began collaborating in Q3 2017 with the intent to design multiple development tools. The first was an extension for Visual Studio Code and Visual Studio that ultimately was released as Live Share.

Role

UI/UX designer

Platform

Desktop

Year

2017–2018

The final Live Share panel. Wallpaper by Preston Pownell.

Overview

Originally a Product Manager-driven project with no designers on board, I lead a small team—three people—that worked on developing a set of explorations focused on providing a modern experience for developers looking to collaborate in real time.

The initial phase of the project consisted of three months of heavy explorations of multiple scenarios. And the second phase, initially, consisted of me taking our learnings and working together with Microsoft Product Managers to bring those features to the then current version of Live Share.

Live Share — Guest’s perspective

Taking cues from popular collaboration tools like Figma, Google Docs or Dropbox Paper, users of Live Share can see ("follow") their collaborators' actions in real time. That includes their current position within a document (and indeed, the project), editing and text highlighting.

Due to UI constraints, the way to identify a user that is currently being followed is by using fills instead of strokes in the circle indicator. “Following” also triggers a temporary tab where all the followed user’s action happens.

The main focus of our explorations was awareness. “Where are the people in my session?”, “Can people look at all the files in my project?”, or “How can I interact with these collaborators?” were some of the questions we were trying to answer in the process.

Due to the STRV reorg, I had to step down as an active designer for this project. However, I kept overseeing the work until Live Share went back to be worked on internally at Microsoft.

My team’s explorations paved the way for further design explorations by Microsoft’s internal teams to optimise this exciting product now that it’s out.

Early explorations featuring a Live Share (or Code Live, as the concept was called) view on the sidebar, before they were officially available for extension developers. Lots of UI components!

One of our early explorations included the idea of showing user viewports in the minimap. Pretty cool, but not necessarily useful and probably nearly impossible to implement.

Another early idea was to redirect collaborators to the project's repository on Github upon session completion.

Initially, the 'following' feature had influences from tools such as Figma or Google Docs.