LUMI

A smarter way to learn and play music

LUMI is an illuminated keyboard and app that makes learning to play the piano easier and more fun. Pick a song, follow the lit-up keys, and become more musical in minutes.

the challenge

Turning a vision into reality

With the vision of making it easier to learn and play music, ROLI asked us to help with the interface design and overall user experience of the learning app that connects to their innovative keyboard.

Embedding our team within ROLI's office for a number of months (thanks for the lovely lunches!), the process started by exploring the market positioning of LUMI. Should it be a series of interactive lessons? Or a library of songs to play along to? Or a game? Through an iterative design process, we explored each route in detail together with ROLI, before agreeing that the strength of the app would be in combining all three.

User experience design

A fine tuned balance of playing and learning

Following ROLI’s vision, we designed the app to be very easy to use for all ages. After completing a few simple onboarding steps to connect the app to the keyboard, budding musicians can choose to play songs or take lessons. From there, they can further customise their learning experience. The bite-sized, interactive lessons cover topics from scales to finger techniques, while each song can be viewed in different ways, from Guitar Hero-like streaming shapes to traditional musical notation.

Onboarding

Crafting a positive first impression with a slick and interactive onboarding experience.

Play mode

Creating a sense of achievement by capturing points and tracking performance.

Learn mode

Building a playful learning experience with bitesized video lessons and chapter challenges.

look and feel

Fun, easy, enriching and limitless

The visual design is inspired by the colours and tactility of the keyboard, creating a strong visual link between the physical and the digital. From the 3D game elements and sculptural illustrations to the colourful video lessons, the look and feel captures LUMI’s guiding principles – Fun. Easy. Enriching. Limitless.

Design system

To help Roli grow the app over time and maintain a consistent user experience, we designed a UI kit and content templates.

content

Designing new artwork for the music library

With an extensive collection of songs, across multiple genres, we wanted to create a cohesive visual language for the LUMI library. With the ROLI design team, we designed new cover artwork for the entire library of 200 songs and created a system for each music genre using different background shapes and duotone photography to complement the rest of the visual identity.

app store review ★★★★★

“Awesome product! Works seamlessly with my keys and is super user friendly. Definitely a great way to be productive during lockdown”

YaYaBee20, 04/22/2020

app store review ★★★★★

“Gorgeous app. Waiting for my LUMIs to ship but this lets you play with the onscreen keyboard if you don't have one yet!”

nav.indra, 04/10/2020

Services

  • Product management
  • UX & UI design
  • Art direction
  • Prototyping
  • Visual design
  • 3D design

Sennep Team

  • Kin Leung | UX & UI designer
  • Gil Zissu | UX & UI designer
  • Matt Rice | Creative director
  • Sofia Carobbio | Project manager
  • Peter Tarka | 3D designer
  • Danilo Figueiredo | React Native engineer
  • Chris Belgrave | Product manager

Roli Team

  • Angus Keith | Director of product management
  • Yuta Sugawara | Director of design
  • Chris Bews | Senior developer
  • Tom Duncalf | Developer
  • Luke Phillips | Developer
  • Tobi Gladwell | Developer
  • Lukasz Kozakiewicz | Senior software engineer