DJ With Friends: The Design Process
The Challenge
For a design challenge I was given the open-ended task of designing an app idea as much as possible within a four-day period. I decided to create a music app that I had been toying with in my mind for some time, but never fully fleshed out visually. The problem I was addressing was the demand of many people at parties to interact with the music that is being played. This happens in a variety of manners. People want to know what the song is that’s playing, they want to suggest songs and some people want to connect with others based on song preferences.
The Solution
My solution addresses all of these needs in an elegant application: DJ With Friends. The app allows users to view a communal playlist, add and vote on songs and communicate with other partiers.
You can view the final prototype here.
Conceptualizing, notes, competitive research, etc: 2 hours
Wireframing: 1 hour
Hi-res design: 3 hours
Total Project Length: 6 hours
Part 1: Research / Notes
I spent some time organizing my thoughts. I asked more questions to try and frame the problem from my own experience. Questions such as: “In what situations is music being played when I’m with a group of people?”, “How is it decided who controls the music?”, and “Where does the music come from?”
I wrote down the main functionalities of the product, so I could have a baseline for the wireframes. These included:
The ability to add a song to the group playlist
The ability to vote on the playlist
The ablility to interact with other users
I took the liberty to toss out as many pre-conceived notions regarding business logistics as I could fathom. For example, I didn’t want the fact that I might need music licensing contracts derail my idea that people should be able to have streaming access to every song they can think of. I wanted to bear as much business complexity as possible in order to deliver the best possible experience to the customer.
I researched other apps that had similar functionalities and discovered opportunities for improverment. As well as positive features that I could build upon in my own version.
In this process, I determined that the concept of a shared playlist that could be voted on by users within the app was the central idea. I wanted something that was engaging, but not too distracting in a party atmosphere.
Other features I felt were important to a delightful in-app experience, but did not design flows for, included:
Rewards for being an awesome DJ
Seeing which songs have already been played
Setting up a new playlist.
In being respectful of advised time constraints, I focused on the main flow of logging into the party, viewing, voting on, and selecting music, and communicating with other partiers.
Part 2: Wireframing / Testing
After jotting down a flow I was comfortable with, I took to wireframing. I used a combination of pens, notecards, and Balsamiq for this process. Since I wanted to have a unified feel, I left out any iPhone GUI elements that would take away from the in-app experience.
I decided it was important to include the following steps:
Home screen (logging in with Facebook)
Party selection (where am I listening to this music?)
-
Playlist view (what songs are playing right now)
Voting (How can I give feedback to the song selection)
Song Selection (how can I add to the playlist?)
Party view (who are the other users?)
Chat (how do I connect with other users?)
With these steps in mind, I created basic wireframes on index cards and used these for user testing. This involved spreading the cards out in front of a user (in no particular order) and having them piece together a process for a specific task such as "Select a song" or "Chat with another user".
Once I had determined a fluid order, discarded screens that were redundant or unnecessary, and added screens for additional clarity, I went into Balsamiq to create a more mobile-looking layout.
Part 3: Hi-Res Mockups
With the Balsamiq screens finished, I had the information and blueprints needed for creating high-resolution mockups. The purpose of these mockups was to give myself and the user the most realisic version of the app possible, without it actually being the app.
To make these mockups I used a combination of Photoshop, Adobe Illustrator, and The Noun Project.
From an aesthetic perspective, I wanted to use color that reflected an energized, yet soothing party atmosphere. This was so the app could be utilized in different contexts. I went with the minty-green color to satisfy this. The typography I chose was Helvetica Neue for the app text and DecoNeue for the logo. I really liked the way the DecoNeue gave the app an exclusive feel. To me it looks like an invitation to a New York high-rise party, where I can see the app living out its potential.
I like to keep my color palette, typography options and other visual effects limited. This way I'm more structured in the way that I use them. For example I use the mint-green color for the up-votes as a reinforcement of the positive nature of the app. I used the orange, which is on the other side of the spectrum for the down-voting arrows because of its contrast with the green. I only use the blue for the of the decision that the user is making. Another example is the use of the "brand" blue. Besides the branding portions (loading screen, icon, etc.), this blue is only used on the menu bar and in action buttons at the bottom.
Thanks for reading!