Timbre The Music App Concept.

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.

In this article, you can briefly read about my process of creating Timbre.

Timbre Start Animation
“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.”

Introduction

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.

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.

I’ve divided this article into three parts.

  • Timbre Design System
  • Visual Direction & Branding
  • Core Features & Improvements

Timbre Design System

I’ve built a couple of design systems before and one thing I failed at in the beginning was to have a simple set of rules before designing the actual UI. I have learned my lesson.

To not reinvent the wheel I decided to follow the material design guidelines. 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 interactive states of components.

Timbre Design System Guidelines

Visual Direction

The first thing I did was to look at some visual inspiration. I wasn’t looking for the ‘right’ visual direction yet but rather trying to imagine how the finished product could look like.

  • I’ve decided to go for some strong recognizable colors.
  • Soft rounded edges for neutral feel.
  • Soft & functional shadows.
  • Blurred backgrounds (That iOS vibe.)
  • Playlists part of the UI
  • Dark theme.

Timbre Primary Colors

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. Here are some examples:

Mixes

In the thumbnail and title, you can see a short preview of what you can find inside each Mix and the background is simply blurred Track/Album covers.

User-created playlists.

Similar to mixes you can see a preview of what’s inside but in a different layout.

Top Charts.

Each gradient is generated based on the country’s flag colors.

Artists spotlight

Basically a headshot in a diamond shape with a blurred background to add a nice theming.

Timbre curated playlists.

Primary red used color used as a darkening overlay, that way the background image is always either red or purple as the primary UI colors.

Core Features and 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.

Shortly I will explain how I tried to solve these problems.

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. It might look complex but in a nutshell, it’s quite simple flow.

Timbre Flow

Wireframes — Sketch Screenshot

Another step was to create wireframes based on the flow.

I have made all the wireframes inside Sketch with greyed out shapes and text.

The process was simple, I made a desktop version first and move on to the mobile version right after that.

I already aligned components to the predefined grid and layout and stuck with text styles I have already created in the design system phase.

Final Desktop & Mobile Mockups — Sketch Screenshot

From here I moved on to creating final mockups because I already had my design system guidelines in place, this part was not as difficult as I thought.

It took a long time and refinements along the way but I got it done eventually.

The Features

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

Sampler on Desktop

Listening

This is something I really miss in all music apps. Do you know an app called Shazam? This has very similar dynamics. Accept it would be within your music app and not as another app.

It’s basically a song and voice recognition search. So once you click the microphone icon inside the search bar, you can either talk or let it listen to a song and get search results.

Song recognition search

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. Just like a bookmark in a browser. Accept this one automatically sorts into categories such as Artist, Podcasts, Podcast Episodes, Tracks Albums, and Videos.

Timbre Feed

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?

Timbre Podcasts

Track functionality.

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.

Track View

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 Article :heart:. In case you have made it this far, you can preview more Timbre screens in my Behance case study.

Lukas Jurcik

Digital Designer

Portfolio | Instagram | LinkedIn | Dribbble | Facebook

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章