Cue

Collaborative Music App

Product Design | Prototyping

TIME FRAME

1 Week

Tools

Axure RP, Illustrator

My Role

Product Designer

Team

Sung-Duk Kang, Andy Truong

Problem

Managing the overwhelming number of song requests at social events like parties is difficult

Design Objectives

  • Make song requests at parties more streamlined and collaborative
  • Provide an easy way to view and save songs played during a social event

The Concept: Collaborative Party Music

For this project a partner and I created a prototype for a mobile music streaming app called Cue, an app that aims to make song choices at parties more collaborative. The concept for this app arose from a problem my team regularly faced at social events: overcrowding song requests when only one device can be connected to the audio output at a time.

Ideation

We began our project with a brainstorming session to compile a preliminary list of key features for our app. Since the concept for our project came from a problem my team faced personally, we already had a fairly good understanding of our target users (college students) and their needs and pain points. Therefore, we decided to go directly into the ideation phase instead of starting with the usual background/user research. During the brainstorming session, we developed rough sketches of some of the app’s screens and a rudimentary sitemap which I later refined in Axure. The site map allowed us to organize the information hierarchy of our app as well as give us a basic idea of what the main user flow would be.

From our brainstorming session, we came up with these core features:

  • Users can host or join parties (collaborative playlists)
  • Multiple users can search and add song suggestions to a party's playlist
  • Users can save party playlists and play them later
  • Users can "like" songs in the playlist
  • The order of the playlist dynamically changes based on the number of likes a song receives from the party guests

Paper Prototypes and User Testing

With several of our core features formulated and a basic idea of our key user flow, we began to prototype our app concept by first creating a paper prototype using sticky notes and flashcards. This rapid, low cost prototyping method allowed us to test several app features while being flexible about these design decisions.

We used the paper prototype to conduct two user testing sessions with two different college students. Our goal was to evaluate the usability/desirability of our app’s current set of features. We asked the participants to think-aloud their thoughts and impressions of each screen and what their expectations were when they tapped certain elements. We also gave them task scenarios and asked follow-up questions after the test. We used this information to add more features to our app and modify some of existing ones based on the user feedback.

Test Results

The app was found overall intuitive and the participants seemed to really like the concept. Both mentioned how they wanted to see the collaborative playlists and ordering based on likes features on other music streaming apps like Spotify.

The main suggestions we received were to change how the saved playlists worked. Instead of only having to option to view and purchase the songs in a saved playlist, the participants wanted to play the songs directly in the app. Additionally, they wanted the ability to share these playlists and host new parties with the songs of a saved playlist already loaded.

Wireframes

After gaining feedback on our paper prototypes, we moved on to create wireframes for the app's key screens using Axure RP. This allowed us to focus more on the visual design aspects of the app, seeing where each element of the app should be placed on the screens. While our wireframes were not interactive, they were helpful in establishing the information hierarchy through design elements such as headings, horizontal line dividers, and buttons. We used the wireframes as a template to begin creating the final high-fidelity prototype of the app.

High-Fidelity Prototype

Using our wireframes as a guideline, I refined our designs into an interactive high-fidelity mockup using both Axure RP and Adobe Illustrator. The dark background theme and white text and icons was meant to resemble Spotify's UI because I wanted to design this app as a new set of features for the music streaming service.

The prototype was presented at an open house hosted by the Human Centered Design and Engineering department. Overall, the project was well received, with many spectators surprised that a similar app did not exist or that our features were not already a part of other popular music streaming apps.

App wALKtHROUGH

Cue has 3 main features which are detailed below.

1. Host or join parties around you.

Once a user logs in, they are met with a list of parties nearby their geolocation or hosted on their local wifi. Users can also create their own party and set a variety of party preferences including a theme color, background image, name, password and discovery range and method.

2. Contribute to a party's playlist by adding suggestions or upvoting songs in the queue.

Users can affect the order of the playlist by “liking” upcoming songs which will move them higher up in the queue. Additionally, party guests can search and add their own song suggestions to the playlist.

3. View already played songs and save playlists.

Users can view the entire playlist of a party including the already played songs. If they like what their hearing they can save a snapshot of the playlist and listen to it later.

Additional Features

  • To moderate the parties, party hosts can: kick out unwanted guests, remove songs from the playlist, create optional passwords to join their parties and add other co-hosts.
  • Parties can be hosted in two ways: regular party mode and silent party mode. In regular party mode, the music only streams to the party host’s device. In silent party mode, the music streams to the devices of all the users within a party, so everyone can just use their headphones and have a “silent” party.

Final THoughts

I really enjoyed this project as it allowed me to exercise my product design and interaction design skills. If allowed more time, I would have liked to have done more user testing in order to refine app’s design so that it better met the needs of the user. In the future, I hope to make a functional version of the app or somehow get a music streaming service like Spotify to add these features.