Music platform concept & design system
Timbre
2020
UI/UX Design // Concept Design // Design System // Motion Design
The reason for creating Timbre was to look under the 'hood' of current music streaming platforms out there such as Spotify, Tidal, Apple music and see how they can be improved.
To take Timbre even further, it was built as UI-Kit with its own design system and guidelines all packed into a sketch file.
As a digital designer, I often spend a lot of time in front of a screen creating, to fill all that silence I listen to my favorite music or podcasts.
Some time ago I had an idea of designing a fresh-looking music app, with features where I could discover music I like and keep up with my favorite artist's releases.
The challenge
One of the main problems I encountered with today's music platforms is to discover new music fitting my style. The sampler feature is where I tried to solve this problem. Most people know after a few seconds if they like the song or not. The sampler works based on 30-second samples of song tracks, the user has an option to save the track or skip to the next one.
Improving the user experience
There are so many artists I like it’s difficult to keep up with them. By having a feed inside Timbre, I can simply follow my favorite artists or podcasts and see the content they just released or even know where they are currently touring and purchase tickets to shows.
What if the music app you choose to listen to every day would listen to you for exchange? Timbre was designed with music/voice recognition search. If you have that awesome song playing somewhere near you but don’t know the name of it, you could simply let Timbre listen and search it for you.
Content as part of the UI
At the end of the day, no matter what music app you chooses, it’s all about the content. To create an app that's unified and consistent, the content should also be part of the UI. With Timbre, I have tried to create covers for daily mixes, playlists, and top charts that are aligned with the visual language.
Design system
Timbre design system was created as a simple set of rules to keep the different components consistent so it’s simple to use it also as a UI-Kit. The design system includes 300+ symbols, 100+ Art boards with different screens, Layout & Grid system, Color system, Elevation system and a small Icon set.
