Maestro Design System
Building a multi-brand design system.
LANDR is an AI-powered music platform for mastering, distribution, and collaboration, used by millions of artists worldwide.
Miscellaneous screens
Small part of the LANDR ecosystem.
Maestro foundation
Tokens, variables, and styles
Multi-brand support
Easy brand and mode switching.
The situation
As LANDR rapidly grew to 7 million users across 100 countries, so did the inconsistencies across its platform. Visual elements and design patterns varied across the ecosystem, and the codebase was becoming bloated and hard to maintain. Realizing the need for a unified design system, I introduced Maestro to bring consistency, efficiency, and scalability to LANDR’s ecosystem.
The mission
In 2021, I teamed up with two talented front-end developers to tackle the project of building Maestro, LANDR’s design system. The goal was to create a scalable, consistent, and solid foundation that would empower both designers and engineers. Together, we set out to streamline workflows, eliminate redundancies, and elevate design at LANDR.
Maestro components
A preview of Maestro components.
The process
I started with a full audit of the platform, combing through every component in the LANDR ecosystem and organizing them using atomic design principles. This gave me a clear overview of the situation and the job to be done. I dove straight into design and engineers in the development, beginning with design tokens and the most frequently used components. Weekly check-ins kept the team aligned, help track progress and prioritize next steps.
I built each component from scratch, refining, testing, and shipping them weekly. This progressive approach made rolling out the new design system smooth for users and allowed me to quickly deliver or fix components as needed. As a bonus, it was a breeze to extend the design system to accommodate multi-brand support when LANDR acquired companies like Reason Studios and Synchro Arts.
Along the way, I faced a few hurdles, such as keeping pace with tech changes and optimizing components to support new languages like Korean. The biggest surprise was having to refactor some of the more complex components so they were easily digestible by our AI tooling.
Micro interactions
Samples of built-in micro interactions.
Motion patterns
Animation styles and tokens support.
Reflections
The biggest challenge was convincing higher management to allocate resources to build Maestro. We started small, continuously demonstrating the benefits and actual return on investment in terms of reduced production costs.
Building Maestro turned out to be the best move we could make to boost efficiency for both design and front-end teams, reducing errors and ensuring consistency. Most importantly, I achieved my goal: a smoother, more consistent user experience.
Today, Maestro:
- Supports 3 main brands and multiple white-label spin-offs.
- Includes over 40 components.
- Is impacting the lives of millions of users worldwide.