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!

Icon_scroll-down_50p

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.

Jellynote_03

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.

Jellynote_08.2
Jellynote_09

Trumpet instrument page illustration

Jellynote_10

Violin instrument page illustration

Jellynote_11

Clarinet instrument page illustration

Jellynote_12
Jellynote_13

Drums & Piano instrument page illustration

Jellynote_14

Flute instrument page illustration

Jellynote_15

Ukulele instrument page illustration

Jellynote_16

Guitar instrument page illustration

Jellynote_17

Bass instrument page illustration

Jellynote_06
Jellynote_07

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.

Jellynote_32

Homepage Desktop & Mobile UI Design

UI Design Sketch Files

Premium Subscription Journey Desktop UI Design

My Services

Illustration, UI Design & Art Direction

 

Credits

Client: Jellynote

Creative Direction: Flore Wang

Art Direction: Philipa Rabbit

Illustration & UI Design: Philipa Rabbit

About_Me_v4

About Me

I’m an Illustrator, Digital Designer and Art Director. I help brands communicate their ideas on advertising and animation media.

Work_Process_v6

Work Process

Want to see the behind the scenes of my workExplore more storyboards, sketches, style frames and colour scripts.

Project_Enquiries_v1

Project Enquiries

Do you have a project you’d like to talk about? Drop me a line if you want me to work on a design or illustration brief.

© Copyright Philipa Rabbit 2024

Back to top Arrow