Designing a perfect music app
Do you like music? Are you interested in design? If your both answers were close to “yes”, “yup”, “YEAH” or “dude, are you kidding me? How can you ask me this type of questions if you know that I am MARRIED to design and music!”, then, Booyah!
 
My name is Jake Davies and I’m the creator of the VOX music player design on Mac and iPhone.
I’m not working at Coppertino anymore, as I’ve left around a year ago. We’ve been working close to each other for almost 4 years and became very good friends. I still keep myself updated on how VOX is doing, what ups and downs it goes through. After all, I have left a part of me in VOX — its design. For me, watching VOX successes is just like watching your kid grow.
Image: Guidelines for developers
Music software design… Wait, what?
 
By the time I have officially joined Coppertino team, there was a long path I’ve made which gave me enough experience to feel confident about developing VOX design. I’ve been working with lots of local design studios like ATELIER, TrySoda, and Frog Design. These were the places where I was growing as a designer. But at that time, I was still too far from music tech sphere. My passion for music brought the stronger interest. It was developed while working in the entertainment industry. For 2 years I’ve been busy as a designer and the art director at DJFM radio station responsible for communication via web, offline and other digital products. Working at the radio station and the previous design studios made me ready to work on designing music software.
 
One of my best friends, Nikita, was working with me back to back at DJFM as the sound designer and the producer since the time I’ve just joined the station. I’ve been learning a lot about the sound recording as we’ve recorded two music albums (The Beginning and Amsterdam). That was an experimental stuff, some mixes between chill out, score and ambient styles. We’ve produced several great motion sequences designed by ourselves as a team. I was responsible for animation and Nikita was responsible for sound design.
 
The CEO at Coppertino, Ivan Ablamskiy, and Coppertino’s team lead, Sergey Tkachenko, became the core audience to share our music projects with. They were supporting us for years and were the first to know about our successes and failures. So that shouldn’t be a surprise now, that in summer 2013, I’ve joined Coppertino team as a product designer.
Dear, you need a facelift
 
One day Ivan came to me and showed me the design samples Coppertino was working on for a long time. They were ready to ship those to the Mac App Store… I guess, that moment decided everything.
The conversation brought us to understanding what was good and what wasn’t good in the design we had. Frankly speaking, most of what I saw then wasn’t good. The only thing I’ve heard from Ivan was “Well, smarty pants, show us how to do it right then!”
 
As a beginner I came to a pretty daring thought that since I had a good relationship with the team, loved music, and always wanted to design my own music player, why was I still staring at Ivan? I was standing in front of the door which didn’t even need any pushing, I could just kick it with my leg and it would open me the path to the great opportunity — change the way VOX player looks and what impression it makes.
So my first achievement was «facelifting» the player. I built the right basis for the player to scale properly through its evolution in the next 2–3 major updates. We’ve got lots of discussions and huge research has been made to figure out what the listeners need in a music player.
 
The listener was the core guide for our design strategy development. We failed on our way, and not once. We failed many times. However, after all these mistakes were made, we’ve found the right key to the perfect design, the solution that felt right, that felt like «VOX» — a high-quality music player for the listener with the exquisite music taste.
Left: Welcome State; Center: Now Playing State; Right: (Mouse Hover) Control State
Keeping it simple
 
To advance VOX design, we had to draw a clear picture — what was good for music player design and what was good but it wasn’t good for VOX. It’s actually a crucially important question because many product designers forget about the product itself and just generate different solutions to add more features for the features sake. Our goal here was to keep it simple.
 
The idea behind VOX is to deliver a simple solution to listen to music, no matter where you music is. I wanted to break the boundaries between the pattern lots of people are the victims of — too many music sources we use that are not interconnected!
 
I was struggling with it myself. I used to open iTunes for local music. Pause iTunes, open Safari and log in to SoundCloud just for a few exclusive songs that I really loved and wanted to listen. However, I wished there could be «Play Next» button on SoundCloud that connected my iTunes playback queue too. And the issue wasn’t only between SoundCloud and iTunes. I had many other accounts in different music services that I would love to connect somehow and listen to music from all sources in a single place. We’ve all been there, right? But that was 2014! There had to be a solution. And our research showed I wasn’t the only one looking for it. VOX users were looking for it in the first place.
 
The results of my research showed us that we could build that solution easily. If you look closer into each particular source, like SoundCloud or Spotify, even YouTube, you’ll see three things that this source is made of:
 
a. Music Database
b. Ability to create playlists
c. Like feature
 
 
Each source also has it’s own player, no matter if it is an iPhone app or a web-player. And guess what, each player has pretty similar controls:
 
a. Discover new music
b. Play your favorites
c. Create playlists
 
This gives us lots of insights. If you want to design the best player ever, without music behind it — you will fail. The key to the success in the music player design is to unite the sources, to keep the sound quality, read high-quality file formats, discover new music, play favorites and create playback queue the way the USER wants it, not you. At the same time, do no forget to keep it simple — make a player of a compact size. Not some giant lousy piece of software that a listener will have to struggle with all the time.
When VOX Player is not active app main window transforms to something I called «Artwork State»
Building analogies
 
I’ve got a story I love to tell when I’m asked why I’m so passionate about VOX. As a person, you have your own style. You choose clothes based on your style preferences. You dress each day the way you like, the way you feel, right? You switch looks every day. When you go shopping, you discover new clothes, new trends. Maybe, you’re just looking for a new jacket for tomorrow’s interview? No matter if it is a piece of high fashion (FLAC) or something simple and popular like GAP (MP3), when you’re happy with your choice, you do what? You just buy it (Like or Add to favorites)! You grab it, take it home and leave it in your wardrobe untill the moment, when you’re in the mood to wear it (Create playlists).
 
It’s the story full of analogies. In terms of music, it’s the same story. Just imagine one set of familiar controls, that are easy to use, nothing extra to learn and all of your favorite music is in one place, just like that wardrobe where you have all your clothes. You can create your queue the way you want. Let’s add the sync feature too and, I guess, that’s the good start for VOX as a player.
Left: Playlist; Center: Collections; Right: Collection View
Left: Library sorted by Artist; Center: Album View; Right: Artist View
Left: Playback Queue; Center: Play Next (Alternative Queue); Right: Empty State
Left: Favorite Radiostations; Center: Discover Radiostations; Right: Category View
Left: SoundCloud Stream; Center: Pull-to-Refresh; Right: Scroll Lazy-Load
Left: SoundCloud's Playlist; Center: Hover on Trakc's Cell State; Right: Selected Track Cell State
Left: Local Search; Center: Interactive Smart-Search; Right: Empty State
We gotta move on
 
After 8 months of our new design release Apple revealed Apple Music, with interaction pattern that we’ve already used in VOX and that moment felt… I don’t know how to say it right. On one hand, it was a good sign that we’ve been right for the last 1.5 years working, failing and researching, but holding on to the right path. But on the other hand, damn, when Apple does something like that, how can you compete with it?
Right now VOX is still on it’s way to reach 100% success spot, where all the music sources we wanted to add into it will be integrated in VOX. So far, I’m proud that I have created what you’re currently looking at when you see VOX on Mac and iPhone. I’m proud to be part of VOX’s story. And VOX will be always big part of mine.

You may also like

Back to Top