Squarebox is a software development company specialising in building tools for digital asset management. Their flagship product, CatDV, is a media asset management system that consists of a suite of products – which includes desktop, server, and web-based solutions.

Web client screens
A selection of screens designed for Squarebox showing components in different states

Back in 2014, Squarebox wanted to totally revamp the user experience for v2.0 of the CatDV web client.

One of the constraints (or opportunities) of the project was that it needed to work equally well for desktop users with a mouse in hand and those using a touch-enabled device, so all UI components needed to be designed with minimum touch area in mind and a flexible, responsive layout. 

Although primarily a means to catalog, browse, and manage media assets, the web client still has some advanced features in common with its sibling desktop client – specifically the timeline-based sequence editor with it’s zoomable and draggable interface, which proved to be quite a challenge to design for touch devices.

One of the defining features of the web client is the ability to customise and personalise the interface to suit the specific requirements of the customer. This was achieved using Bootstrap themes to extend the default styling of the user interface – allowing the customer to go crazy with the colour choices, as demonstrated below.

Bootstrap themes allow customers to personalise the user interface with branding & colours.

From web to desktop

At the same time Squarebox were working on a major update to their flagship CatDV desktop client. Due to the complexity of the software with its hundreds of separate UI controls, panels, and dialog boxes, there were places were the user experience was hampered by a lack of consistency. So the focus of this update was to develop a clean and simplified style for the user interface, ensuring all UI components were visually consistent throughout. Removing superfluous borders and bevelling effects helped to reduce the visual clutter, and colours, font sizes, border widths, and icons were normalised across the application.

These redesigned UI components now inform the various other products in Squarebox’s suite, including the Advanced web client pictured below.

Advanced web client
The ‘advanced’ version of the web client features the same UI styles as the desktop client

Other products

In addition to improvements to the web and desktop clients, more recently we have redesigned their new ‘Worker’ workflow automation software, incorporating a colour-coded graphical user interface, as well as CatDV’s Final Cut Pro X extension.

Workflow automation tool
Design concepts for Worker workflow automation tool

You can find out more about their CatDV product line at their website.