UX Design in Sessions Music App
The Challenge
My Role
Explore visual design practices in UX by designing a new mobile music app with Illustrator.
User Experience, Product Design
About Sessions
During an introductory course on using Illustrator for interaction design, I was given the task on a project to design a new music application for a mobile device, and being an avid Spotify user, I wanted to focus on the social aspects of music discovery.
Spotify currently connects friends through Facebook integration to display a user's listening activity (e.g. current playing track, playlists created, top artists, etc.), but in my opinion, the most important factor in social music discovery comes from physical experiences of being with people when you hear a song for the first time. These moments become memories full of emotion that place you back in that original setting when you hear the song again.
Sessions is a music app that makes these experiences feel organic by providing easy collaborative playlists for friends in real time.
Design
Interaction Design
Before I chose to make this application simply a better collaborative listening platform, I thought about problems from my experiences with listening to music in social settings.
Current Listening Experiences in Social Settings
-
You hear a good song playing at a social gathering and want to know what the artist or name of the song is.
-
You either ask around to find the person playing music or you use an app to find out what song is playing.
-
Later, you want to request a song to play.
-
You find the person playing music and place your request or borrow their device momentarily to add your song request to the queue
This can be a long process depending on the setting, and it also makes it difficult to refer to the playlist at a later time if you want to recall a song. These pain points in the current settings for social music discovery had me thinking of what might happen if the person playing music had their playlist broadcasted like a radio station.
Sessions Listening Experiences in Social Settings
-
You hear a good song playing.
-
You use the Sessions app to find the broadcasted playlist and immediately see what song is playing.
-
Later, you want to request a song to play.
-
You use the Sessions app to request a song in the queue.
This process through Sessions provides a more convenient path of discovering the music and recalling the music at a later time since the playlist can now be seen from their own phone. I used these scenarios as the foundation of my design and began sketching possible interfaces for the Sessions experience.
Visual Design
After I drafted up my concepts for the Sessions app, I began mocking up screens for these ideas in Illustrator to create the visual design for Sessions. With little experience using Illustrator prior to this short project, I immediately realized that my sketches might be difficult to replicate as most of my time was spent learning the vocabulary of menus and tools in Illustrator in order to find ways of illustrating my designs.
Nevertheless, I did design some rough drafts of different features for the Sessions app.
Queue Icon
I initially designed the Sessions app under the name "Mixtapes" because of the social affiliation that is traditionally related to the term. This led me to create a cassette tape icon, but as I explored the idea of live broadcasting a playlist, I changed the name to Sessions and the icon to a record to embody the experience of going to a club and requesting songs from the DJ.
Que Layout
Typically, queues in music apps display the entire list of upcoming songs. This isn't a bad thing for personal listening
experiences, but with a music app like Sessions that encourages collaborative listening experiences, I wanted listeners to focus more on enjoying music together with friends rather than detaching themselves from their environment to scroll through a long list of upcoming tracks. Since I knew that I would designing a smaller queue list, I experimented with different layouts that would avoid being displayed across the whole screen. I eventually decided to keep the queue layout very simple with only 3 upcoming songs displayed to make room for song name/artist.
Voting
I always wanted Sessions to promote collaborative listening in real social settings, which led me to implement a Thumbs Up and Thumbs Down feature. Although I did not create final designs for the screen that an owner of a Session would view when listeners were voting on songs, my concept was to let the owner decide if they wanted to either make voting automatically change songs when a majority of voters selected Thumbs Down or make voting only display the results to the owner in case they want to choose how to modify the Session playlist.
Final Design
Feature Mockup: Requesting a Song
User selects the Session
that is being broadcasted.
User does not like the current
song and votes to skip the song.
User selects the Session's queue
to view upcoming tracks.
User selects to
request a new song.
User selects a song
by Broken Bells.
User now sees their requested
song in the Session's queue.
What I Learned
This project was an incredible learning experience for UX Design practices. The overall experience of working with Illustrator was the most valuable piece of knowledge I gained. Although I felt that my sketches provided me with a solid foundation for the vision of my project, I had a lot to learn in bringing that vision to life with proper visual design. This resulted in using a lot of influence from Google and Spotify visual design styles in order to meet the class deadline. Now equipped with a stronger understanding of Illustrator, I feel prepared to explore more surprising and riskier design drafts before creating a final design.
The most important insight I took from this exercise was the importance of visual design in telling a story. If I were to further develop this design, I would like to use the visual assets to create an interactive prototype that could be used to make a brief video showcasing the scenario and benefits from using the features in the Sessions app.