Music platform concept & design system


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.

Timbre app showcase

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.

Browsing desktop screen
Style guidelines

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.

Sampler flow screens
Podcasts screen
Song playing screen

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.

Feed desktop screen
Artist profile and feed screens

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.

Searching screen

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.

Top charts screen
Playlists screen
Playlist desktop screen
Playlist screen

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.

Design system guidelines
Design system guidelines