SHEET MUSIC & TABS
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.
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
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
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.
Homepage Desktop & Mobile UI Design
UI Design Sketch Files
Premium Subscription Journey Desktop UI Design
Illustration, UI Design & Art Direction
Creative Direction: Flore Wang
Art Direction: Philipa Rabbit
Illustration & UI Design: Philipa Rabbit
I’m an Illustrator, Digital Designer and Art Director. I help brands communicate their ideas on advertising and animation media.
Want to see the behind the scenes of my work? Explore more storyboards, sketches, style frames and colour scripts.
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 2022