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!

The Nursury Project: Using Design Thinking to Create A Social Business

Design Challenge

Design and launch a locally owned, sustainable, scalable business that addresses a social challenge in a Ghanaian community, using a human centered design process and Think Impact's asset-based approach to development.

My Approach

I immersed myself in a rural community for eight weeks, assembled a five person team of skilled locals and led them through an innovation process to create a low-cost, local cocoa nursery.

Our Results

The cocoa nursury this team created reduced the money and labor required for new cocoa plants by 70% This reduction allows more people to afford access to cocoa seedlings and invest their saved money for nutritious meals and other local investments.

The Design Process

Seeking a deep understanding of the local community allowed me to experience a variety of compelling perspectives and challenges. To understand Kwame Dwaa, Ghana, I lived with a local family and spent the first two weeks building empathy through interviews, shadowing, active observation, building character profiles, and mapping transactions.

In collaboration with other ThinkImpact scholars and the local community we integrated our research into large asset maps. After two weeks we facilitated a community wide mapping event, using the same asset map approach. This gave us a holistic view of the local resources, transactions, and motivations. We also utilized this information to identify potential co-workers for our project.

Using our own research and the local resource map, we created an individual persona for each potential new team member. Information included basic demographics, skills, job, goals and aspirations. We met as a team to build a list of locals we would ask to join our respective design teams.

I assembled a design team of skilled individuals and led them in activities that facilitated creative thinking about their available resources and talents. I innovated hands-on activities where members were inspired to discover multiple uses for common materials such as water bottles and bamboo. This helped the team see the potential for radical new businesses.

We identified a shared challenge: access to cocoa farming inputs, and then listed the assets and networks surrounding the issue. When the idea of a local cocoa nursery emerged, we drew a storyboard to visually describe how this issue affects the community and how our solution provides a sustainable answer.

Once the team had agreed on a collective action plan, we set out prototyping our nursery by building a small one near the village center that attracted curiosity and enthusiasm. By building a prototype first, we were able to discover environmental hiccups and forge the best plan of action for a larger nursery. Since most materials were readily available locally our only monetary investment cost was for nails.

With a well-tested product and plenty of feedback, we established a plan covering the construction, individual roles, and marketing strategies for the new nursery. We presented our plan at a community exhibition alongside other innovations from Think Impact scholars.

In collaboration with Self Help International, the cocoa nursery was provided with more inputs to start a large-scale operation. The local founders of the nursery are nearing their first harvest of 6000 cocoa plants that will provide the community with a stable source of income.