EPIDEMIC SOUND

First stab at the design system for Epidemic Sound.

unsplash-image

OVERVIEW

Due to scarcity of product designers in Epidemic Sound, there was no design system / component library shared for the teams. Since the product teams take their own decisions, starting from scratch meant feeding on to the already enormous legacy code-base. For our customers, this resulted in an incoherent and a sluggish user experience.

TYPE

Product Design
Design Systems

GATHERING EXISTING COMPONENTS

We began the project by gathering and listing the components being used by our different product teams. Since we had never invested in unifying their components, every team had its own version of a design system which included from granular components like grid, buttons, colors to more complex components like music player, track row etc. Some of the teams still relied on components from Bootstrap and Material UI.

Frame-141

We did a thorough audit around getting all different components like the type styles here, under one file. This gives us a rough idea about what was ahead of us.

IDENTIFYING ENGINEERING CHALLENGES

A frequent sync with the engineering team helped us divide the problems with the current way of working in 3 different categories:

→  Performance Issues:
The website was not performant with a considerably high load time for the components on every page change.

→ Development Issues:
The teams were not happy with the current amount of technical debt which growing at a high pace as new product experiences were being developed.

→ User Experience Issues:
Our design experience was inherently broken making our brand image to be affected.

component-list-2

Notes from one of our many workshops to gather components (like buttons, here) and argue if we need them or not.

SETTING DESIGN PRINCIPLES

As a part of a design workshop to tackle the above problems, we developed the set of definitions of what we wanted to achieve by setting a new design system:

→ What is the ES Design system?
ES Design System is a place of reference for both designers and developers, where all the reusable components and design patterns that we have use are gathered and documented. This will make us to build platform agnostic products with less time in building components and more on building experiences.

→ What the ES Design system is not?
ES Design System is not a redesign or a rebrand project, it doesn't expect the developers to go back in time and change what is done so far. The project aims to build present and future components without wasting time writing duplicate code. All components that exist in the system, should be reused.

es-isvsnot-2

Some of decisions we took early to provoke a discussion around what we wanted to achieve with the design system now and what we could do with in future.

es-grid

First draft of our grid system, taking insipration from existing grid system in the code base. We made this the default grid to start any new project.

es-earlypallette

Our first reduced color palette, it still had gapping holes since our brand color and the error(the 2 reds) color were particularly close to each other.

CURRENT STATE

After several attempts, and in collaboration with engineering, Product Design System took up as a product guild welcoming represetation from all product teams. The design team moved from Sketch to Figma, and the tech teams work on it on a React based tool called Storybook.

storybook

TEAM

The design system discussion was started by me and the awesome David Bograd (read his project on the same here) and we were soon joined in by Linus Wahlstedt and now is worked on and is contributed to by the entire product design team (including Mikael Westman, Mikael Danielsson, Andreas Peyrou).