Sheet Music & Tabs

SHEET MUSIC & TABS

Jellynote

I was approached by Jellynote to create a new art direction for the beginner’s section of their website. The goal was to re-design some of the pages and create a series of illustrations to go alongside the new UI. Although it ended up being a concept exploration, this project was a blast and I’m quite proud of where the final designs and illustrations landed. Special thanks to Flore Wang for the wonderful collaboration!

Mobile & Desktop UI Designs

Jellynote is a music content distributor offering over 100,000 songs to users in sheet music, tabs and chords format. The music sheets are created by professional musicians, performers and teachers, all of whom love creating and sharing arrangements of their favourite songs.

Key Visual

To kick off the process of defining a new art direction for a younger audience of Jellynote, I've started by illustrating the essence of the brand in one key visual. I wanted to capture the creation of music sheets being empowered by human characters as a way to get closer to the user and make the visual more relatable. This piece ended up being used as the homepage header.

Key Visual illustration done for the homepage header

Illustration

The goal was to create a series of illustrations that helped emphasise the main feature of the brand of being empowered by all of these professional musicians, performers and teachers. With the key visual illustration established and approved, I was ready to tackle the rest of the illustrations we needed for each instrument page.

Trumpet instrument page illustration

Violin instrument page illustration

Clarinet instrument page illustration

Drums & Piano instrument page illustration

Flute instrument page illustration

Ukulele instrument page illustration

Guitar instrument page illustration

Bass instrument page illustration

Concepts that never made it into colouring stage

UI Design

The final step was to re-design the user experience of the homepage, instrument pages and the 'Checkout' page while following the same wireframes of the original Jellynote's website. It was important to me to keep the illustrations not too distracting across the designs. The focus needed to stay on the content and that’s why we aimed for illustrations mainly for the page headers and footers. This way they could stand out through their storytelling while also having a greater impact on the user experience. Overall, illustration always appeal to users because they make the design humane, authentic, inspiring trust and sympathy among people.