Musicbed needed a dashboard for their artists to view their song data. The new platform was designed to show details such as license sales as well as streaming metrics. 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 as well as Artists & Repertoire teams.
Under the guidance of 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 adapting the desktop designs to tablet and mobile designs as well as designing the UI Kit.
While organizing the song details, I realized it required a deep understanding on how the music licensing industry operates and how Musicbed interacts with it. 4 hours of music licensing training was necessary in order to tackle the problem. The royalty split process was mystifying and our job was to help people understand it easily. As a UX/UI designer, our goal is to simplify the complex, such that a customer can understand these numbers and metrics from their first glance.
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 at the end of the month. Therefore, at the beginning of the month, the artists would see a 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 at the end of the month.
The first solution of showing two stacked graph was also misleading, as the blue subscription bar acted as a "Total Revenue" graph, but was 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 breakdown of all licenses into each royalty type. 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.
Musicbed had a brand guide, but the Artist Dashboard did not yet conform to it. 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.
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 workflow 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 their 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 the design system library. It was a win-win for all of us in the end.
While working, I kept thinking about how to work in a time-efficient way. This was my first project diving 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 shortcut 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 which allowed grouping things in an efficient way. Cleaning up the file was not only beneficial for me, it was good for the entire team.
