The Design System Library and The UI Kit


Musicbed needed a dashboard for the artists to view their song data. The new platform was designed to show details such as how many licenses they sold, and how many streams occurred over the past months and years. The dashboard also showed which song has been pitched to the clients, and which song has been featured in the playlist. To open up the data to the artists, we had to work on a dashboard that could show massive content in a digestible way. This was a project not only involving the product designers, but also the engineering team, and the Artists & Repertoire team as well.

My Role

With the guide of the supervisor, John Oddo, this was my first project as a UX/UI designer in Musicbed. I worked on the song insight page, where it introduces details of each songs in one album. I was in charge of taking on desktop designs and converting them into tablet and mobile designs, and making the UI Kit.


While organizing the song details, I realized it required deep understanding on how music licensing industry works and how Musicbed handled it. 4 hours of music licensing training was necessary in order to tackle the problem. The process of how royalty split happens was very confusing, and our job was to help people understand it easily. When people can't understand what this number meant from the first glance, our job as a UX/UI designer wouldn't be accomplished.

The Problem

The lead team realized that the graph showing the history of total royalties can be confusing. The problem occurred when royalties were split between single song license royalties, and subscription royalties. Single song license can be calculated daily, but subscription based royalties were calculated on the end of the month. Therefore, on the beginning of the month, the artists could see a sudden drop in the daily royalties graph. The lead team wanted to avoid such drop in a graph as it could evoke negative feelings. We had to provide a solution on how to inform artists that subscription royalties are added on the end of the month.

The Solution

The first solution of showing two stacked graph was also misleading, as the blue subscription bar acted as a "Total Revenue" graph, but labeled as "Subscription". The sudden cut in the line graph didn't explain why it had to be cut like that unless they hovered over a question mark to see the tool tip. The solution was to change the line graph into stacked bar graphs. A tool tip was added to show the break down of each royalties and total number. With this method, it was clearly communicating that there are two different royalties shown all at once. Adding a little note on the right saying "Calculated at End of Month" explained when subscription royalties were going to be added. It cleared up the confusion.

More Challenges

Musicbed had a brand guide, but Artist Dashboard was a project where the brand guide needed an update. It was the time to decide how many different grays and colors were needed for the design to function. It was not an easy task. But in the end, we set the guidelines on neutral colors for the company.

The UI Kit

It was my first time to build a UI kit, and I immediately fell in love with it. I found my passion in scanning the designs, pulling the essential elements out and organizing. The job was very satisfying. I realized building a UI kit meant changing the designs to make it function more efficiently, also it meant better work flow for the developers as well. I was in charge of constructing the base for the new design system library, which the developers can reference as a "single source of truth". While organizing, the designs were cleaned up multiple times as many exceptional type sizes, colors, and padding issues were found. With the new design system library, the front end developers were able to clean up the codes as well. When we needed something to change, it was very easy for them to find and fix it.


This project was all about how function is important in product design. The work was all about "Does this work?", "Can the user understand what they're seeing?". We tried to find out how to organize data in a digestible way. It was the first time ever in Musicbed to have a detailed UI kit for the developers as well, and the team quickly realized how efficient it would be for them to fix things with design system library. It was a win-win for all of us in the end.

What I Learned

While working, I kept thinking about how to work in a time efficient way. This was my first project to dive into Sketch program, and I learned how to utilize symbols. As Sketch was not fully integrated into my work habit in the beginning, I had to adjust my short cut key habits, and think constantly on how to use symbols that could cut time on doing manual work. I learned how to organize layer panels, and grouping things in an efficient way. Cleaning up the file was not only beneficial for me, it was good for the entire team.