Expanding Warner Music’s Legato Design System to Mobile

Details

Company: Warner Music Group
Year: 2023
Duration: 7 months
Role: Lead Product Designer
Team: Associate Product Designer, Design System Lead, Product Owner, Engineering Manager, Front End Mobile Engineer

Background

Warner Music Group is a global music entertainment company across recorded music, music publishing, and artist services. They have internal tools to aid in the day-to-day operations of internal and external users. AMP is the Artist Management Platform that consumes data across multiple data points such as steaming services and social media to be aggregated in a way to help industry professionals gain insights and make data-driven decisions.  

The Challange

Warner Music recently invested in an initiative to create a central design system and component library to bring harmony & consistency to the user experience, while speeding up the development process. The WMG mobile analytics app AMP was a Flutter app with its own UI for mobile, and a limited desktop version as well. I was tasked with refactoring AMP to consume the WMG design system Legato, which at the time only had a small number of component variants and was limited to desktop. This project is a collaboration between the AMP and the Design Systems teams.

• Implement the Legato Design system in the Artist Management Platform
• Design and develop a mobile version 
• Expand Legato's "Light Theme" to include a "Dark theme"
• Architect a scalable system to support Label-level branding, e.g. Atlantic Records, Warner Chappell, ADA, etc.

Legato implementation in WMG's Storybox

Process

• Conduct audits and identify components that do not exist in the Legato Design Library
• Map all existing AMP tokens to Legato tokens, identify gaps, and create a proposal for missing tokens
• Adapt desktop components to mobile versions
  
• Redesign AMP UI and Navigation to a more consistent structure and better legibility
  
• Introduce a system to easily create color palettes for Warner’s sub-brands (Recorded Music, Warner Chappell, ADA) 
  
• Create new mobile-specific patterns and components, and contribute them to the design library
  
• Resolve design debt and fix bugs

Audit of inconsistencies in mobile dropdowns & overlays

Final Design Direction

A revamp of APM’s visual system and usability patterns to align with other Warner Music applications, creating harmony and consistency throughout the ecosystem.

• Standardized and repaired outdated and inconsistent patterns in navigation and filtering
  
• Enhanced Legato Design System with mobile patterns, new components, and scalable design tokens

AMP desktop & mobile landing pages with Legato implementation 

AMP Screens

Updated dropdowns and selection overlays

Outcome

• A consistent, intuitive, and predictable UX

• A cleaner, more legible UI
  

• Light and Dark themes
  

• Centralized color and text tokens
  

• Advanced Desktop and Mobile components and patterns
  

• Documentation to drive efficiency and cost savings in the future

Based on the expansion of the design system, we were able to create consistency across Warner Music Tech in both desktop and mobile applications. We achieved this in a way that would support scalability in the future without duplicate efforts. We improved efficiency in design and development time in order to go to market faster in its competitive environment.