UXUI Designer | Product Designer |
Engineering Perspective | Business Mindset
BMAT In-Depth
#UXUI #InteractionDesign #CMS
Mapping Metadata
BMAT Music Innovators
In-depth details of the project
Below you will find in-depth information about the project. To read a more concise version please click here.
Have you ever wondered how all your favorite songs end up on Spotify? Or whether the artist got paid for their music video you just watched on Youtube? As technology continues to advance, the road to music royalties is becoming a bit rocky.
About Bmat Music Innovators
​
Bmat is a company that aims to fix this problem. Bmat is a music monitoring service that monitors and reports music across multiple platforms such as television, radio, venues, and digital services. This allows artists to receive the correct royalties and recognition they deserve.
A Quick Overview of the Technical Stuff (click here to skip ahead to, Project Scope)
What is Metadata?
​
While most of us simply see (or should I say hear) the music industry for the beautiful melodies and hip beats it produces, there’s more work that's done behind the scenes. A music monitoring service sounds divine, but in order to track the music, there must be a way to gather the proper information about each song. When a song is played, Bmat uses the track’s metadata to derive certain information such as who owns the rights to it.
​
So how does this metadata get there? Someone has to upload it.
When an artist or a company decides they want to use Bmat’s services they have to upload the audio file and a bunch of data about the song. This includes the song title, artist, album, producer, composer, genre, the list goes on (and ends with a bunch of things you or I probably wouldn’t understand). All this information is known to the professionals as metadata.
​
More on Metadata
​
As if the concept of metadata isn’t complicated enough, it now has to be uploaded and read by the computer. How do you do that? That’s where my team came in. How to create an intuitive feature to upload and map the metadata.
Metadata is usually organized in files in the form of a spreadsheet (i.e. Excel documents, CSV files, etc.) and it would look something like this:
​
Click the image below to view an example.
​
​
​
​
​
​
The information is organized by category (song title, artist, album, etc.) with each row underneath these categories representing a song and its details. So what’s the problem? Users organize this information differently and use various file types.
​
Mapping Metadata
​
Once uploaded, the computer has to be told what each of these categories means. For example, the user might have a category called “Song Title” which as the name states is the title of each song. However, the computer may call this category “Track Title”. Therefore, these categories have to be mapped or matched. Fortunately, Bmat’s software is quite intuitive so it will be able to automatically suggest some matches to the user. But as well all know, the software could make a mistake. Nor will it always find a match for every category. And thus, we come to the daunting task many in the music industry have to face: uploading and mapping the metadata without getting a headache.
Project Scope
​
This brings us to the specific goals of the project. Create a seamless upload process that allows users to:
-
Upload audio files, metadata, and artwork in bulk in any form
-
Map their data fields to BMAT’s data fields when the system can’t do this automatically, and correct errors made in the automatic mapping process.
-
Correct errors identified and add missing data through a process that is searchable.
-
Create an onboarding process and tooltips for this process for new users.
​
Requirements
​
-
Comply with current branding
-
User Bmat styles & Standards when possible
-
Bmat does not have specific style guidelines however they do have a few rules of thumb
-
Use Material Design
-
Principal Button/Action in the top right corner
-
Right-aligned drawer verses pop up
-
Text is aligned to the left when applicable
-
-
The design may be implemented in a mobile version in the future
-
The metadata mapping must allow the user to do the following:
-
View all their data fields for the metadata they uploaded (user data fields)
-
View all of the data field options in BMAT’s template (BMAT data fields) and see them in a categorized form
-
Search user’s data fields to find specific data fields
-
Search BMAT’s data fields to find specific data fields in order to create matches
-
Save BMAT’s data fields to form bespoke categories that are relevant to the user
-
Access their bespoke categories for BMAT’s data fields
-
Match user and BMAT data fields
-
Unmatch user and BMAT data fields
-
Confirm user and BMAT data field matches individually
-
Confirm user and BMAT data field matches in bulk
-
Delete user data fields
-
View information on data validation i.e. how many data values are missing, how many data values couldn’t be read by BMAT’s system
-
Download the BMAT template with their mappings, full metadata sets including information on missing data and unread data.
-
Opt to view instructions/further information on how to complete the mapping process
-
View all of the completed matches before you move onto the next stage
-
The project duration was set to two months and included a team of four UX/UI designers supported by a front-end developer and product manager.
Users​
​
You might be thinking now, who would use this kind of tool? Although artists might be the obvious answer, most of the time its employees from large music libraries or labels who have to upload thousands of songs (and their metadata) all at once.
​
We identified two principal personas for this project.
-
Music Library Admin
-
Music Label Intern
And one secondary persona
-
Independent Artist
​
Unfortunately, we were unable to contact and interview the users directly. However, many requirements for this feature came from previous interviews and requests from the users.
User Personas
​
We identified two principal personas and one secondary. Click on the images below to view the full details of their persona.
Research & Design​
​
Initial research was conducted to understand the procedures involving music royalties, specifically the tech processes required for metadata and its upload.
The design system was based on Material Design and Bmat's current design system by Ana Flašker.
 |
|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |  |
|---|---|
 |
Jobs To Be Done​
​
Click on the images below to view the jobs to be done.
 |  |  |
|---|
Workflow
Prototype
​
Click on the photos below to see a larger version. Please contact me for more information regarding the prototype.
Chat | Please use the chatbot in the bottom right-hand corner of the screen.
 |  |
|---|---|
 |  |
User Testing
​
This project was quite technical and unique to the music industry. This not only posed an obstacle for us as designers, but it also became quite challenging when executing user tests.
It is important to note, we were unable to have contact with current BMAT users. However, we collected useful data by adapting our user tests to focus on specific aspects of the design. This allowed us to gain valuable insights from users without the applicable background.
​
Users were asked simple questions and given basic tasks concerning various elements such as the hierarchy, simplicity, expectations, purpose, etc. Our findings pointed to one principal problem.
Hierarchy
​
Problem: It quickly became evident that the principal workflow or red route was not obvious to users. While the various help and customization options we added are important, they seemed to have added to the chaos of an already complex screen.
​
Proposal: Simplicity is key. Use hierarchy to better highlight the principal route users should take throughout the task. Add the necessary help and customization tools, but in a way that does not distract from the main task.
​
Please contact me for more details regarding our findings by emailing me at karajelley@gmail.com or by using the chatbot in the bottom right.
Nest Steps
-
Work closely with other BMAT departments to ensure consistency through all BMAT platforms/services.
-
Work with the developers to gain a deeper understanding of the project from a development standpoint.
-
Test the design/gain feedback from actual BMAT users
-
Continue testing and iterating
Challenges​
​
Check out our Medium article explaining how we navigated some of our biggest challenges. Our first real-life UX project with BMAT
-
Highly technical project
-
Little prior knowledge of the industry and the uploading metadata process
-
The project made a large pivot a few weeks in
-
Collaborating with four UX designers
-
Finding ways to test the design without access to actual BMAT users
-
Fully remote
A special thank you to...
BMAT for the opportunity, AllWomen for facilitating the collaboration, and the UX team for some amazing teamwork and creativity. And to every one a part of this project for navigating through the various changes brought on by the pandemic.
For more information please don't hesitate to contact me at karajelley@gmail.com or by using the chatbot on the bottom right. Thank you!