Visual Studio UI Refresh
Overview
Before we started this project, there was no established and documented design system for Visual Studio that aligned to any current Microsoft design systems. our goal for this work was to create a system focused on developer experiences that aligned with Fluent, Microsoft’s design system, and Windows 11.
For this project, I worked as the primary designer, created in depth audits, planned and conducted research, created visual design explorations, and built a Figma library for the rest of the design team to leverage in their work. I partnered with Cherry Wang, a design developer on my team. We also partnered with Dante Grange (PM), Dominic Nahous (PM), Andrew Sarratori (Eng), and Jeff Kelly (Eng).
Project details
When: October 2021 – October 2023
Role: Visual Design, Systems Design, Research
Company: Microsoft, Developer Division
Note:
While working on this project in December 2022 I became the manager of the design systems team in DevDiv, which includes my primary design partner for this work, Cherry Wang.
Setting the scene
What is Visual Studio?
Visual Studio is an IDE (integrated development environment) for Windows developers and is popular for .NET and C++ development.
How often are major releases?
Visual Studio ships a major release about every two years.
What are Dev17 and Dev18?
Dev17 is the internal name for Visual Studio 2022 product. Dev18 in the internal name for a potential future version of Visual Studio.
Phase 01:
Background
Drag handles
Command buttons
Dropdown
Combo box
Split button
Global search box
Live share button
Tool Window title bar
Solution name
Tool window search
Tool window tabs
Tool window corners
Toggle button
Document tabs
Menu items
Visual Studio is a huge product, originally released in 1997. As with many legacy products, it has abundance of features and UI patterns built on many different tech stacks. When we started this project, there was a total of 12 common controls shared throughout the product only available in WPF. Visual Studio is currently made up of UI built with WPF, web technology, WinForms, Win32, .NET MAUI, and several other technologies. The lack of common controls and single way to build UI lead to a product filled with inconsistencies and strange design choices while also making it incredibly difficult to rectify the situation.
To avoid boiling the ocean, we decided to focus on making updates the shell UI first. This initial update includes designs for 15 commonly used controls:
Inspiration
Our goal was to align with Microsoft’s design system, Fluent, focusing on the design choices made for Windows 11 as Visual Studio is a Windows-only product. Currently there are some differences between Windows 11’s design language and how Fluent manifests in other spaces.
- - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - -
Phase 02:
Design explorations
Finding the right balance
Both Windows 11 and Fluent are designed for consumer experiences and make use of large amounts of negative space. Developers have traditionally favored dense UIs, showing lots of information and controls at once.
This meant that we needed to find a good balance between our traditional-developer expectations and the evolving design language at Microsoft that caters to a wider audience.
Above: an example of design explorations looking at all the possible spacing adjustments for dropdown menus.
Above: an example of design explorations comparing the percentage of the overall UI taken up by spacing adjustments to the controls in the command shelf.
Round 1 designs
A major change to theming in VS
Over the course of this project we also decided to take on a huge problem and tackle our problematic color service. The color service in Visual Studio is the system we use to manage all the color tokens and themes in the product. When the product was originally created there were a handful of tokens, but over time thousands were added. This resulted in a single theme having over 3,000 lines of code filled with unnecessary, overly-specific tokens. For years teams would add new tokens when they couldn’t figure out which existing token served their needs.
This lead us to recreating how we handle color tokens and themes to follow the same logic used in Windows 11, using opacity and minimal tokens to create depth and layering. This adjustment allows us to more easily create and manage themes, accurately design for them, and help our engineers select the best tokens.
Phase 03:
Testing and validation
For this project we really wanted to dig into our customers initial reactions to the new designs compared to their reactions seeing the existing product. This lead us to working with a member of our research team, Karl Melder, to select a desirability study as our best path forward. Cherry and I worked together to select a list of both positive and negative words that participants could associate with each screenshot we revealed. To avoid bias, we alternated the order in which we showed screenshots to participants and used neutral labels instead of calling out “old” and “new.”
Results
16 of 16
participants responded to Fluent design neutral to positively.
16 of 16
participants preferred Fluent over current design.
8 of 16
participants didn’t notice UI changes immediately.
15 of 16
participants looked forward to getting Fluent design for the next major release.
0 of 16
participants thought the Fluent design would interfere with
their daily work.
Phase 04:
Sharing our designs with the public
During Build 2023 we published a blog post sharing our design proposals with the general public and to no one’s surprise, we got a number of complaints. The technical blogs are never the friendliest place for sharing design work and posts focused on visual updates tend to get a lot of negative interactions and lack constructive feedback. After sifting through everything with our team, we were able to identify a key area to improve: spacing.
We reworked our designs and implementation to add back more vertical space for the editor while still following accessibility best practices for click-target size.
Phase 05:
Final designs
After making adjustments to our designs and implementation, we shipped our new designs to the public as an opt-in feature in Public Preview 17.2.
What I learned from this project
Dig to the root of the customer feedback.
Our customers don’t always say what they mean the first time and don’t often have the language to describe visual design issues.We need to ask questions and really understand their pain points if we want to address them.
Leverage existing systems. You don’t always need to start from scratch.
Many people tasked with redesigning a system or feature tend to start over instead of looking at the existing work of others. Leveraging good design system work from across Microsoft allowed us to learn from others and make decisions more efficiently than if we had ignored all that work.
User testing is important, even for
visual design
While I already believed user testing to be important, I found it extremely important for this project because we were making adjustments to the visual landmarks and way finding within the product. While some customers barely noticed the changes, others had extreme reactions.