Cadenza Box
User interface design for a top-notch online production music library.
Cadenza Box is an online music library for creators and distributors of production music. In other words, music that’s licensed for customers to use in film, television, radio and other media. It is a central tool of the industry, with a history of being designed by the engineers who built it, thereby resulting in a legacy of sometimes clumsy or obtuse usability. It is the brain child of music-focused digital agency Idea Junction, who have carefully developed the product further, teaming their knowledge of complex online systems with experience in creating and selling production music.
Approach
I'm lucky enough to have worked with Idea Junction on a number of projects, and for Cadenza Box they approached me to design the base template for the system. With the large UX stage completed by the agency, my focus was to create a clean, intuitive design for the interface, that would gracefully transform from desktop to mobile and tablet views. The aim was to maximise use of space while staying neutral enough to be easily rebranded by any future distributors to whom the system may be licensed.
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. The clever chaps at Idea Junction were happy too.
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.
What they said
He’s way more than just a visual designer. Being a web developer also, Al has a very context-sensitive way of approaching design, making it relate to user interaction and technical requirements at all points. He delivered to us not just polished designs but also full HTML style sheets to help us kickstart our dev process, displaying some strong coding skills too.
We continue to work with Al to help us with the presentation of our own product, again our most important work. His level of consistently high-quality delivery means we can rely on him for our best contracts.
Dan Slatter
Director, Idea Junction