Building a design system

Context

In 2018 when I first started working in music publishing. I began by reviewing existing products and services, taking stock of existing components, and learning everything in the business landscape. During that time, I observed that designs were often done in a fragmented manner, lacking established processes, guidelines, or best practices. A few challenges I identified were:

• The product had undergone numerous iterations, resulting in a growing collection of features that made it difficult to scale and experiment with new ideas.

• The complexity of the front-end infrastructure posed challenges for scalability and onboarding new team members

• Inconsistencies and accessibility issues were prevalent but hadn't been addressed yet

Additionally, I wanted to make visually exploring ideas more accessible for everyone in the organization. 

I started discussing these observations with engineers and product managers to propose the implementation of a component library. People were familiar with the idea and were enthusiastic about giving it a try. 

Process

Initially, we went through a list of options. In order to get features quickly built and tested, with relatively low investment from our end, we adopted a 3rd party system. I built everything locally in sketch, and it was available to use for everyone in the org. 

About 1 year in, as we started introducing custom components, and building out pages and modules of features. We started considering migrating the library internally to make the customization and maintenance easier

Outcome

Tools: Sketch, Zeplin

Deliverable

• Foundations: Color palette, typography, spacing

• Components: 15+  Basic components; 10 + custom components 

• Patterns: Navigation, workflow and common actions, filter, loading and more.

Documentation

• Definition

• Usage

• Anatomy

• Variations and spec