Axure RP, Illustrator
Sung-Duk Kang, Andy Truong
Cue is mobile music streaming app that allows users to host or join collaborative playlists where the order of the songs dynamically changes based on a voting system. The prototype was built as a final project for a UX Prototyping course.Interactive Demo
Managing the overwhelming number of song requests at social events like parties is difficult
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.
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:
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.
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.
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.
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.
Cue has 3 main features which are detailed below.
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.
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.
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.
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.