January 26, 2015 - Comments Off on Design Process

Design Process

When interviewing for design positions, whether they are contract jobs or full time positions, the question of design process usually comes up. And while asking the question may lead to an interesting discussion, my answers seem, to me, to broad and vague (conceptualization, research, design, refine..  repeat) or drastically to detailed for a phone screen. So, this is going to be an experiment of my process for designing a mobile app. Hopefully delving into the details 'a bit' more than is reasonable for a quick interview question and seeing the real thought processes that go into a reasonably simple project.

Let's begin.

The concept: A Music Discovery App. (seems simple enough, heheh)

Problem: Discovery of new music needs to be improved. Finding the music you already know is easy. Soundcloud search/next music is limited. Pandora is also limited but in different ways. The user has to make a playlist via song, artist, etc. I don't know where to start, I don't know what the genre is called, I don't know any DJs by name. OK, maybe a bit overboard there, but you get the idea.

From some previous work iterating through various logo mark concepts, I'm going to riff off some ideas there and brand the app XO.

Diving into some really basic competitor research I downloaded and tested a few apps under the search term "music discovery." Apps included Museeker Music Discovery, Spotify Music, Beats Music, 7Digital, XBox Music, Soundcloud, Indie Shuffle, Google Play Music, and Shazam. I also skimmed some nielsen industry research.

Some research results:

Google Play Music: What's up with the orange? Looks like no one learned Home Depot's lesson about women not liking orange. I'm assuming music propagation skews female along with much of consumer behavior. An assumption that I would like more information on, but am limiting research time on this project intentionally. And a 10 minute googleing didn't yield anything specifically useful.
Beats Music: Total failure, couldn't log in. Despite the website having a pretty video and some interesting screenshots claiming to be great at playing the right music at the right time I could not get past trying to create an account on my tablet. Perhaps it thinks I didn't really want to listen to any music?
Spotify: I set up an account some time ago but haven't used it beyond that first day. So perhaps Spotify got an unfair advantage in providing content. Then again, looking through their music is all lists. Terrible lists that make me pick something randomly.
Sound Cloud: I like the recommendations once you search for and start playing something and I like the simplicity of the music player interface for android tablet. But again you have to start somewhere with direct input. You can't mix and match genres, and the iOS app still feels difficult to navigate.Like how do you get back to your "stream" once you've searched for a different genre? (this is a bug, it should be the top item on the drop down list, but the list gets weird after using the app for a bit).

It also looks like Soundcloud has a developer SDK and various other useful goodies that would potentially make an MVP product easier to implement.

- Break / Snack time. While I start to write this blog post. -

My snack is a lovely honey ham, cream cheese, and baby spinach sandwich on toasted white sandwich bread with a drizzle of balsamic vinegar and a sprinkle of salt and pepper.

ham and spinach sandwich

yumm. why are you judging my white bread?


Alright, let's talk about core functionality and features. I think the core feature is the user experience from the first app launch to discovering new music seamlessly with as little user input as possible. Going as far as only having to tap the launcher icon. Beyond that, narrowing listening choices by various criteria (maybe genre and mood to start) is probably something users will want. Saving songs to play lists, playing those lists (shuffle multiple lists?), skipping songs, and re-playing songs would also be useful. Perhaps a social component but I'll leave that alone for now and see what evolves from some initial designs.

XO sketches

XO sketches

Random scribbles, more research, and making the beginnings of a logo. It needs some refinement, but will do for now. Working through some ideas and looking over other apps the idea of broadcasting music to others came to mind. I think the "feed" list style of showing what others have shared or showing all the music in a genre is just to much to process and leads to indecision or random decision making by the user. So, let's nix the idea of listing music and just play something. Given the yes/no of the design concept it's become a bit of 'Tinder for music discovery' (not sure why it's the popular thing to call that the tinder model when other people did the exact same thing before. "Let's Date" for example).

Going back to the idea of broadcasting; it should feel like it's as real time as possible. Insert the user broadcast song as the next item to be played for everyone connected to that person. This could also show some positive feedback when someone likes or saves a song you broadcast (then again, that adds a lot of complexity, like what do you do with those messages when someone is logged out, etc.). And let's limit social engagement there as to not stare into that abyss to far.

Watch an episode of Star Trek TNG and go to sleep. I think it's important to give research time to process.


Ok, translating those sketches into something prettier in photoshop. Iterating on positioning of various elements, user flow, and visual design along the way. Including propagating the logo XO throughout the app where appropriate.

XO app design main

XO app design main

Some mockups of the initial listening screen, first not playing. Then the same screen showing user comments pulled from soundcloud, which I think they need to surface more visibly. Minimal progress bar and mini visualizer. There is also the xo button on the top left for an options menu. I was also considering a play/pause button in the top right corner, but I'm not convinced it's needed. No instructions should be needed, but eluding to interaction by showing the O animate from a circle to the visualizer form would be interesting. Dev thoughts, for the 'home' music judging screen we probably need to pre-load 10 seconds of the next song (possibly two) so that it can play seamlessly when the X is hit.


XO app visualizer full info

XO app visualizer tap into O and then full info

While you could just listen to songs on the home screen, taping the O, because you like the song, will bring up the song information, the rest of the app functions, and transform the O into a cool animated visualizer. First, the user info if the song was socially broadcast from your social contacts. Then icons to save to a playlist, like, and broadcast the song (add cool visual of broadcasting). The song and artist title at the bottom is on a card that can be pulled up to see more info and the album art. Long user comments should all start at the same point and run off the screen then scroll left.


XO app album cover info

XO app album cover info

A couple mockups of the full song info card. Background should fade in as the card slides up into place and is simply a blurred version of the album art at 100% height and center cropped.


XO app sidebar moods sort

XO app sidebar moods sort

Side bar options menu. I wanted this to be bold and simple like the rest of the app, but still be functional and give power users lots more control. From the top, broadcasts from your friends (if set off shows the number of pending broadcasts). The X or O shows wether each is on or off. For an MVP I think just having the sidebar static set like this would be fine, but being able to slide each item left/right to set the amount of each section to play would be fancy. Then, taping into each item brings up it's options in card form like the album art..  these need to be fleshed out, but you get the idea. Oh, at the bottom of the side bar, account info, sign in/out etc. all the stuff you don't use regularly can be accessible but buried here.

I've been thinking about animations, transitions, and interaction sounds along with all these items; which would be laid out nicely in a full development spec. Moving forward with a spec I would work through the details of filter lists, information displayed for the song/album, log in and settings, and of course the visualizer. There's so much that could be done there, but I would need to talk to a developer or do a bunch of research into performance, battery usage, etc. before deciding on just something that looks cool.

Total project time ~15 hours. 

Also check out the pretty app mockup

Published by: Jeff in Blog

Comments are closed.