Feb. - Mar. 2019


Seattle Public Library


Cecilia Zhao

Erfan Dastournejad



Site Map


UI Design

Interaction Design

Visual Design


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. 


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

Design Constraint: SPL's Priority on Local Musician's Value 


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 themselves and that's the biggest design constraint from our client SPL.

Limited Public Utilization of the Playback Service

Our secondary research revealed that: 

1) there's a gap between the downloading rate and the streaming rate. We considered this to be a hidden opportunity for more user retention, and by making the Playback platform more interesting and accessible to users, we could bridge this gap. 


2) the Playback service's usage data is far less than the number of SPL Members, whom all have potential access to the service. The lack of public utilization impedes Playback from achieving its fundamental goal of connecting local musicians with the general public.

More users streaming music from the Playback platform also means that SPL is providing valuable service to the public and leads to higher budget from the government.

378, 222
SPL Members




2018 Playback Service Usage Data

“Public libraries like SPL live and die depends on the number of patrons that use our services.”

- SPL Librarian

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.

“ 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.”

- Music Listener

The current web app makes it more difficult for users to access

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

  • Ease the local music discovery experience

Mainstream music platforms make finding niche music and singer 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

Our interview with different stakeholders revealed that by making the Playback focusing on local musicians will not only meeting SPL's business goal but also target music listeners' need.

Local musicians need a platform to distinguish themselves                            

“ (Local) artists have no problem giving their work out there, but the problem is to distinguish themselves with the other artists… so Playback provides such a platform to them.”

- Playback Project Lead

Design Principle

  • Differentiate Playback from other platforms

  • Provide users with more incentives 

  • Help increase local musician’s recognitions

03. Insight from Music Listeners

A disconnection 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

While music listeners want to find a more comprehensive platform to find their favorite local musician's performances, SPL wants more publicity for the free local music events they are holding featuring the Playback artisits.

Insight from Playback Lead

SPL holds are a lot of free music events but very few people actually know these

“Each year, SPL holds a lot of free music events by the Playback artists, usually, only around 200 people come to these events… which is much less than what we expected…”
- Playback Project Lead

Design Principle

  • Make local music event information more accessible to users

  • Connect local music and related events together

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



Artist Event




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.


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.


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


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.


The voting process is too much work for users

Design Decisions


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


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


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


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



Event Page

User Flow



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.


Low discoverability of the interaction model


The information hierarchy is unclear


The untraditional interaction model makes the app difficult to use

Design Decisions


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


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


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

Final Design Hero Flow

Vote/Like a Song








On Boarding


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