Design systems for developer services
During the transition of the Visual Studio Team Services product to the rebranded Azure DevOps suite, I managed the team that oversaw the roll out of a refreshed design system and feel, building on Microsoft's Fabric framework.
Taking the opportunity of the rebrand, we worked with our engineering and product management stakeholders across Raleigh, San Francisco, Seattle and Hyderabad to enumerate the typical stock screens and scenarios that were common throughout the suite, in order normalize and bring coherency to the individual product workflows.
Everything is a list, sort of.
One of the key discoveries during the exploration phase of the project was that almost everything in the product operated on the concept of a list or collection of objects - be they bugs, files, work items or test cases.
As a result, myself and the team took particular care in defining every known scenario in the product for tabular data, and especially defining accessible and visually differentiated styles for each type of object to be used throughout the different parts of the product.
Building and maintaining the content
During the development and implementation of the design system, we took advantage of the recent acquisition of GitHub to create an open backlog that allowed designers from all our locations to make requests and ask questions asynchronously - and there are no stupid questions - with a dedicated designer helping triage and understand requirements.
Centralising design components in Figma
With the rollout of the design system, I took the opportunity to standardise the team on use of Figma as our source of truth, helping reduce the amount of time wasted by designers replicating known specifications by constantly redrawing the interface of the product in their own personal design systems in Sketch, Adobe XD or even in one case, Visio.
Evangelising best practices
As the first design org at Microsoft to adopt Figma for a shipping product, our use of Team Libraries in a distributed team was groundbreaking within the company. As part of our learning, I personally helped introduce Figma to multiple design teams across Redmond and Hyderabad, by running workshops and brown bag sessions for designers of all abilities across Azure, Windows and Office teams.
As of 2020, our initial Figma deployment of 80 editors has now scaled to 4,000 active editors across various Microsoft design organisations.