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.

The problem

Squarebox wanted to totally revamp the user experience for version 2 of the CatDV web client with improved functionality and UI, and later a redesign of their desktop client and associated tools.

The solution

Web client screens

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

The new web client needed to work equally well on touch devices and in the web browser, 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 the 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:

Example of branded web client

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

At the same time Squarebox were working on a major update to their flagship desktop client. One of the priorities of this update was to review and suggest visual design changes that would improve the user experience. Due to the complexity of the software with its hundreds of separate controls, our focus was to ensure the UI components had a clean and simple style, removing superfluous borders and bevelling effects that add to the visual clutter. Colours, font sizes, border widths, and icons all needed to be normalised across the application. These redesigned UI components are now being applied to the various other products in their range, including the Advanced web client pictured below.

Advanced web client

The ‘advanced’ version of the web client uses the same UI styles of the desktop client

In addition to the web and desktop client improvements, I have recently worked with Squarebox to design concepts for a graphical user interface for their Worker workflow automation software. The graphical interface has been designed to make the process of creating workflows more visual and intuitive, with groups of actions colour-coded for easier reference.

Workflow automation tool

Design concepts for a workflow automation tool

Squarebox continue to innovate with the design of their products with an emphasis on customer experience. You can find out more about their CatDV product line at their website.