Artist page reimagined

Expanding the user’s access to their favorite music artists.

Problem statement

The user goes to an artist’s profile to play their music, but only three tracks fit on the screen before scrolling. The artist’s music should be the focus. Also,¬†finding tickets to an artist’s upcoming shows links to Ticketmaster, which opens a new link where the user needs to login to or create a Ticketmaster account and doesn’t allow the user to go back without forfeiting the page.

Proposed solution

The solution I’m proposing is a condensed interface when initially getting to the artist page to make music the focus. In addition, I’m proposing features that the current ticket buying feature be directly built into the Spotify app rather than linking to a third-party site, which will create a more seamless user experience for the Spotify app.

Understand It

In order to ideate appropriate solutions to the problem statement, I did some research by talking to users and closely observing the current design of the artist’s page. Here are my findings:

  • A user’s main purpose for visiting an artist’s page is to access the artist’s full music library.
  • The “upcoming shows” section is buried in a sea of music.
  • To buy tickets to an upcoming show you’re linked to a third-party site where you need to create an account to purchase tickets.
  • If you purchase tickets through the Spotify app, your tickets aren’t held in Spotify, but in the third-party’s platform.

When asked which proposed improvements were most important, this is how users responded:

Think It

Based on feedback from users, I start to ideate solutions to the problem statement, beginning with wireframes to reorganize the content on the page, making more room for music to be displayed immediately.

The current layout

The proposed layout

Build It

With these wireframes in mind, I started creating a prototype for the new page.

The changes made while condensing the initial user interface include shrinking the artist’s image; moving the monthly listener count, the follow button, and the play button on top of the artist image; moving the “three dots” icon to the top of the page, opposite of the back icon; and moving the content up.

To the left, on the artist profile page, you’ll see a ticket icon the user can tap to allow them to buy tickets, which instead of linking to any third-party site, will allow them to buy in-app, creating a more seamless experience. Seat selection and checkout screens are shown below.

Ship It & Tweak It

The Ship It and Tweak It phases of the design process are still in progress for this project.