From the first draft up to the implementation of a design system
When we watch a movie or a TV show, we’re usually oblivious to the backstage behind their soundtrack. It usually involves inaccessible spreadsheets, stacks of paper files, overwhelming desks and back-and-forth emails with no historical information to reference. With more than 2 million songs licensed every year and being a 4 billion dollar industry, this scenario affects several people: from writers and composers to Performance Rights Organizations (PROs) and studios, who are doing a very time-consuming, manual work. It involves tracking down all data sources, get the right licenses, pay rights holders and all this staying within their allocated budget. My role in this project was being one of the 2 designers who collaborated from the first draft up to the implementation of a design system.
Our strategy was to bring unity to the currently fragmented process. Licensing a song is, in broad terms, a two step process: budgeting and clearing first; scheduling, shooting and paying later. The client’s team already had two products in place: FastTracks, a licensing information database; and FastClear, used for music clearance and budgeting. They wanted to add another software to this stack: FastCue, a new solution built from scratch for cue sheet reporting and managing. A modern, interlocked product ecosystem both from a design and development standpoint, having a common Design System across both FastClear and FastCue.
Meeting room and whiteboards with sketches
As a starting point, we had a kick-off sprint with the client’s team. The main goal here was to understand and gain insights on the product, the market and the industry. We were very lucky to work with music industry and software veterans, so we were able to ask both business and technical questions. Since this was a new industry for us, we had to start from basic questions like “what’s a cue?” — turns out it’s the musical moment in a media and it’s tied to royalties.
We had to dive deep to design the ideal cue sheet creation process. The first step is to define your project type (movie, TV show, etc). The users then plan which songs you want to include in their project. At this point they can query FastTracks database to get rights holders information. Later they can try different budget scenarios: which songs they are planning to get and how much of their allocated budget they cost. Once the budget scenarios are defined, negotiations begin. Users send letters to all rights holders requesting performing rights based on a set of pre-defined variables, like countries and media distribution. Unfortunately, this process still has to be done by email, but now each song has a status, which allows it to be tracked, and historical pricing values can be referenced to accelerate decision-making at production level.
When we started organizing all the information the users would need to see and interact with, we came across a large volume of data and complex hierarchies. Through conversations with the Product Owners and Key Players we defined that there should be different interactions happening on the same screen, so we tried several iterations on low-fidelity until things started to work and our internal user testing started to give positive results. Since the team was distributed across different locations, we needed to communicate often to keep things rolling. This was also another factor to keep things low-fidelity for as long as possible.
Enterprise software can get complex, so our experience encourages a task-driven workflow. This way, users can keep focused on their daily tasks rather than distracted by the complexity of the project they are working on at the moment.
With potential users ranging from seasoned veterans to new employees, our approach had to take into consideration a wide range of possible use scenarios. This is why we incorporated both the option to create a cue sheet from scratch or import an Excel spreadsheet, so studios don’t have to basically re-do their entire work. Once they import they spreadsheets using a visual editor with some regex behind that maps what’s in each row, they can create templates, so it’s a one-off interaction.
Once moved to high fidelity, we started breaking down the UI into components, each one with their associated behavior. We based our system on Material Design components. This decision was based on the availability of ready-made component libraries that helped us ship a consistent product ecosystem in a reasonable time.
Since we were moving fast, we were generating some technical debt and our project file started to get messy. So we adapted our workflow. We set it up so we could work freely in Figma, then “push” our designs to Zeplin and use that as a unique source of truth. Developers could pull designs from there and build components in Storybook. At this point we were still working on the first product, FastCue. But this allowed both Dev and Design team to start working on Clear really quickly, since both share lots of components.
These are the end products and their features:
GUI for Spreadsheet Import
Cue Sheet History
Global Song Search
Batch Song Edit
User and System-level Templates
Budget Scenario Creation
Auto-Generate Clearance Letters
Manage Rights Presets
Historical Song Information
High-Level Project Overview
In conclusion, since we were working on a big application, we reached a point where it was way faster to work directly with high fidelity components since our system was already in place. In a short time we already had a working version of the second product. In developing this platform, our goal was to support the work of production studios and big platforms alike, while bridging the gap between artists and the entertainment industry.