Mastering the piano with Lang Lang

Something like a phenomenon

The most famous pianist on the planet wanted to follow his phenomenally successful set of books under the same name. ‘Mastering the piano with Lang Lang’ with an iPad app, a perfect way to engage with his digitally native audience.

My role as lead UI designer was to create a graphical language and interface that tipped its hat to the books but felt contemporary, fresh, passionate and elegant with an open-heart for anyone to learn from.

Research

Whilst the UX designer began working out the business and customer needs to define functionality I explored Lang Lang as a brand.

I do this with all my projects but I had to go further with Lang Lang as we didn’t have brand values that we could create design principles from and therefore create a design system.

Its important to have values so we can create a design that is true to the subject rather than copy the latest design trends. Giving you a beautiful design with substance.

values-dark-v2values-dark-v2

“...his playing is also so sensitive and so deeply human...You hear him play, and he never ceases to touch your heart... he’s fearless. He’s not afraid to burst the bubble of false élitism. He’ll wear a new kind of tux, with tennis shoes. That’s cool.”

HERBIE HANCOCK

Working through the crap to get the good stuff.

I’d got hooked on the concept from dark there comes light and wanted to use this to bridge the transition from the dark photography and levels interface to the much brighter reader where you accessed the sheet music/ notation.

As soon as I let go of this it all came together.

  • gallery-image
  • gallery-image

Design system

The mastering piano books use a singular design system with dark concert type photography, an identifying colour for each level and two fonts: Bodoni for quotes and Interstate for all other type.

We did the same with an accent colour and individual image of Lang Lang for each level. For type I used Tido's brand font Avenir Next. It's a great font that comes bundled with iOS and has similar values to Interstate. I dropped Bodoni as it's a display face best used for large titles not the smaller sizes we needed for the iPad.

I also found Bodoni a little too superfluous for the educational message we were trying to land, so I simplified the design system to one font at two sizes only (hat tip Massimo Vignelli) with only the quote mark set in Bodoni as a nod to the books.

mtpwll_design_systemmtpwll_design_system

More than music

Mastering The Piano is a layered educational tool giving the customer the ability to annotate their score, go deeper into the history behind the piece and learn from exclusive 'in-app' Lang Lang performances and tutorials.

“To me, the piano is like a musical world – it takes me to a place beyond reality.” 

MASTERING THE PIANO LEVEL WITH LANG LANG - LEVEL 1 

The making of an icon

I usually leave the app icon to last.
By the end we know what it should embody and represent.

Two routes were explored, celebrity and inspirational.

Inspirational was recommended and chosen by the client. I feel it represents the spirit of the app and I love the subtle nod to Lang Lang and piano keys in its ll motif.

iPad Pro ready

We worked closely with Apple to have the app iPad Pro ready before the device’s launch. By converting from points to percentages we made the design scale beautifully across all iPad devices.

It was then featured with Lang Lang on the BBC's one show on the iPad Pro's launch day

UK

Its been a smash hit in the UK, featured on the one show with lang lang and being featured by Apple in the App Store within best new apps and education.

China

The launch event featured Lang Lang playing live with the app at Apple’s flagship store in Beijing resulting in 60,000 downloads within its first week.

Highly recommended

By muso98 on the App Store

Contains loads of great piano pieces to learn, and Lang Lang's videos are cool! Beautiful app.