Support the venues that mean the most to you with Spotify Jukebox!

Overview

Project Duration: 4weeks
Project Type: Personal Portfolio work (not commissioned by Spotify)
The goal: Give users the ability to support their favorite venues, restaurant, bar by making payments through the spotify app in return of having the opportunity to choose what music is playing at this specific location.
Solution:
Users scan the QR code provided by the venue’s personelle to access the venue’s Jukebox profile. Users then have the ability to vote up/down the upcoming songs in the venue’s playlist so that whoever is in charge of the music can do the necessary adjustments.
Users also have the ability to request certain tracks which are then approved/denied by the venue.
Using this process, the venue management will increase their revenues, goers to these venues will have a better listening experience since the playlist playing will be subject to a constant review by both the clients and management. Finally, Spotify Jukebox will also be introducing Spotify Wallet to the platform since a wallet is needed for the entire process to work.
My Role:
- Redesign core Spotify interfaces
- Creation of the Jukebox user flow
- Creation of the Spotify Wallet interface

Persona Cards

User Journey Map — Sarah Jones

How to reach Jukebox

To find Jukebox, users will have to first go through the search tab, after that comes the QR code button that is already present on the platform.

The current QR code scanner scans the Spotify QR code of a certain song or playlist and with Jukebox, the functionality will also be used to access the profile page of the venues that adopt the new feature.

On the other hand, an announcement dialogue is needed to announce the feature and introduce users to the new functionality that is now available to them.

The following screen will fulfil this need since it will will require users to interact with the announcement, either by checking it out or by simply dismissing it.

In summary, the feature can be reach using 2 flows, the announcement dialogue and the search tab.

After scanning the QR code, users will land on the first screen of the new feature, they will be met with a sizeable CTA button prompting them to request a track right away.

Upcoming tracks

Upcoming tracks will be displayed having with each listing a set of “Vote up” and “Vote down” buttons that will give live feedback to the management thus directing the theme of music played into a theme that is enjoyed more by the clientele. This model of feedback is highly inspired by the forum style of voting on different posts that can be seen on sites like Reddit.

Current Requests

The current requests tab will show users a list of their requested tracks at this particular venue with color coding reflecting the status of each request.
Pending: All the requests that are still to be approved/denied by the management; these requests can only be deleted.
Accepted: The requests that get played by the management will be automatically sorted into the accepted category. These requests can be either deleted from the list or re-requested.
Rejected: These requests are the ones denied by the management. They can be requested again similarly to accepted requets.

Upcoming Events

In this tab, users will be able to see all the upcoming events of this venue. They can reserve a seat if they wish to attend.
This part of the UI will be tackled in more depth in another case study since a user flow will need to be set for this journey seperetly.

Now comes the main functionality of Spotify Jukebox, and that is actually requesting tracks.

The search phase of the process is standard, people will be able to search the Spotify library and request from it. They will also be shown a list of the most requested tracks in this venue to give them an idea of what usually gets approved while also giving them an idea of the type of music usually enjoyed at this particular venue in case the vibe isn't clearly displayed by the venue itself.

In the first results screen, users will see the list of returned tracks with each of them having a “request” button giving them the ability to queue up more than one request at the same time. Users will also see a preview of their current set of requested songs with the calculated total fee that needs to be paid in case all their tracks get approved.

After Proceeding with the flow, users will see a clear breakdown of their selected track for them to choose if they want to go ahead with their request or not.

To save users from confusion, a small notice message will be displayed informing them that they will only be charged for each individual approved track.

In this example, these 3 tracks will be shown as 3 different requests in the “Current Requests” tab.

Spotify Wallet

In order for Spotify Jukebox to be fully functional, a wallet system needs to be integrated in the platform.

Spotify Wallet will be a straight forward addition to the platform with a very fundamental set of functionalities.

Users will be able to add/remove their credit cards, Add funds, and view their transactions history.

Splash Screen

The first thing users will see on this interface is an overview of their wallet with a sizeable CTA button prompting them to add their credit card so that they can get started.

Add Card

After pressing the CTA, users will be shown a popup for them to be able to add their credit card information to be able to start adding funds into their wallet.

Add Funds

Similarely to the “Add Card” dialogue, the add funds will ask users to select the card they would like to deposit from in addition to the amount they would like to deposite.

Bonus Content

While designing these 2 features, I saw some good opportunities to make the current layout better both in terms of UI and UX.
Below you will find a set of screen that you are familiar with but with my own touch.