Playback

Timeframe

Feb. - Mar. 2019

Client/Sponsor

Seattle Public Library

Team

Cecilia Zhao

Erfan Dastournejad

Role/Skills

Interview

Site Map

Wireframes 

UI Design

Interaction Design

Visual Design

Overview

Playback App was a seven-week interface design project where I worked in a group of three for our client Seattle Public Library (SPL) via UW Design School. Through initial research, we narrowed our design scope to Playback - a free Seattle local music streaming service offered by SPL. We picked Playback because of its low usage and odd platform choice that resulted in the service not meeting the mission of enriching the bond between the Seattle local music community and the general public. Our initial design responses envisioned a complex mobile app – the visual design style was right, but testing taught us that we needed to narrow the concept scope. Our final design response focused on just a few critical activities as we explored the tradeoffs between two interaction models: the Card Swipe and the Full-Screen Scroll.

Primary Contributor of Motion Design: Erfan Dastournejad

 
Introducing the Playback App

Local Music Discovery

The Playback App provides SPL Users with a playful experience to explore local music by voting for the songs they like and by deleting the songs they don't like.

Local Musicians Discovery

 

If an SPL User likes a song, they can click on the music card to check out information about the musician, album and related events in Seattle. Musicians that made it into the SPL Annual Music Collection will have stars next to their names as recognition for their works.

Local Event Discovery

 

 The Playback App provides SPL Users with an exploratory way to discover local music events especially the ones hosted by Seattle Public Library.

Increase Involvement in the Music Selection Process

 

Every time a SPL User likes a song, the song gets one vote. The number of votes is considered as an important metric in the Playback Music Selection Process. If a song liked by the user gets chosen by the SPL, the user will earn a badge from Playback as recognition for being a good listener.

Never Miss Any Personal Collections

 

The Playback App automatically saves the song to SPL Users' personal Playlist when they like the song. SPL Users can also find the events they liked as well as the musicians they are following. 

 
Background

Playback is an online streaming music platform of Seattle Public Library (SPL) that allows users to stream and download Seattle Music recordings by local bands and musicians for free. Each year, Playback select 100 albums consisted of diverse musical styles from public submissions to create a soundtrack for Seattle and to enrich the SPL local music collection. 

 Playback's goals are identified as follows: 

  • Develop rich connections with the local music community and the general public.

  • Help new audiences discover Seattle local music

  • Increase local musicians’ publicity and promote their works within the community 

​​

  • Showcase SPL's local music collections and Seattle music   

Opportunity Space

"The music industry, there's not a lot of money in albums anymore... people just don't buy music like they used to... it can be a struggle for local musicians to make money now." 

- Playback Project Lead

Limited Public Utilization of the Playback Service

Our secondary research revealed that the Playback service's usage data is far less than the number of SPL Members, whom all have potential access to the service. Through our primary research, we also found that the main problem is that very few people know the existence of Playback. The lack of public utilization impedes Playback from achieving its fundamental goal of connecting local musicians with the general public.

Playback's Focus on Local Musician

 

Seattle’s musical culture is known for its originality, passion and creativity, however, local musicians are struggling to make money. The existence of playback is to give local artists a platform to showcase.

378, 222
SPL Members

2,729 

Downloads

21,271
Streams

2018 Playback Service Usage Data

 
HOW Might We - 
improve the Playback service to make the experience of discovering local music more interesting and engaging?
Interview & Synthesis

Our team first went to Seattle Public Library Downtown Branch to observe how people discover and use different library services. We interviewed two librarians as well as the Playback Project Lead to get a deeper understanding of Playback's purpose, usage and its connection with the local musicians. After that, we interviewed four music listeners with the focus on their music and related local event discovery behaviors.

It's inconvenient for people to use Playback since it could only be accessed through the web application

“ I think Playback is great, through which I can get to know more local music. But personally, I use Spotify more just because it is more convenient.”

- SPL Librarian

01. Insight from SPL Librarians

Playback exists only on the web, missing out on the opportunities to increase service usage and accessibility provided by smartphones.

Design Principle

  • Pick mobile as the platform for our design

  • Make the design ease of use and accessible

02. Insight from Playback Lead

Our primary research revealed that this lack of interest is mainly caused by limited awarenesses of the local music community and the related available resources. 

Design Principle

  • Make the discovery experience fun and engaging

  • Create incentives for the general public to use Playback and learn more about local musicians

Public lack of interest in local music and related local events

"...then locally, it's just people get excited to see national acts, but they aren't as excited to see local music...”  

- Playback Project Lead

There’s a lack of connection between the local musicians and the event they are holding 

“ I have some favorite local artists, but I have trouble finding their local performance information.” 

- Music Listener

“ Most of the times, I have no idea who is the band playing in the bar, even when I really like their music, I always forgot to search for their songs online when I got home.”

- Music Listener

03. Insight from Music Listeners

Music listeners have trouble associating specific local musicians with the related events, such as a performance at a bar etc. This lack of connection prevents them from getting to know the local musicians better.

 

Design Principle

  • Connect music listening experience with events more closely 

  • Make the information on local music events more accessible to users

04. Insight from Playback Lead

Local musicians need a platform to distinguish themselves and getting recognition from the public

“ (Local) artists have no problem giving their work out there, but the problem is to distinguish themselves with the other artists.” 

- Playback Project Lead

Our interview with different stakeholders revealed the same story from two sides. This also informed us of the importance of designing Playback as a bridge that connects the needs of these two stakeholders.

Insight from Music Listeners

Streaming services like Spotify make finding niche music and singers more difficult

“ Spotify is like a hot pot, it has everything, I need to establish my own music before using its suggestions, it makes finding new singers difficult. ” 

- Music Listener

Design Principle

  • Use our design help increase local musicians' recognition to the largest extent


  • Distinguish our design from the existing streaming music service platform

 
Comparative Analysis

We conducted comparative analysis of about 20 music and event products to learn more about the current music market. We selected 7 competitors after interviews and 

identified some design opportunities.

 

We considered Spotify and SoundCloud to be the strongest direct competitors, while Facebook and Meetup are the partial competitors for their local music event discovery feature. The Stranger, a free Seattle local event newspaper, is chosen as the indirect competitor. We also drew a lot of inspirations from music competition platforms like Louderme.

We made the opportunity matrix based on the comparative analysis and identified that there’s a gap in the current market for a product that has selected music collection as well as supporting both music streaming and event discovery.

Value Propositions for Stakeholders 

We identified 3 stakeholders of the Playback Service and here are the potential values our app could bring to each stakeholder.

Seattle Public Library 

  • Strengthen the bond between local musicians​​​

  • Enrich the SPL’s local music collection

Seattle Local Musicians

  • Promote music works and local events

  • Get recognition from the local community 

Seattle Public Library Users

  • Explore and enjoy local music and events

  • Connect with the local music community 

 
Ideation & Initial Design

After the synthesizing insights from primary and secondary research, we focused our design on crafting the discovery experience of local music and events. We created the site map to demonstrate the initial idea.

Key Design Concept: Playback Open Submission Process

 

From our research, we learned that the current Playback album selection jury for the yearly submission is a closed group consisted of community music experts from around Seattle and some jurists who are part of the SPL system. 

Therefore, in our design, we decided to involve public participation in the SPL local music selection process to increase user engagement and give them more incentives to use the Playback App.

Initial Design

 

We created the Hi-Fi prototype to visualize our initial concepts, gather design feedback and conduct usability testing. We explored the potential UI design direction focusing on the following key features (click here to see the interaction flow):

  • Homepage

  • Discover

  • Event/ Voting process

  • My Playlist

Card Swipe Interaction Model

 

Pros: I chose the card swipe interaction model for its high discoverability. This model gives users a clear clue to swipe for the next song. The swiping interaction also adds the mystery element into local music discovery experience for users who are not familiar with local music.

 

Cons: Card design also limited the information that can display on the first page. It requires users to click into the card to learn more information about the musician. Our user testing also revealed that the card didn't give users enough visual cue that it's clickable.

The initial design focussed heavily on exploring how to implement the features from the site map. Starting from fulfilling the basic functions of Playback being a music app to explore local events to encourage public participation in the Playback open submission voting process.

Home/ Discover

Album

Artist

Artist Event

Event

Voting

Voting

Voting Albums in Progress

Design Problem

 

Overall our feedback from critique and user testing was positive; our participants liked the visual design and they thought the discovery experience was fun. They liked the idea of participating in the voting process and were interested to learn more.

01.

Too much information and sub-features on Home/Discover

Users got confused after navigating back and forth between different sub-feature pages and home page, such as 'Taste Break' and 'Similar Song'. 

Users preferred unlimited songs in discovery instead of limiting to 20 songs of the day. Unlimited songs give them more incentives to use the app.

02.

The discovery experience of 20 recommend songs per day is too limited

03.

The entire app strike to users as complicated that it takes away the discoverability 

First-time users felt like the app is trying to achieve too many things at the same time that they didn't know where to start. They were overwhelmed by the available features the app has.

The initial voting idea requires users to finish listening to the entire album before they can vote. However, our research showed that in order to maximum users' engagement, the voting experience should be made easier.

04.

The voting process is too much work for users

 
 
Design Decisions

01.

Minimize the information on Home/Discovery page to make the music discovery and listening experience more holistic.

02.

Take out Library feature and give users unlimited access to discover all the songs in the app.

03.

Narrow our design scope to Discover, Event and User Profile to make each user flow more focus and straightforward.

04.

Simplify the voting process by integrating it with the 'like a song' option. The number of likes a song received would count as an important metric in the selection process.

Design Iterations

We did the first round of iteration based on the design decision. This iteration focused on exploring how a different interaction model could connect the Discover and Event feature more closely together.

 

 

Full-Screen Scroll Interaction Model

 

Pros: We chose full screen to create cinematic and immersive music discovery experience. By limiting the information that's showing on each page, it helps users focusing on the task most fundamental task of the app: listening to music. Scroll down to see more information saves users the trouble of navigating back and forth between layers of pages.

 

Cons: Low discoverability because there's no visual cue to inform users they can swipe between left and right. Users also have no idea what content will come next when strolling down the page. This interaction model also deviates from users' traditional mental model of a music app, which makes the learning curve longer.

 

 

Discover Page

User Flow

Microinteractions

Microinteractions

Event Page

User Flow

Iterations

 

We focused on exploring immersive music listening experience, thus the Discover page was purely focused on showing the song. We used the scroll down interaction to reveal more information and created the magazine-style visual design to make the design more attractive.

 

We explored more than 50 different layout variations for connecting local musician events with their works more straightforwardly and overcome the low discoverability of this interaction model. The following are selected iterations for Home/Discover, Album, Artist Event and Event.

 

Home/ Discover  V.1

Album V.1

Artist Event V.1

Event V.1

Home/ Discover V.2

Album V.2

Artist Event V.2

Event V.2

Design Problem

 

Overall, users think the full-screen scroll interaction design provided them with a more holistic and immersive music listening experience. Yet, we also identified several problems that these iterations have difficulties overcome.

01.

Low discoverability of the interaction model

02.

The information hierarchy is unclear

03.

The untraditional interaction model makes the app difficult to use

 
 
Design Decisions

01.

Combine Card Design and Full-Screen Design together to achieve both discovery experience and immersive experience. 

02.

Prioritize information and limit the usage of scroll-down for more information.

03.

Use navigation bar and other traditional interactions that fit users' mental models.

Tabloidl.png
Final Design Hero Flow

Vote/Like a Song

Music 

Discovery

Event 

Discovery

Saved

Like

Download 

On Boarding

 
Reflections 

What I Would Do if I Have More Time

 

From our research and ideation, we identified local musicians as one of our stakeholders. However, currently, we only design Playback for the general public. Given more time, I would like to add the musicians' side in the Playback App. By enabling local musicians to upload works to enter the Playback Open Submission and posting their music events on the app, Playback can further strengthen the connection between the local music community and the general public and truly provides local musicians a platform to distinguish themselves.

 

What I learned

 

The biggest challenge we encountered was balancing the functionality with novel interactions and crafting pure music discovering and listening experience. We tried to achieve too much in the initial design, the homepage was way too complicated. Then, we tried to introduce a new interaction model to make the experience more pure and fun. However, it steeped the learning curve for users and undermined the functionality of the app. My takeaway is that novel interactions should build on the basis of functionality and always focus on designing the user's key paths first before branching out to subpaths.

© 2020 by Beijia Wang. All Rights Reserved