solfége design system

Taking charge of chaotic figma libraries and transforming them into a standardized design system while creating a design language that merged a disjointed group of products into a cohesive suite of apps.

Design Systems, UXR, UI
2023 - 2024
Sony Music Entertainment

brief

context

As a startup, the orchard moved quickly to ship products and features that served their users basic needs. Once the orchard product team merged with the sony music product team, the resources allocated to the product suite expanded exponentially, allowing for a greater emphasis on design.

ask

During the merge, I joined the product team from the sony side and was placed in charge of the standardization & evolution of the newly ideated solfège design system.

challenge

While the products all shared a similar look & feel, they were made as one-offs from their inception, so they each had their own library of components. In order to tie together all of the products into one suite, we needed to craft a consistent design language that creates a cohesive experience for the user and a streamlined design & build process for the many new features & products on the roadmap. Everything from look & feel to layouts & components had to be audited and strategically re-designed to accommodate all existing & future use cases.

approach

getting up to speed

I started by simply spending some time familiarizing myself with the products and the state of the design system, gaining a better idea of the scope of the challenge at hand.

Identifying my users

Along the way, I identified three user bases - my fellow designers who would use the design system, my developers who would create the components, and the users of our product suite. After mapping out the complex road ahead, I devised a strategy to tackle it efficiently and effectively.

Design process

With so many moving parts, each product’s own shifting priorities & timelines on top of the bandwidth of the platform engineering team stretched between front and back end work, it was important to create & maintain a clearly prioritized roadmap of component & flow updates, continually validating & updating it according to new & changing plans.

When an item reached the highest priority level, I would gather requirements from all designers for their products then create a solution that not only satisfied all existing use cases, but also accommodated all foreseeable use cases. I held two weekly design review sessions with designers from each of the products, one to field questions & gather requirements, the other to present solutions & receive feedback. This iterative & collaborative process with my design team ensured that by the end of the process we were shipping a solution which not only solved the full scope of the problem, but also improved the experience of both the designers & users.

Documentation

Designing isn’t the end of the road though. After each item on the roadmap was completed, I then had to create documentation for two different users.

For designers, the documentation explained when, where, and how to use each component.

For developers, the documentation included meticulous documentation of interactions and user flows for each component.

results

It’s certainly an ongoing project, but in just the first year, I audited & standardized almost 80% of the design system components and refreshed the look & feel of the suite.

Designers now have a design system that expedites their work & allows them to focus on their user’s needs.

The developers are now able to spend more time optimizing backend performance and less time building custom components each time a new feature or user flow is handed off to them.

And the users now have a consistent experience with significantly fewer trips ups as well as a refreshed interface with brand whitelabeling.

buttons & Controls

before
after

fields & dropdown menus

before
after

headers & navigation

before
after

look & Feel

before
after

takeaways

I learned a lot about how to structure and maintain a design system that not only supports a rapidly growing suite of products, but also replaces & improves conflicting & outdated designs, allowing existing products to work in harmony.

I also learned how to take countless inputs from multiple sets of users - my design team, the engineering team, and the users of our products - as well as the larger product and business goals and tackle them all with simple yet comprehensive solutions.