Backstage by Spotify
Unified Spotify's dev portal UI, resulting in increasing sign-ups from a handful to over 2000 a month.
Tl;dr
- Increased sign-ups from a handful to 2,000+/month by unifying Spotify’s dev portal UI
- Audited and documented the full UI landscape across hundreds of plugins
- Built the foundations for Backstage’s internal design system
- Led the design consolidation effort across plugin teams
- Build the future vision as contributor and facilitator for the team
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.”
Methods used
- Presenting complete audit of every UI component and pattern across the Backstage instance, highlighting experience divergence and ambiguity.
- Detailed flow analysis of journeys that went across Backstage.
- A design intent framework: the shared reference defining what each primitive is for. That gave creators a common language.
- Page-level redesigns demonstrating the framework in practice, including a proposed information architecture.
- A visionary UI direction, developed with a colleague, that brought Backstage closer to Spotify’s Encore design language and gave designers something to rally behind.
The flow analysis was a turning point. When I showed designers and leadership their journey experiences stripped down to layout and intent, the confusion became impossible to ignore. Every person in the room had what one director called a “lightbulb moment.”
Backstage had grown organically over the years into hundreds of plugins built by autonomous teams, each making their own UI and flow decisions. The result was a fractured experience: redundant components, inconsistent patterns, and widespread accessibility gaps. I led the effort to bring coherence to this landscape.
The problem in detail
Internal tools rarely get the attention they need until accumulated debt starts crushing productivity. Backstage was built to solve real pain points: context switching, repetitive tasks, infrastructure bloat. Its flexibility was also its weakness. Every team could build their own plugins, and most did. The number of active plugins grew into the hundreds while only a fraction stayed maintained.
This meant the same wheel got reinvented constantly. Tabs, chips, and other core components existed in dozens of arbitrary variations, all had to be maintained and carried debt. There were as many component libraries as there were designers, and most were used in isolation. As a colleague put it:
How I approached the solution
I started by using Backstage as a new user would, cataloguing every component and pattern I could find. Naming convention in code, visual variations, functional inconsistencies. The resulting collection made the scale of divergence undeniable, and for the first time, visible.
From existing research, I pulled a prioritized list of engineer pain points. The most pressing: “Lacking guidelines on user-centric design.” Creators needed a central reference, not another library.
Before touching any pixels, I aligned the designers on intent. I built a reference table mapping user intent to component purpose. It documented what each primitive is for, not just what it looks like. Then I redesigned several pages to demonstrate compliance with this framework, showing how the theory can be applied in the best-practice way.
Finally, a colleague and I produced a set of visionary UI concepts: modular, aligned with Encore, and designed to inspire adoption rather than mandate it. To sell it internally, we built an animated sizzle reel to show off the new design language and hype up the teams to boldly follow this new direction.