Aligning Backstage's UI landscape
Spotify's dev portal which unites all dev workflows behind a single pane of glass.
The challenge
Backstage is a portal that is arbitrarily extended and customized by the adopters. A single end user journey can flow through software from a large number of developer teams, all with idiosyncrasies of their own. I was tasked with unifying the UI of the Backstage software landscape and offer tools and resources for creators to benefit from the consolidation as well.
Success scenario
“All creators for Backstage are enabled to build their interfaces and experiences to a single cohesive ideal and use the supporting artifacts to ship faster, reduce repetition and improve their software quality.”
Context
Internal tools seldom get the love they deserve, right up to the point of failure, when the neglect and accumulated debt is crushing productivity. Backstage is the natural evolution from several systems that came before it, conceived to solve the main issues developers face when working day-to-day:
- Context switching
- Repetetive, time intensive tasks
- Developers distracted with secondary maintenance tasks
- Infrastructure bloat
The engineering wizards at Spotify have created a highly flexible software database, called the catalog. It is the core part of Backstage, where all other pieces of software come together. Attached to the core are the plugins, which represent the control layer for all the pieces and data streams. Every team is empowered to build their own plugins, and most of them do.
Over time, the number of active internal plugins grew into the hundreds, while the number of actively used and maintained plugins stayed at a fraction of that.
Approach
First, I had to understand Backstage itself and what has been build as solutions. I took to our internal instance, using my unfamiliarity as the beneficial viewpoint of a new user. I collected all occurrences of all components and patterns that I could find and documented them into a list, noting the component name in code and ambiguity.
The resulting collection shows the extend of the UI ambiguity, how often the wheel was re-invented and the problems with accessibility.
Additionally, I went through all the research that has been done up to this point. The most helpful was a list of pain points that was collected from engineers working with backstage. With that, I prioritized the pains to form a roadmap, the most pressing pain point was “Lacking guidelines on user centric design”. Creators needed a central reference to guide their work process.
Aligning designers before aligning pixels
New or updated artifacts were released continuously, the designers needed to be aligned before I present any new visual style. There were a few old libraries and guidelines available, but these were out of date and not actively maintained. The research interviews with designers revealed that every single one picked reusable design assets from arbitrary sources and then customized them to their specific needs. In essence, there were as many libraries in place as there were designers, and the vast majority was kept private.
A colleague presented this amazing metaphor:
I needed to start at the beginning and have the designers ask the question:
What is the thing that I am using here actually for?
The chaos had to be understood visually. To address that I set up an extensive page analysis, showing the multitude of layouts and arbitrary placement of UI controls across Backstage.
Every designer and manager, up to the director, had a lightbulb moment of realization when I showed them their interfaces simplified like this. Suddenly it was obvious why Backstage feels so confusing.
I set up a guideline on intentional design, a reference table that breaks down and defines what a given primitive is supposed to be used for. This is the core of a consolidation effort, there has to be an agreement on the common truths that apply to everyone using a tool. Just like language, you can be expressive with the application but have to follow rules to make sense to the receiver of your message.
Such a list on its own is very hard to apply to specific work of any designer, especially when they are unfamiliar with this line of thinking. So I took a couple of pages and redesigned them to match the components used to this list. The redesign also includes my proposal for the new information architecture and navigation.
Create a desire to follow
A colleague and me re-imagined the Backstage UI to be modular and closer in style to Spotifys existing design language, called Encore. We redesigned a cross-section of Backstage, creating an inspiring set of visionary UI pieces that showed the general direction we wanted Backstage to take.
Sadly the story finds an abrupt end here. I would have loved to take this into uncharted territory.