When Blüthner Piano Centre wanted to update their flagship site, they turned to developer and design director Andrew Winter, at Winteractive. Blüthner’s requirements for the new site included significant design enhancements, as well as a way to manage their own content more effectively.

As a CloudCannon partner, Andrew knew that CloudCannon’s intuitive editing interface would be ideal for the Blüthner team, and that the static site generator Jekyll would be the right tool for the job. And when it came to the design, he knew he wanted to showcase the skill and craftsmanship that goes into every single Blüthner piano, via the production of new, high-quality assets to show on the site.

Because Andrew takes a holistic approach to his studio’s site development process, he was able to commission much of the content himself — including acting as an art director for a video production company for the hero video content:

I wanted to convey that Blüthner is all about the love of playing piano: closeups of someone playing, good closeups of the products that show its quality. I think that's made a big difference when you first land on the website. You’re immediately presented with this lovely video playing, that gives you a good overview of what the products are, and what it's all about.

The video itself is presented with a custom layer Andrew built to pull it through to the page, and because it's responsive to the user’s device and connection speed, the page's speed and performance aren’t affected at all.

Harmony in design, development, and storytelling Direct link to this section

Part of Andrew’s approach to the project was considering the long and rich history of Blüthner pianos — established in 1853, the company supplied pianos to composers as varied and as celebrated as Debussy, Wagner, Tchaikovsky, and the Beatles, Stevie Wonder, and Bruno Mars.

The task of creating a new site brought the opportunity to tell a story about the product — and given that the product in question is so high-end and handcrafted, Andrew felt it was important to communicate just how unique Blüthner pianos are.

There are certain features that just make a Blüthner sound incredible. There’s a unique stringing method they have called aliquot stringing, which gives every note a really rich sound that you won't get on any other piano.

The Blüthner aliquot system adds a fourth string slightly above the normal three; while it isn’t struck by the hammer it vibrates sympathetically, adding a more complex and colorful tone to the instrument. It’s very much a case — much like Andrew’s holistic approach to development and design projects — where the whole is greater than the sum of its parts.

No strangers to harmony, the Blüthner team agrees, writing to Andrew after the site launched:

The platform has received excellent feedback and has performed far beyond our expectations.

As further proof of the success of Andrew’s redesign, Blüthner have found that they've had a huge increase in the number of inquiries since the new website launched.

World-class performances, with results that match Direct link to this section

Andrew’s customized site and build for Blüthner includes a range of static pages representing products — the Grand Piano range, the upright range, and so on — as well as groups of pages that are set up as Collections; select data from these pages are displayed on Blüthner’s product listings page as well as on the individual product page itself.

Blüthner, for example, holds a regular concert series, held in intimate venues and featuring a well-known or up-and-coming pianist. With CloudCannon's interface and Andrew's help, Blüthner editors are able to easily manage their event listings, and the homepage is set to always display upcoming events.

I've set up the CMS so the the editor is very much tailored towards the specifics of what data makes up an event for them. For example, they can specify who the pianist is, add a short biography of that pianist, and a picture.

Similarly, Andrew’s site design and CloudCannon’s CMS allows Blüthner to manage listings for their pre-owned and reconditioned pianos. Users can easily add and remove listings, with custom fields for style, brand, specifications, and price. It’s this kind of configurability that Andrew appreciates, for the freedom it allows his clients:

One of the things about Cloud Cannon is once you configure it, set it up, and tailor it towards a customer, the usability of the interface that you guys have designed is top class. It’s really, really user friendly, so that makes a big difference.

About Blüthner Piano Centre Direct link to this section

Since 1853, Blüthner pianos have been handcrafted in Leipzig, Germany, with a focus on premium materials and traditional crafting methods. Blüthner Piano Centre is the heart of London’s piano community, with new and reconditioned pianos, regular concerts, and additional services such as piano restoration, hire, and tuning.

About Andrew Winter Direct link to this section

Andrew Winter is a design director, developer, and CloudCannon Partner working across the fields of brand identity, UI design, web development and e-commerce.

From bespoke websites, online stores, and mobile apps to traditional printed mediums, Andrew’s studio Winteractive produces beautifully crafted design work that helps clients to communicate with clarity, simplicity and visual appeal.