Design Refresh:

Visual Studio’s Multi-Project Startup Configurations

Project Details

Company name
Microsoft, Developer Division

Date
11/2022 - 04/2023

Background

  • Visual Studio is one of the most popular programming IDEs today for Windows developers.

    Visual Studio has evolved continuously since 1997, accumulating layer upon layer of UI built with different frameworks—WPF, WinForms, Win32, web tech, .NET MAUI, and beyond. By the time this project began, the product shared only twelve common controls, all tied to WPF. With no unified toolkit and no single way to build UI, Visual Studio has become a patchwork of patterns and design choices rooted in them—difficult to wrangle and even harder to modernize.

Terminology

To better explain the design problem solved, let me first outline a few tools and terminologies nestled in the Visual Studio IDE:

  • Solution Explorer: Outlined in red. Visual Studio’s hierarchy of projects. Users can have one or multiple projects kept inside of one solution.

The following screenshot isolates the solution explorer. We can see a total of 4 projects inside the open solution. The top level item—Solution (in this example, titled TodaysInfo), is called the solution node. If a user were to right click on the solution node, a context menu appears with the option “Choose startup projects…” listed. When clicked, the dialog below (in white) appears. This dialog is what I want to focus on.

Notice, “Multiple startup projects” is selected via radio button.

This is a cool feature. When multiple startup projects is selected and all 3 projects’ actions are set to Start, when I run my program all projects will launch at the same time.

This is huge for productivity, time, and developer workflow.

Problem & Hypothesis

In the current VS, users have the ability to launch multiple projects at once, but cannot save and share their configurations. My team figured this may be a customer delighter if added into the product.

So we interviewed 5 customers. And then conducted a series of research surveys with the new concept, and new designs.

  • A way to ask customers if they have ever heard of this feature area of Visual Studio.

  • Ability to learn more about our customer’s workflows, and if this new feature development would be helpful.

Research Questions:

What did customers have to say? First impressions.

Re-Design v1

  • Removes old radio buttons

  • Toggle buttons with icons and hovering tooltips to explain their use, which avoids unnecessary, extra text to be shown on the UI (new profile, duplicate profile, delete profile, and rename profile, respectively).

  • Checkboxes to select instead of a dropdown for a more intuitive experience

  • Adds new abilities for saving profiles and sharing profiles

What did customers have to say? After New seeing design Concepts.

Re-Design v2

This version is current and shipped in the latest version of Visual Studio 2022.

  • Embeds prototype within constraints of Win32 dialog

  • Toggle buttons with icons and hovering tooltips to explain their use, which avoids unnecessary, extra text to be shown on the UI (new profile, duplicate profile, delete profile, and rename profile, respectively).

  • Dropdowns re-instated for seeing Action and Debug Target without needing a selection

  • Adds new abilities for saving profiles and sharing profiles

Next

Stanford's UI/UX Design for AI Products