UX/UI Use Case Study: How to apply Design Thinking in Digital Music Distribution ?
What’s Labelcamp?
Labelcamp is an application that allows independent labels and distributors to distribute their music on streaming or social video platforms such as Apple Music, Meta, Spotify, TikTok and hundreds of digital service providers in the world. It encompasses catalog and digital supply chain management tools and advanced analytics dashboards.
In the UI, it all starts with a form that enables album importation. The goal of our redesign project was to update the form in terms of user experience (UX), user interface (UI), and general code improvements. The project lasted a few months, including the steps of design thinking, prototyping, user testing, and web development, from beta testing with a few target users to production release opened to all Labelcamp users.
Why design thinking?
Design thinking is a design methodology that focuses on solving problems by putting the end user at the center of the process and creating a user-centered product.
It has 5 steps:
1️⃣ Empathize: Understand the user’s perspective and needs (Interview and Persona)
2️⃣ Define: Define a problem statement that focuses on the user’s needs. (How Might We question)
3️⃣ Ideate: Explore new ideas to solving the defined problem (User Journey Map)
4️⃣ Prototype: Create potential solutions and design a prototype that can be tested and refined. (Interactive Prototype with Figma)
5️⃣ Test: Collect user feedback and improve the prototype (User Testing)
In the design process, we involved people from different areas of expertise: our internal IDOL Content Team, Labelcamp’s business development team, web developers, and our end users.
The Pain Surprises Records label and self-distributed record label Wagram willingly participated in the process, taking part in long interviews aimed at identifying the issues they faced as daily users of the current version of the album upload form.
This allowed us to focus on empathy and understanding the needs and issues they encounter when using Labelcamp.
How does a design thinking workshop work ?
🎩 Ice Breaker
I like to precede the workshop with a 15-minute Ice Breaker activity with the participants. It holds particular significance as it facilitates team cohesion and enhances each individual’s creativity. Additionally, it fosters a convivial atmosphere that cultivates a higher level of commitment within the group.
Here, the activity focused on anecdotes: each participant had to tell the group about two personal stories, one true and one false. Other participants had to find out which the false one was.
The Ice Breaker should not be underestimated, as it effectively puts participants at ease and establishes an environment that encourages creativity.
🎤 Step 1 : Empathy (Interview & Persona)
Let’s move on to the first step of the design thinking process, which involves understanding the user’s perspective and needs.
This stage encompasses the interview phase and the creation of a persona. Initially, we conducted interviews with users to effectively identify their needs and frustrations. These frustrations are crucial as they represent opportunities for improvement.
Some of the interview questions:
🎯 Who are the users? What do they do? Job title?
🎯 Why do they use the form?
🎯 What are the key features required to meet user needs?
🎯 What do you find frustrating about this form and why?
🎯 What are typical usage scenarios? The user journey?
🎯 How much time do you spend on creating an album?
Once the interviews were completed, we proceeded to create a persona. The persona is a fictional image of a typical user, informed by the insights gathered during the interview process. It provides designers and developers with a typical user reference, while also fostering a heightened sense of empathy among project stakeholders.
In accordance with these two personas (label and distributor), we have identified the following user frustrations:
🙁 It’s unsatisfying to have to edit a long form in a modal, as this involves clicking on the button to open the modal and waiting for it to load.
🙁 The form requests a lot of information and metadata, and it’s also difficult to distinguish between mandatory and non-mandatory fields.
And we’ve identified user needs:
🎯 Upload an album more easily and quickly
🎯 Have a simpler and more intuitive form
🎯 Optimize and understand metadata
Through conducting interviews and constructing the persona, we gained valuable insights into user frustrations with the product, their objectives and requirements, as well as the emerging technologies they employ in their daily lives.
🎯 Step 2: Define (How Might We?)
Once we understand the user’s needs at the empathize step, we can define which problem has to be solved. It will serve as the common thread running through the workshop.
Defining the problem is essential when applying the design thinking method. The starting point lies in the user’s problems, as well as their frustrations and experiences. All of this presents opportunities to enhance the UX.
Example of “How Might We?” questions that came up during the workshop:
📌 How might we make album creation easier and more efficient for Label to spend less time ?
📌 How might we make filling in the form more attractive, to encourage Label to fill in the metadata?
📌 How might we reduce the number of errors before submission, so that the Label makes fewer errors?
We came up with the following problem statement: “How might we make the album creation process engaging (need) for labels (persona) in order to optimize the outcome (reason)?”
📍 Step 3: Ideate (User Journey Map)
Once all this information has been gathered, we can move on to the 3rd phase of design thinking: Ideation.
During this phase, we develop a User Journey Map, divided into three main steps: Before, Onboarding, and After.
In our specific case, the three main steps are:
1️⃣ Before album creation
2️⃣ During album creation
3️⃣ After album creation
We retrace the user’s current journey, describing each step, action, interaction, and obstacles encountered.
Each obstacle represents an opportunity for us to enhance the user experience.
Example of obstacle:
🔴 Which fields are mandatory?
🔴 What else do I have to fill in? I can’t see the progression?
🔴 Error while attempting to import audio, how to resolve this issue ?
🔴 Users didn’t notice the “apply to all” feature
Then, we define the user ideal journey that represents the solution we aim to provide. Our objective is to guide the user towards the final goal. In this step, we allow ourselves to explore all possibilities without any technical limitations.
Example of obstacle and their solutions:
🟢 Which fields are mandatory? ➡️ mandatory fields will now be marked with a red asterisk
🟢 What else do I have to fill in? I can’t see the progression? ➡️ added a progress bar to display the progression as the form is filled in. A check icon has been incorporated to ensure that each step is correctly completed.
🟢 Error while attempting to batch upload audio, how to resolve this issue ? ➡️ when users hover over the button a popover shown all the specifications
🟢 Users didn’t notice the “apply to all” feature. ➡️ added an icon for the apply to all CTA, as a well-designed button can capture attention.
👩🏻💻 Step 4: Prototyping
Once we have gathered all the information about the users, their frustrations, obstacles, goals, and needs, we move on to the prototyping phase. This part requires creativity. It is an essential step that allows us to test whether the proposed solutions effectively meet the users’ needs.
We considered user insights from the research phase to ensure the navigation intuitively led users from complete album general information, upload tracks and assets, complete track metadata, check platforms and territories rights to summary step.
We considered user insights from the research phase
📍 Track Metadata Manager
So, we started with a wireframe, that is a low-fidelity representation of the design, focusing on layout and structure, then I iterated on multiple prototypes.
Here’s the stages of prototyping:
1️⃣ During the wireframe phrase, we focused on structuring the page layout. For instance, on the left side, a block is displayed, making it easy to upload audio tracks and complete essential actions such as deleting a track or bulk editing. At the same time, on the right side, well-designed metadata fields for the audio track are presented, encouraging users to easily fill in the metadata. This first wireframe serves as a blueprint, describing the fundamental elements and interaction flow of the interface.
2️⃣ Moving on to the prototyping stage, we focused on creating a more realistic rendering of the UI, incorporating detailed graphics and refined typography to simulate the look and feel of the final product. We added loading animations during track uploads, displayed relevant error messages, and integrated visual elements such as album cover for each imported track.
3️⃣ In the final version, we opted for a significant layout adjustment where audio tracks span across the entire width of the page, unlike the old funnel version where they were confined into a modal. This change stemmed from user testing, revealing that the limited space posed constraints on usability.
⚡️ Here’s the old versus the new album upload form :
📝 Step 5: Testing
Testing is the final phase of Design Thinking. Through testing, we can learn more about the users, improve the prototype, ensure that the new album upload form meets the users needs and provides a good user experience, and also to come up with ideas for new features.
During user testing sessions, we observed their interaction with the prototype, noting any difficulties encountered and gathering feedback on the overall experience. By analyzing these results, we were able to identify their confusion or frustration, strengths and areas for improvement of the form to ensure an optimal user experience.
Conclusion
In UX design, collaboration with the stakeholders is essential. It involves considering all aspects and viewpoints. A prototype is never set in stone. It’s a dynamic representation that can constantly evolve in response to feedback and insights gathered along the way.
Design thinking encompasses the steps of empathy, problem definition, ideation, prototyping, and testing. Applying the design thinking method in digital music distribution to the development of the album upload form, allowed us to adopt a user-centric approach and provide innovative solutions to address the challenges faced by our users.
Users and stakeholders are an integral part of the design process — we co-created with our internal IDOL Content Team, Labelcamp’s business development team, web developers, and our end users a new solution together that best meets user expectations.
User feedback has been very positive so far, we are excited to continue evolving and innovating in response to our users’ needs!
“Good design is good business” Thomas Watson Junior
