Microsoft / Azure DevOps
Scaling design for a better web experience in Cloud & AI
Azure DevOps is a complete set of tools for project management, CI/CD, version control, package management, and more. It tighly integrates with cloud solutions from Microsoft Azure, and it’s where a myriad of large software projects are built, including Microsoft’s own Windows, Xbox, and Office.
Over its more than 16 years of existence, Azure DevOps gained a lot of valuable features, but investment in its user experience fell behind. Users had a hard time understanding the product, and performance problems were increasing. A modernization in its frontend and design was necessary.
San Francisco, CA
- Design direction
- UI/UX design
Azure DevOps kind of looked like this when I joined the team. It’s actually hard to summarize in a few screens, considering how fragmented the whole thing was.
I joined the product as a design director, working closely with the existing team of product managers, engineers, and designers. Besides rethinking experiences and helping to grow the team, I helped to bridge proposals and implementation, and oversaw branding, product, UI, and UX.
The redesign plan was split into three large, independent parts. This allowed us to be resourceful with time, and to ship quickly. Initially, we restructured the overall product navigation and shell UI. Secondly, we modernized the components and patterns by developing a design system. Lastly, we overhauled the product features with new user experiences.
1. Updating the UI shell and navigation for an integrated suite of products
After understanding the existing information architecture and collecting shareholders insights, we researched how people navigated the product — even though this was an early step, we carefully revisited it a couple of times.
Our objective was to make the navigation easier for users, and we found that incorporating common web patterns was the way to go. This consideration was crucial in the light of the problems found: Azure DevOps navigation wasn’t responsive, and its interactions were based on unfitting Windows-style desktop patterns.
At the same time, we took into account how to represent the new Azure service brands. The system was transitioning from a single monolith service with many features to a suite of lighter products that could be acquired independently. The new navigation had to be scalable, responsive, and simplify the product experience.
With this in mind, we designed and tested a new responsive UI shell. The new navigation system performed extremely well and was ready to be shipped. Services were used as a top-level navigation, keeping the content simple and easy to understand. And a system-level breadcrumb improved wayfinding for deeper navigation levels.
The new navigation and UI shell measurably reduced cognitive load and provided a consistent and predictable experience across all aspects of Azure DevOps.
2. Establishing and delivering a design system to modernize components and patterns
To start this, we analyzed the components and patterns that were currently in use, measured how widely they were adopted, and evaluated how they were implemented. We discovered that multiple legacy frontend frameworks were in use. The design elements, usability, and interaction patterns were fragmented across all parts of the product.
From this perspective, we started with the basics. We found color, typography, and iconography solutions, and expanded the fundamentals by working with design tokens. Spacing, depth, illustration style, grid, layout, and other visual elements were defined so we could start replacing nuts and bolts.
We used Figma’s team library to keep engineers, product managers, and designers in sync. Before the release of variants, Figma components were carefully designed with state and toggable options in mind, allowing flexibility while preserving a practical library size.
Components and patterns were explored and implemented in tandem with research, engineering, and design teams. We backed the new components design with implementation specs and usage guidelines, helping to connect different teams.
Ultimately, we designed and implemented a website for the design system, gathering all components and patterns with full-page documentation and live examples. From there, engineers and designers could also get links to the living Figma assets and sandbox environments.
Having a design system allowed us to deliver a consistent brand and user experience, design at scale by having a collection of tried and tested UI components, and have more time to work on harder problems.
3. Retrofitting online services for a modern experience
With all the groundwork done in the UI shell and design system, along with a big cooperation with engineering teams, we were able to focus our time rethinking the experiences in the services across the product.
The biggest challenge for this part was to update legacy frontend code with the new framework. To convince the teams, we not only provided a basic replacement for what was available, but pushed new features that justified the move.
By adopting the new design system, services could add mobile support through responsive design, a long desired functionality. Also, shared components and styles made it possible to easily support a new dark theme.
New documented approaches to navigation, like the work done in a master-detail pattern, allowed services to focus on their own design problems, and just consume a much easier navigation system. By taking advantage of a clear drill-in experience, users got to navigate the new system without difficulty.
Feedback has demonstrated the changes we introduced have been incredibly positive. While designing for a living product is a never ending project, I’m proud we were able to modernize Azure DevOps with a complete redesign in less than a year, and, more importantly, increase user productivity with performant and scalable interfaces.
Our design system and processes have also been embraced by other design teams across Microsoft, expanding the company design vocabulary for web-based applications and developer-focused experiences.