Developer Canvas

Developer Canvas is a web-based prototype that demonstrates the power of visualizing and organizing artifacts in the software development lifecycle, on a zoomable, pannable canvas surface. The main design concept was leveraging spatial memory and semantic zoom in the workspace, to more efficiently comprehend, navigate and recall an individual's content.

From the business standpoint, the prototype was used to better understand the product opportunity for tools that brought multiple team roles together in a single dashboard experience (developers, designers, product managers, operations, sales/marketing, etc), as well as address the urgent need to modernize our current product experiences to be more modular and fit-to-purpose and opposed to monolithic.

The workspace was divided into multiple canvas stacked on each other, allowing the developer to go down and up the stack depending on the task at hand. Potential tasks included:

• Reviewing the overall health of the product in-development against triage, backlogs and social media
• Creating and managing working sets of files that represented high-level work such as fixing a bug or implementing a feature
• Authoring and deploying code straight from the browser

We also played around with universal search across all lifecyle artifacts, along with deep integration with communication tools like Skype. The intent here was to allow the developer to see the relationships between documents across multiple services at-a-glance and also be able to quickly jump into conversations with context.

I collaborated with a few other designers and researchers to create the prototype, building upon a large amount of envisioning work done in prior years. The code was written in HTML and CSS, along with jQuery and the Monaco Editor.

The prototype was well-received by folks across the organization. While its current form never became a full-blown product, many of the concepts influenced the design direction of future products, such as Visual Studio Code and Visual Studio Team Services.