Maestro Design System
Building and adopting a design system
As LANDR grew quickly, we started seeing discrepancies in visual elements and design patterns across our platform. The codebase became bloated, slow, and challenging to maintain. After many brainstorming sessions over coffee/tea, we realized the need for a unified design system. This led to the creation of Maestro, launched seven years after LANDR first introduced AI audio mastering to musicians around the globe.
Miscellaneous screens
Small part of the LANDR ecosystem.
Figma variables
Primitives and tokens.
Figma components
Typical Figma components properties.
We set up a small team consisting of one designer (me) and two front-end developers, Ben and Andrea, dedicated to creating and maintaining the design system.
We started by auditing all of the components used throughout the LANDR ecosystem and grouped them by categories following atomic design principles. Once the audit was complete, we had a clear view of the actual job to be done. We began design and development right away, starting with design tokens and the most used components. Weekly meetings were set up to keep an eye on the progress and prioritize the next steps.
Maestro components
A preview of Maestro components.
We designed and improved each component, tested them, and pushed them live on a weekly basis. This made the implementation of the new design system seamless for the user and gave us the ability to deliver and fix components rapidly if problems were to occur. Of course, they did!
From a design standpoint, the main challenges were keeping up with technological changes, switching from Sketch to Figma, and making sure the components library was not too heavy (thank you, variables!). Creating documentation to provide context, guidelines, and use cases took longer than originally anticipated.
Theming
Total theming support achieved with variables.
Motion patterns
Animation styles and tokens support.
The outcome was a solid design system built on a solid code base. In the end, it made the workflows of the design and front-end development teams much faster and removed the risk of repeating code and rethinking design patterns. We reached our initial goal of making the overall user experience smoother and more consistent.
We learned very quickly that building the design system was only the beginning. The initial adoption was good, but we soon learned that we had to consistently improve and involve the people using it so they would make it their own and contribute. A design system can only be successful if people use it.