Bringing sexy back(end)

At Beats, I got to work on a lot of high-profile design projects related to the consumer apps, marketing sites, promotions, and artist tools. By far my favorite project was the least sexy: building the internal tools design system and web framework.

Not just a style guide

Our intent wasn’t just to create a style guide. That was part of it – and we did that – but what we really wanted was to shift the way the team approached holistic platform design and development.

Feeling the Pain

We had stumbled in the past with designing short-sighted user interfaces and systems that only scaled shallowly because we simply had to tack stuff on. We waded through expensive design/code refactoring and creative/technical debt that slowed down our progress the more we wanted to iterate.

A Fresh Start

The opportunity initially took the shape of redesigning our backend internal CMS. We dove right into this manageable little redesign, and quickly learned that our goals needed to be more far reaching if we wanted to really make an impact.

Marching orders

Build a scalable and flexible design and code framework that serves as the backbone of the internal tools suite and allows new web projects to easily be built with speed and quality.

Micro and Macro at the same time

We had a requirement to build the framework while at the same time also build the products that would use it. Dogfooding the framework while building it helped immensely with its success.

Framework-level pattern development

Table page framework

All Things Considered

A continuous cycle of specific app-level solutions informing our framework-level decisions allowed us to explore all the boundaries of our system the deeper we got into the products.

Lessons Learned

Being flexible with our process allowed us to uncover better ways of working together which resulted in a better end product.

Early and Often

Involve everyone in the process early. Even if it's just sharing sketches, early engagement leads to shared ownership and facilitates cross-team collaboration.

Cross Pollinate

Take the opportunity to have engineers help make design decisions, and let their technical know-how influence the product.

It's never done

A design system is never done. It constantly evolves and improves as we learn more about the ecosystem it supports, as well as its users.