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.
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:
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.
Similar to mixes you can see a preview of what’s inside but in a different layout.
Each gradient is generated based on the country’s flag colors.
Basically a headshot in a diamond shape with a blurred background to add a nice theming.
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.
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.