Project background

Cadenza Box is an online music library for creators and distributors of production music — the kind licensed for use in film, television, radio, and other media. It’s a central tool in the industry, yet one long shaped by engineers rather than designers, resulting in a legacy of clumsy, technical interfaces.

Developed by music-focused digital agency Idea Junction, Cadenza Box brings together deep knowledge of online systems and real-world experience in music licensing and sales. Idea Junction approached me to design the user interface for the product — a clean, intuitive design that would adapt seamlessly from desktop to mobile and tablet. My focus was on maximising the use of space while keeping the interface neutral and flexible enough to be rebranded by future distributors licensing the system.

List & grid

The core of the product is the search result page, with two viewing options available: grid view and standard listing. Each track is accompanied only by its vital production data: track name, artist, length, BPM and waveform. The waveform is integral, as it allows the user to quickly asses the landscape of a track without having to play a preview of it.

With more space available for each track, the grid view also shows category tagging and the track/album artwork (dimmed in appearance to increase the visibility of player controls, duration and BPM).

Menus

A slide-out menu offers users the functionality of a search panel without obstructing the results. Not only does this let users have quick access to all the search parameters, but also its one column layout means this section won't require a redesign for tablets and mobile devices.

Track detail view

To prevent constant switching between the search result page and track detail page, I devised an expanded track view that sits in line with the search results. Upon clicking a particular track, all other results will blur out of focus, leaving the selected track prominent and expanded with all additional data visible. Once the play button is clicked, a modest player bar appears at the bottom of the screen. The background of this is themed based on the cover art of the track, either by jQuery colour detection or background blur filters in CSS.

Result

An intentionally clean and restrained theme which focuses entirely on ensuring the usability is intuitive and pain-free. Employing just one key highlight colour means rebranding will be simple even for the most aesthetically conservative companies. The heirarchy of the navigation gives key top level pages priority, while subnavigation is given to granular and functional actions. Content priority is also kept, regardless of whether viewing a grid or list view, and there is no difference in user journeys between desktop and mobile - engineers can stop a task on their desktop and pick it up easily from a hand-held device.