BMAT Project
PROJECT SUMMARY
A group project to redesign the uploading process - focused on metadata mapping - for a music technology company to assist in-company developers as part of a wider redesign project.
This project includes:
Overview
User Personas & Scenarios
Desk-Based Research: Competing Platforms; Database dashboards; and Sites commonly used by user
Design Process & System
Prototype (Figma): metadata mapping process; database dashboard and before/after screens
User Testing (Remote)
User Feedback
Improved Prototype (further testing)
OVERVIEW
BMAT is a music technology company based in Barcelona.
BMAT can "monitor and report music across televisions, radios, venues and digital services globally". They have a proprietary technology that adds a "fingerprint" to a music track so they can "tell when and where any song is played and provide the metadata that describes who owns the rights to each track".
To use BMAT's proprietary technology, the audio file and music metadata for a music track needs to be uploaded to BMAT's platform.
Project Focus
Our focus was on one stage in the uploading process (see uploading workflow below) - mapping - for a website view of BMAT's platform. This was part of a wider redesign project.
Uploading Process
The uploading process has four stages (with some stages overlapping):
Upload: The upload of audio files (which may have embedded metadata) and metadata (either via a single/multiple buttons or drag and drop file area). These files may be uploaded all at once or the audio files maybe uploaded at a later stage.
Mapping: The mapping (i.e. matching) of data fields* in the user's metadata to data fields in the template in BMAT’s system.
Validation: The validation of metadata to identify invalid data points and more.
Error Correction: The correction of errors in the user's metadata.
The mapping stage needs to take place straight after the files are uploaded.
Later Stages
Following these four stages, a “fingerprint” is added to the metadata to enable the tracking of the music tracks. This process can occur in the background and does not require the user to be logged in.
*equivalent to Excel table headers
2. USER PERSONAS & SCENARIOS
Metadata Challenge
The main challenge for mapping metadata is that there is no centralised database for metadata. There are multiple different ways metadata is being categorised so different data field titles exist for the same information and multiple templates are being used for music metadata.
A hypothetical example is that a user could use the data field "Song Title" and BMAT's system could use "Track Title" to mean the same thing.
BMAT's intelligent system can make suggestions for a match for "Song Title", but the user will need to confirm any suggested matched. Furthermore, the system might not be able to recognise a possible match so the user will have to self-select from numerous possible options for the data field. This requires the user to have a good understanding of what each of the data field titles mean in order to make accurate matches in the mapping process.
For this project, we focused on two main users who would be uploading files in bulk - Music Library Admin and Jnr Royalties Analyst at a record label - then on users that would be uploading smaller volumes such as independent artists.
We also considered multiple scenarios that the platform would be used in order to produce a prototype that meets multiple user needs.
We tested our designs and prototypes on a number of "dummy users" which included a PhD student in music technology specialising in music information retrieval, and people who have had roles similar to these personas to allow us to extrapolate our findings back to the target personas.
User Tasks
There are a number of tasks that these users must perform in a standard mapping/matching process, and others that are likely to be performed that needed to be included in the first prototype. These main tasks are highlighted below in bold italic. There are other tasks that the user might perform - but are less likely - and are in regular font.
Upload
User uploads their metadata and audio files via one button/drag and drop file area (or multiple)
Mapping
User selects/confirms the data fields that need to be mappedUser matches their unmapped data fields with corresponding data fields in BMAT's template and confirms these matches in bulk (or does this individually)
User performs "rematches"
[Optional: User saves BMATs data fields into categories (including favourites) for easy access via a filtering tab at a later date]
[Optional: User searches their own data fields and/or BMAT's data fields to find specific data fields]
User views suggested matches and confirms them in bulk (or does this individually).
User performs "rematches"
User views all the completed matches and confirms them in bulk (or does this individually)
User performs "rematches"
User views an overview of the completed mapping process and validation information for the metadata and confirms they have viewed this information
User downloads their metadata in BMAT's template
Post-Mapping
User views their metadata in BMAT's database dashboard and the status of their metadata.User edits the name of their metadata "job"
3. DESK-BASED RESEARCH
4. DESIGN PROCESS & SYSTEM
The design for the mapping stage went through multiple iterations based on feedback from people close to the users until we produced an interactive prototype for more formalised testing. We experimented with designs based on carousels, three columns until we reach a design for testing which was closer in style to BMAT's previous database dashboard. Inspiration for these designs came from Music Libraries, known apps and platforms e.g. Spotify, Shopify, Gmail etc., and loosely based on BMAT's current designs, because they wanted novel ideas/approaches.
Design System
The Design System used was based on Material Design and elements of BMAT’s current design system. We also used Atlassian's Design System for inspiration.
5. PROTOTYPE
Video of prototype for user testing.
6. USER TESTING
We conducted approximately a dozen user tests with the first prototype. Initially, users were asked general questions about the first screen in the mapping process to gauge their thoughts on the visual hierarchy, designs and purposes. Then we gave the users a task to map (using the word "match") four fictitious data fields - "Song Name, Artist, Album Title and Song Length" - that they had uploaded to BMAT's platform in the form of a csv file (where two data fields were unmatched by BMAT's system and two had suggested matches). This prototype was developed to test the flow of the main red route for the mapping process through the platform, and did not include tasks requiring the user to add data fields to "favourites" or a filter category; use filters; or search for specific data fields in BMAT's library.
We included an Upload Screen so the users could imagine uploading the "csv" file and a screen following the mapping/matching process so they could view their metadata in the database dashboard.
6. USER FEEDBACK
Based on all the testing performed, we were able to categorise the insights and feedback from the users into items that were high, medium and low priority actions for future prototypes:
Red - High Priority - for anything that considerably interrupted the user flow, was reported by a number of users, and/or requires minor modifications
Orange - Medium Priority - for anything that was an inconvenience, was reported by more than one user, and/or requires moderate modifications
Green - Low Priority - for anything that does not interrupt the user flow, was reported by one user, and/or requires major modifications
Our initial testing of the prototype included a three-step on-boarding process for the user (a overlaid on the first screen for the mapping process and tooltips for individual icons. Our findings from A/B testing of the on-boarding process was that the on-boarding and tooltips had minimal impact on improving the user’s understanding of the mapping process. Several users mentioned they would prefer a guided process to help them perform their first mapping or to be able to view a video or gif of the mapping after they upload their files.
(Following the first few tests, we changed the upload page from one where the user could upload the metadata and audio files separately and via one button) to one where they could only upload all of their files via one button/"drag and drop" area for ease of testing the rest of the user flow.)
Video of user feedback on prototype
8. AMENDED PROTOTYPE
Improvements based on user testing
Based on user feedback, we created a second prototype for future testing. This prototype included minor design changes to be more aligned to BMAT’s dashboard and included additional tasks for user testing: the user saves BMATs data fields to favourites for easy access at a later date via a filter tab.
Future prototype designs for testing are likely to include a prototype search functionality using strings; different options for the mapping/matching functionality; and testing of more options for on-boarding/tooltips.
Video of next prototype for testing. Click here to access interactive prototype.
PROJECT TEAM
This project was undertaken by a collaborative team of four UX/UI designers working under the supervision of a front end developer and product manager from BMAT, as part of an internship project.
Due to the unique circumstances created during the Covid-19 pandemic, this project was entirely remote and pivoted halfway through from a novel B2C platform to a redesign project. For this project, BMAT wanted novel ideas and approaches, so we adopted a loose interpretation of BMAT's design guidelines and were more experimental in our prototypes.