Bringing musical history to life

This is the story of how we partnered with the Klezmer Institute to create a visual identity and design language to enable them to quickly create prototypes to get funding for their vital work.

Sector
Duration
4 weeks
What we did
Interface design
Front-end development
Digital-first branding
Product design
A stylish shallow focus photograph showing the top part of a web page design, including the logo of the Klezmer Archive Project and some page content for a tune called Al sholoysh aveyroys.

Traditional Jewish klezmer music has been kept alive even through war, pogroms, and displacement. In an amazing twist, the repertoire could be hugely expanded thanks to a treasure trove of manuscripts found in the national library of Ukraine. You can hear all about it in the podcast series, Rescued: The Lost Treasures of Klezmer.

The Klezmer Institute project is making this motherlode available online. But it’s not enough for this archive to be accessible. It also needs to be beautiful.

Making a beautiful online interactive library won’t just be good for the user experience. It willwould also help unlock further funding for this important work.

While the Klezmer Institute had plenty of technical know-how, they needed help to make the product design sing.

That’s where Clearleft comes in.

The Results

Beautiful branding

Colour, typography, and texture along with a smart new logo.

A cohesive product design language

The building blocks of a design system for fast iteration.

Modular front-end components

Self-contained pieces of HTML, CSS, and JavaScript that can be quickly combined in a prototype.

The Full Story

How do you create a digital design language that feels connected to the past?

The folks at the Klezmer Institute are not lacking in ambition. They have a vision of what the final product should achieve but they don’t have experience in taking iterative steps to get to that goal. They asked Clearleft to be their strategic design partner so that they could take their ideas from concept to reality. We helped them to ask the right questions about what’s feasible and realistic.

A screenshot showing a collage of fragments from books, websites, style guides, and existing music services. A gap in the centre shows arrows pointing to a question mark. Around the outside of the images are text snippets including ‘An eye on the past’, ‘A step into the future’, and questions about what music of the past and present looks like. The text at the top reads ‘A living tradition’.
We gathered reference materials to shape the style for the new platform.
A frame showing typography and colour samples, a small set of 8 hand-drawn icons, a few buttons and some fine-line plant illustrations. It looks like pieces of a website collaged together, rather than an actual website page.
We produced a few variants of an element collage to help the team align on a visual direction. This is the version we took forward into the component design stage.

They knew they needed to start with a simple prototype. But even if it was going to be simple, it still needed to be beautiful. Even the minimal viable product should be something that users can fall in love with, and that prospective investors would see as a high-quality and worthwhile opportunity.

Two copies of the logo, showing the intentional spacing within and around it. The left copy shows how the logo’s alignment is derived from the l character. The right copy shows an even space around the edge of the logo.
The left edge of the logo is aligned to an angle mirroring the lower-case l character of the font. The logo’s exclusion zone is based on the font’s x-height.

Getting the foundations right would be crucial for the future of this project. It needed to feel connected to history, without feeling dusty and buried. Instead of evoking archeology, we wanted to get across a feeling of growth and new life. Using earthy, rich metaphors of foliage and abstract tones that suggest depth, we established a visual language that feels vibrant and upbeat, like the music. It feels scholarly, but not boring. It has an eye on the past and a foot in the future.

All of this happened through constant collaboration. As well as a regular cadence of video calls to iterate on the design direction, the client had access to the Figma file at all times. This gave them the opportunity to stay in the design loop and feed back on progress while there was still time for course correction and  iteration. 

How do you create the right components for a fledgling design system?

Individual website components arranged in a single frame to give an impression of the website’s modularity and its unusual but uniform colour palette.
A selection of the components we designed, showing the bright green and orange colours standing out against the dark, earthy colours behind.

Creating a complete design system wasn’t in the scope of this piece of work. But we could still design and build in a systematic way, giving the Klezmer Institute components that can form the basis of a future design system.

We got into the browser right from the start of the product design stage. Our Figma Utopian project kickstarter file helped us hit the ground running. It’s got the majority of basic building blocks: buttons, form fields, tabs, headings. By getting the table stakes out of the way, we could spend more time focusing on the unique aspects of this project.

We used Storybook to document and store components because it’s technology-agnostic. We provided standalone chunks of HTML, CSS, and JavaScript that aren’t tied to any specific framework or library. This means that the Klezmer Archive isn’t prematurely locked into any particular tech stack. We stuck to the web platform so the client could then make whatever choice was right for them.

How do you prototype your way to success?

We made some exemplar pages that brought some of the components together, demonstrating how the components could be turned into a prototype.

The Klezmer Institute team will now be able to work much faster, with consistent outputs. They can be confident that anything they make using these styles and components will look good. They'll be able to build things we haven't even thought of yet, and everything will feel in-tune, singing from the same style sheet.

Our collaboration was one early step on the Klezmer Institute's journey to fulfil their mission to bring the rich history of klezmer music to life for everyone to enjoy. They're excited to make viable product design decisions informed by a beautifully appropriate design language. It's been our privilege to help them set the stage for this ambitious project.

We loved working with the Klezmer Institute. We felt a personal connection with them and it felt like we were all on the same mission. Music means a lot to us personally. It means everything to them.

Two copies of the logo in a square frame. Visible guide lines show top and bottom padding as well as a circular container. The left version shows the padding guides touching the very top and bottom of the logo. The right version shows the padding guides pushed in to align with certain shapes in the logo, resulting in more proportional spacing.
A bonus design detail: the left image shows the logo mathematically centred, where it appears to hang low in its container. The right image shows spacing that compensates for the logo’s uneven top and bottom content and the logo appears to sit vertically centred in its container.
More work