Pandora Source Cards

 

Pandora is building a new on-demand music service. As Pandora evolves from a stations only product into the complex world of on-demand, our team worked to design a simple way to navigate and manage the huge music library.

 
 

My Role

I led the end to end design for both iOS and Android platforms though research, user testing, wireframing, visual design, and prototyping. I worked closely with engineers to ensure design quality standards. I collaborated with other designers to integrate this feature throughout the product.

 

The Goal

The goal for this project was to create a tool for music management. The challenge was to simplify a traditionally complex view that allows the user to take a number of actions on a source of music. Most of our competitor's source card was hard to navigate with too many options.

 
 

Process

After I was assigned this project, I worked closely with PMs and Engineers to brainstorm ideas. I created user stories with the PM to make sure we cover all the functionality and solve our user's needs. I worked closely with engineers to help them with developing realistic development estimates. Involving cross functional teams early on in the process is crucial for the success of a project. After the initial ideation period, I started my design process. The first thing I did was competitive and user research.

 
 
 

Competitive Research | Spotify & Apple Music

 
 

Spotify

Pros
- Clear actions

Cons
- Upon trigger, only part of the source card is shown. Users may not know to scroll to find more actions.
- The list format paired with many words and actions is visually hard to scan. 

 

Apple Music

Pros
- Clear sectioning of source card

Cons
- The scrolling within the middle section is awkward. 
- No quick way to scan whether the piece of music is added to my library

 
 
 

User Testing with Wireframes

 
 

Findings

I created low fidelity wireframes and ran a few usability tests on the new feature to see which version was easier to understand. It is ideal to test your app on lower fidelity screens because it forces the user to focus on the functionality rather than the aesthetics.

I wanted to test the more traditional list view against a keypad view. I had a presumption that the keypad view was easier to scan, and provided a way to develop muscle memory after repeated use for taking quick actions. The test was useful in validating which approach is more intuitive. 

Most users found the keypad option easier to understand and navigate. They like the large icons, and found that its easier to scan though the actions. They also liked that the large "My Music" icon was a easy way to indicate whether the piece of music has been collected or not.

 
 
 

Moving from Wireframes to Designs

 
 

I took the learnings from my user study test and began to polish off my designs. I went ahead with the keypad version because the long list of actions was hard to navigate and read though. It created extra cognitive load for the user for an already complex view.

I broke up the source card into three different sections:
1) The header which includes metadata on the piece of music you are taking action on.
2) The body which has all the actions you can take on the source
3) The footer which lumps all the routing actions together

I found that this structured approach aided the user in breaking down a complex music management tool into something digestible.

For the background color, I used the dominate color of the album art, plus a subtle blur. Throughout the product, we've developed a system that uses the dominate color to complement the album art. This system is designed to celebrate the album art, creating an immersive experience.

 

 
 
 

Interactive Prototyping

 
 

Communicating the solution

I used Pixate to create an interactive prototype. I wanted to communicate how this feature functions as a music management tool. I was also able to connect this to other features I designed such as the notification toasts and adding music to playlists.

The prototype above demonstrates the following actions:
1) Opening the source card
2) Adding a piece of music to my collection
3) Removing music from my collection
4) Toast notifications to confirm actions
5) Adding music to a playlist
6) Routing to the playlist from the toast notification

Prototyping is an important step in my design process because it helps with communicating design solutions across the org. I also found that delivering the prototype, along with static mocks and specs was very useful in communicating the desired behavior to the engineers.

 
 
 

What's next?

My next step is to continually monitor and study how users interact with my feature. Paying attention to stats and metrics will also help me determine what is successful and what needs continual work. There are always ways to improve designs.