Sympathico

OVERVIEW

Sympathico is a music streaming application focused on approachable music discovery and a personalized playlist-making experience. Finding that most people organize songs they already know into playlists by mood or task, we’ve designed Sympathico to have customizable, pre-made playlists categorized by the most common moods or tasks.

As one of the primary designers on this project, I conducted user interviews, analyzed competitive music applications, led the branding effort, and used Sketch3 to create most of the screens used in our prototype.

 

SEE OUR PROTOTYPE ON INVISION →
https://invis.io/U26I23LDP/


USER INTERVIEW RECORDED BY LOOKBACK.IO

WE ASKED OUR USERS TO WALK US THROUGH PLAYLIST CREATION AND MANAGEMENT IN ORDER TO IDENTIFY FREQUENT USE CASES FOR MUSIC APPLICATIONS.

USER RESEARCH

From our 9 interviews with fellow UC San Diego undergraduate students, we extracted 36 specific use cases in which a user would create or utilize a playlist. The following were the most frequently occurring of those cases:

  • Creating a playlist for driving

  • Creating a playlist for exercise

  • Creating a playlist for a party, and

  • Creating a playlist for studying

When it came down to discovery, none of our interviewees used genre to search music, but preferred using quirky pre-made playlists or recommendations from friends to find specific tracks. Our interviewees would be guided to an artist or album only after finding a track they like through one of these methods.

Users also accessed playlists to add or delete songs. Most said that they normally would not delete entire playlists, but continue managing them while their music preferences changed over time.

We decided to focus our application on playlists organized by mood, playlists organized by task, and playlist management.

 

SCREENSHOTS FROM OUR SPREADSHEET ANALYZING COMPETING MUSIC APPS AND THEIR ASSOCIATED USER TASKS

COMPETITIVE ANALYSIS

Using an excel spreadsheet to lay out information, we performed competitive and task analysis on some popular music streaming platforms: Spotify, Soundcloud, Apple Music, and TIDAL.

We examined the information architecture of each application to inspire our own. We found that Spotify grouped genres and moods together, but also had random activities like “Sleep” and “Study” in the selection. Our resolve to create an application that groups playlists based on mood and task would be more consistent.

We performed task analyses on 10 of the most frequent use cases from our interviews on each of these platforms and recorded page distance (number of steps to achieve the task), took screenshots, and noted any inconsistencies along the way. 

One major inconsistency in Spotify was its lack of signifiers indicating how to remove a track from a playlist and its unnecessarily large number of steps to actually remove the song. When clicking on the options icon next to the song meant for removal, a menu appears, but a “delete” option is not present. If the user drags the track left or right, the actions “queue” and “save” appear instead of an option to remove the song. The only way of deleting a track from a playlist is by clicking on the options icon at the top right corner of the screen, selecting “edit,” tapping the delete icon next to the track, and tapping again on “delete.”

We also noticed that pre-made playlists on Spotify are not customizable, forcing users to pull songs off of the playlist into their own playlist and managing it from there. Given that most of our interviewees said that they hardly create playlists from scratch, we decided that having customizable playlists would be an important aspect of our application.


RAPID PAPER PROTOTYPING 

WE PUT ALL OUR IDEAS ON PAPER, USING POST-ITS AND DRAWING BASIC WIREFRAMES OF OUR APPLICATION'S KEY PAGES. WE FINALIZED ALL OF OUR DESIGN DECISIONS DURING THIS STEP BECAUSE OF OUR PROJECT'S TIME CONSTRAINT

RAPID PROTOTYPING

We wanted our first page to lead to our pre-made playlists organized by mood and by task.

Before coming to this decision, we had four categories on our homepage — “Mood,” “Task,” “Recent,” and “Favorites.” We then found that the categories “Recent” and “Favorite” were fundamentally different from how we wanted our “Mood” and “Task” pages to function. The “Mood” and “Task” pages would lead users to discover our application’s pre-made playlists whereas the “Recent” and “Favorite” sections would lead to music that the user personally selects to play or to add to their favorites. We decided to remove “Recent” and “Favorites” from our first page and to dedicate an entire section to the user — the playlists, tracks, artists, and albums that they want to save and manage in their own “Library.”

We selected “Discover”, “Search”, “Library”, and “Play” as the four main elements in our global navigation bar. Since our first page leads to pre-made playlists organized by mood and task, we decided to call it our “Discover” page. A search was an important function to include given the large number of artists, albums, playlists, and tracks available for listening. It was also important for the user to access easily the currently playing track using a navigation element we titled “Play.”

For our navigation’s display, we chose to use a fixed footer navigation so that it is more accessible in comparison to a hamburger menu, which is generally reserved for navigation with many elements. We defined only the four main functions outlined above. This way, we reduce distances and eliminate the extra step of opening a menu to access the main functions.

 

BRANDING

Before creating our digital wireframes on Sketch, we created a collaborative mood board on InVision to help establish our brand identity. On this mood board, I added several album covers for inspiration. We wanted our application to be personable and friendly. We decided on a warm color scheme to encourage enthusiasm and on purple as our accent color to inspire creativity. We chose white as our primary base color instead of black so that our application felt more inviting.

We felt that this color scheme would be most widely appealing to our users, fellow UCSD students.

WIREFRAMING

Our “Discover” page went through the most iterations as we struggled to design a suitable layout for links to playlists by mood and playlists by task. We parallel prototyped some ideas — stacked buttons, different shapes to enclose buttons, and finally a bilateral design. We found that stacked buttons made the page look more like a one-time landing page, so we selected a vertical split screen layout.

discoverdiscover

A complaint about the way Spotify saves typos into its search history led us to take example from TIDAL’s search, which keeps the full title or name of the item previously searched in the search history. We only list up to three items per category so as not to overwhelm the user with search results. The arrow by category name indicates that there are more results while also saving screen space.

Our layout for the "Library" page was heavily influenced by the way TIDAL organizes a user’s music library, using labels for listed items along the top of the page. This design conserves a lot of screen space in an intuitive and orderly way. When a user “favorites” a song, it goes into their “Tracks” section on the user's library which operates as a playlist for saved songs.

Full, pre-made playlists can also be added to the library and customized to fit the user’s preferences. We made sure to make the flow of adding and editing playlists easy and intuitive for the user with proper feedback.

playlistplaylist

CONCLUSION

We had one week to complete this project and compiled a minimum viable product of the required 27 screens on InVision.

Sympathico was my first digital design project done as my final project in COGS 187A: Cognitive Aspects of Digital Design. I thoroughly enjoyed working on this project as it allowed me to use concepts on information architecture and usability from my course in practice. During the week of work on this project, I learned how to use Sketch3 as I created the wireframes. Overall, I think Sympathico was a great first experience with UI/UX design.