Beatclap App Redesign: Enhancing Usability and Driving User Growth
My role
As product, UX, and UI designer — My involvement spanned all stages of the design process: research, strategy, design, and user testing.
Defining product design concepts, information architecture, and creating wireframes. Making decisions around content, design and product strategy informed by metrics and research.
Timeline & Status
6 Months, Q&A
Overview
After receiving feedback on the user experience of Beatclap regarding the process of releasing music there were concerns, about ongoing technical issues and inefficiencies that were holding back artists from effectively sharing their music.
The updated platform was met with enthusiasm by artists and industry publications leading to a significant rise in user satisfaction and efficiency. The enhancement enabled thousands of artists to distribute their music efficiently resulting in, over 1 million releases in just one month.
Release creation and royalties split was the biggest request from the community. Above all else, it was the right thing to do, and an opportunity to overdeliver.
Tight deadline, because we had to launch
before the sunset date.
Access nuances for Beatclap: users had to navigate a rarely-used "advanced settings" mode to complete the update.
Features Overload. Implementing a prioritisation Matrix.
Cross functional teams. Misalignment with the backend team slow down processes.
Clear, informative, and straight-forward instructions.
Anticipate and communicate progress and errors.
Overdeliver with design.
The Beatclap team provided me with a list of mandatory update instructions which included access to the existing Web App and a list of major competitors (Figure 3.0).
Missing Visual Hierarchy for CTA Discovery
Inefficient Information Architecture and Page Real Estate Utilisation
Overlapping and Redundant CTA Placement
Overlooking legibility & formatting.
Lack of visual treatment to support longer entries and text wrapping.
To make sense of an otherwise unconventional set of steps for creating a release, I started by exploring ways to foster a perceived sense of progress.
Shown in Figure 3.1, categorising releases into two stages helped mitigate the cognitive load of seeing all the steps at once.
Additionally, overly-technical terms were revised to better cater to a general audience.
Having structure also helped surface some heuristic issues; whichmainly involved confusing navigation and lack of edge case considerations.
I conducted three in-depth interviews, these interviews allowed me to explore participants' past experiences with music distribution platforms and their expectations for Beatclap services.
The findings confirmed my assumption that users prefer managing their music revenue and distribution on a computer, as they believe it minimises errors and streamlines the process.
One participant expressed their frustration:
"I find it incredibly inconvenient to track my music revenue across different platforms every single time. It's frustrating and time-consuming."
The Beatclap team provided me with a list of mandatory update instructions which included access to the existing Web App and a list of major competitors (Figure 3.0).
To make sense of an otherwise unconventional set of steps for creating a release, I started by exploring ways to foster a perceived sense of progress.
Shown in Figure 3.1, categorising releases into two stages helped mitigate the cognitive load of seeing all the steps at once.
Additionally, overly-technical terms were revised to better cater to a general audience.
Having structure also helped surface more heuristic issues; which mainly involved confusing navigation and lack of edge case considerations.
I conducted three in-depth interviews, these interviews allowed me to explore participants' past experiences with music distribution platforms and their expectations for Beatclap services.
The findings confirmed my assumption that users prefer managing their music revenue and distribution on a computer, as they believe it minimises errors and streamlines the process.
One participant expressed their frustration:
"I find it incredibly inconvenient to track my music revenue across different platforms every single time. It's frustrating and time-consuming."
A standard set of layout grids and breakpoints (Figure 4.0), was critical in ensuring we could design and build quickly and consistently.
The final design delivers a user-friendly, step-by-step flow for creating releases and managing content.
It was essential to ensure that users could seamlessly access all content related to their account in a clear, organized manner. The catalog was designed with a focus on clarity and ease of navigation, presenting relevant data in a structured, intuitive layout.
The Beatstore empowers users to create and personalise their own merchandise seamlessly. With a streamlined flow, users can easily navigate through color selection, print customisation, and final product previews.
The label overview centralises key metrics, offering a clear snapshot of releases, artists, and recent activity. Its clean, intuitive layout allows users to easily navigate essential data and quickly access detailed information.
The release creation process is broken down into clear, manageable steps, allowing users to easily select asset types, add metadata, and upload tracks from any device
Create and access to your royalty splits - Inspect terms and administrate permissions.
Throughout the design process, balancing user needs with technical constraints was crucial. The iterative feedback loop allowed for constant refinement, ensuring a user-centric approach. This project highlighted the importance of seamless cross-platform experiences and the value of clear progress indicators in complex workflows.
Viewing constraints from different perspectives helped brew new approaches to tackle other constraints.
Beatclaps' design resources were limited — knowing where to find them and when to use them saved immense time and overhead.
It ensured that the project was progressing holistically —
effectively accounting for content strategy and technical
feasibility early.
If an added extra step led to a more intuitive and error-free experience, it was worth the additional manual effort.