The challenge: Part one

Developing the core Kobalt brand identity to run cross all future publishing digital products and marketing.

The fundamentals of the existing Kobalt brand were formed from the International Typography Style (Swiss design), influenced by asymmetric shapes, grids and san-serif typefaces. The original K icon uses 3 base shapes in a brand red colour, paired with a more traditional Helvetica font. This, however, was all the company had. Evolving this was going to require a wider colour palette, ownable brand font and a focus on a robust grid structure that can be universal across all on and offline media. The only constant would be the Kobalt ‘K’, slightly tweeked and now locked within a square container.

From an initial 3-week sprint, followed by amends and iterations across time, the brand retained its Swiss heritage but provided more flexibility when used in its soon-to-be updated client B2B and B2C products, which would be my main project focus.

The Swiss Typefaces Simplon font was a update for the over-used Helvetica, with the Mono numbers used to add further uniqueness. All future digital products needed to be WCAG 2.0 AA accessible so primary, secondary and tonal colours were picked to accommodate this. The geometric grid meant much more freedom and flexibility in moving content and the logo, especially when including the 3 shapes that made up the K icon.

The challenge: Part two

Creating the initial phase of the new B2B client portal for Kobalt Publishing.

With the core branding principles established, the first project to utilise and test these with was for the B2B portal where publishers and individual artist and writers can access information on revenue earnings of their music repertoire, logged in quarterly statement periods. These royalties come from various sources like streaming (ie. Spotify, Apple Music), Neighbouring Rights (when a record is played on radio, TV or performed in public) or Synch (licensing for use in advertising, films, TV and games).

As the portal contains a large volume of client data and therefore a bigger UX challenge, we focused first on a smaller section of the tool to validate the brand and create the UX foundations - Transactions. Here, users can account for all advances and expenses paid to their clients by logging them into the tool so they can invoice accurately.

Because all components that I designed would need to be used across all future Kobalt products, an AA-compliant pattern library was created that contained all core elements, states, colours and iconography. This evolved and expanded as the screen designs were formed.

Music publishing is only one part of the wider business; KTech powers the client products and AWAL is the music label for independent artists powered by this tech. They also own AMRA, a collections society that is the first port of call for royalty distribution. Here too, parts of the brand and component library are used in the first phase of the updated AMRA portal.

The challenge: Part three

A bespoke music search tool to improve the pitching of the Kobalt catalogue.

After constructing the base components for Transactions, Synch (based primarily in LA) became the core focus from the publishing side of the business. As speed and access to Kobalt’s servers of repertoire was becoming ever-increasingly more difficult in the US, the need for a web-based, super accessible tool to pitch and licence music was essential. The main aim was to improve discoverability of the entire catalogue and to pitch music that Kobalt has more publishing rights for, increasing revenue for artists, writers and the business.

I begun by analysing the existing pitching process in London for 2 weeks to create a first draft prototype. With this we went to collect user testing with main stakeholders from all territories when the Synch team held their biennial summit in LA. This first round of feedback gave us the key requirements necessary to continue the design development of the tool. Multiple versions with additional components, interactions and content were then developed to get to the first release MVP stage.

Data quality and back-end ingestion meant the tool had to be more function over aesthetic form so the key challenge was to surface the right level of track detail for the team to pitch in a more effective way.

Along with an integrated free-text elastic search, results (that are all tagged individually) can be more refined with a selection of filters to find the perfect track(s) to answer a client’s brief. As well as a faster, more accurate search functionality, Synch users can collate tracks for briefs by creating pitch decks called Promotions and Playlists of various musical genres and/or themes for future discovery and sharing. Clients would then receive a refined view of the promotion to access the tracks. This flow would eventually contain the ability to licence any selected track and payment processing.


Company: Kobalt Music

Role: Lead UX & UI Design

Head of Design: Andy Haji

Product Owners: Alistair Banks and Ben Picone