Loading... :)

Loading... :)

Project  01 / 03

Year

2020

Client

Personal project

Tools

Sketch, InVision Studio

Timbre

I have designed Timbre in order to sharpen not just my technical skills, but also look under the 'hood' of current music streaming platforms out there such as Spotify, Tidal and Apple music and see how they could be improved.

As a digital designer, I often spend a lot of time in front of a screen doing work alone, 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. I wanted it to have some kickass features where I could discover music I like and keep up with my favorite artist's releases.

Design System

Google material guidelines are fairly simple and flexible at the same time but I still modified them to a certain extent and therefore made a summary of guidelines before making a single UI component.

The guidelines Include Layout & Grid system, color system, Elevation system, Icons system and how to create different states of components.

Research & Flows

I did some qualitative research based on articles I have read about music apps, User Experience and "self-observation" since I, myself am a daily user of music apps.

One of the initial steps of creating Timbre was to create a UX flow. You might have a hard time understanding this from the picture but most of the user flows end up at either the Song, Video, Podcast or Article at the bottom, kind of like a funnel.

" Timbre ('tam·buh') a word that describes the tone or unique quality of a sound. If you play the same note on a piano and on a guitar, each note will have its own timbre. "

Design Goals

  • I've decided to go for some strong recognizable colors.
  • Soft rounded edges for neutral feel. (Not too serious, not too playful.)
  • Soft & functional shadows.
  • Blurred backgrounds (That iOS Vibe.)
  • Playlists part of the UI.
  • Dark theme.

Logo

The first thought that came to my mind when I looked at the word “Timbre” was to somehow make the letter T shaped into a music note. To make it even more music-ish I’ve added the play button. The font Rubik is used all over the app in order to create a neutral feel, therefore I kept it in the logo.

Branding

One interesting fact I found during my desk research was that most of the music apps are not so consistent when it comes to branding playlist and such. My approach was simple, it should be part of the UI and easy to recognize.

Core Features & Improvements

During my research, I have found that some people don't even make playlists. Instead, they either listen to already created playlists or type in favorite artists, they are basically too lazy to make a playlist. (I am one of those people.)

Another finding that didn't really surprise me was that some people are very picky and discovering new music is difficult for them.

Sampler

The sampler feature is where I tried to solve the problem of people struggling to discover new music fast.

The sampler is updated every day with 30-second song samples highlights that you might like based on what you have listened to or liked previously. Most people know after a few seconds if they like the song or not and this feature has a similar function as Tinder the dating app.

You hold the sample in order to play it, and by dragging down you add it to favorite tracks. By dragging up you can add the track to a playlist of your choice or create a new one. You can of course release and skip the sample and move on to the next one.

Sampler on Desktop

Listening

Timbre search is voice and song recognition-based. Once you click the microphone Icon-button inside the search tab, you can either talk or let it listen to a song and get search results.

Feed & Liking System

I remember the time when I was waiting for the new album from Kanye West. That's when I got an idea of having a very simple feed inside a music app where I could simply follow my favorite artists or podcast and see the content they just released or even knowing where they are currently touring and purchase tickets.

The liking future as I mentioned before, is for people who are lazy to create a playlist (like myself) you can simply click a like button and it would all be inside the favorites tab. Kind of like a bookmark in a browser. Accept this one automatically sorts into categories such as Artist, Podcasts, Podcast Episodes, Tracks Albums, and Videos.

Media Tab

Another Interesting part of Timbre, in my opinion, is the media tab. Almost every music app mixes videos, articles, and podcasts together with the music in order to make things more diverse.

But how about heaving a dedicated tab for it so you can explore what I want when I want?

Track View

There are two swipe functions. If you swipe the cover of the track, you can either skip to the next or previous track.

But if you swipe the bottom area, on the right side there is the current queue and on the left side, you can find suggested tracks based on the one you are currently listening to. The same functionality goes for videos and podcasts.

Personal Reflection

The creation of Timbre took me longer as I've originally planned, mostly because of finding time to do all this. But I am very glad that I finished it.

I used to admire when people started something. Now I admire when people finish something because I know how difficult and frustrating things can get.
Looking back, I have learned a lot during the process. Especially when it comes to design systems. I dedicated time before I even started this project to study the most used design systems out there, took notes and I am glad I did that, it opened my eyes and saved a lot of headaches.

The most interesting part for me was the Interaction part where InVision Studio came in handy. And of course coming up with all the different features, looking at different places and just putting the puzzle together. At some point things got quite repetitive, especially creating and naming all those symbols, but that's part of the game I guess.

Overall I enjoyed creating something new and a bit different, and I really hope that you learned or got inspired by something in this case study. ❤️

Download Timbre Sketch file here.

Timbre Screen Preview

View the case study on BehanceRead article about Timbre on Medium
Next Project
contact@lukasjurcik.com