In House — SiriusXM

Pandora Station Tile Artwork

Case Study | 2022 — 2023

The Problem with Pandora Stations

While most station types on our platform have long-standing guidelines for artwork, song and artist station types default to the image provided by the creator, with no additional design treatment - despite artist stations accounting for over 70% of station listening time.

In multiple moderated user testing sessions, participants expressed confusion around the lack of dedicated artwork denoting these stations, and those who were not already familiar with the platform often failed to correctly identify an artist or song station.

Why Product Design?

At Pandora, station artwork has historically been created and managed by the Brand & Marketing team. Our team approached theirs after identifying the confusion in users, and it was agreed that a number of factors meant that this project was right for the product design team to drive.

There are a theoretical infinite number of artist & song stations — therefore the design needs to be deeply integrated with the product backend and accommodate any image that already exists in our library.

We were concurrently working on a new Station Builder feature for Pandora, where users can select multiple artists to generate custom stations based on their choices. This would require an additional layer of generative design, where content from multiple artists comes together in artwork for every station created.

In addition, there is currently a concentric circle overlay on all Pandora stations, which has been marked for removal based on engineering scope. The technical constraints involved meant that the most efficient design process would be to work alongside engineers to implement a new artwork system, while removing old + outdated features.

Cross-Functional Stakeholders

This project involved collaboration with numerous teams across the company

Design Process

Competitive Analysis

Shape Study

Layout exploration — placing multiple circles within a square tile ensuring minimal overlap to maximise visual legibility

Colour Study

Pandora currently uses dominant colour picking in various situations, particularly within the Now Playing experience for users subscribed to our Premium tier.

Initial work explored generating gradient backgrounds automatically built based on an input image’s dominant colour.

Common colour algorithms would be used to determine complimentary values for appealing gradients.

Various gradient types were tested, with consensus landing on Angular Gradients.

Further exploration uncovered inconsistencies in our algorithm’s ability to accurately identify skin tones within an image - especially when post-production had been applied.

Cross-team feedback was solicited to ensure designs maintained care and sensitivity towards depiction of skin tones within artwork.

I noticed that regardless of skin tone, our algorithm trended towards picking values almost exclusively within the orange hue range — with low saturation and brightness levels.

A decision was made to avoid all skin tones within gradient generation, and to push saturation & brightness values above 75% when the dominant colour lived within the orange hue range, but with low brightness or saturation. This allows all skin tones to be represented with fairness and equity in any artwork.

In an effort to simplify the gradient generation process, a set of 12 predefined variants were built, and a ruleset developed to assign each to a station based on the primary image’s dominant colour.

Each gradient has 3 colour stops, with a defined radial point to ensure consistency from design to production.

Atomic Elements

A simplistic set of atomic elements were defined to allow for adaptation based on the number of artists or songs in a given station

Layout Explorations

Colour Variations

After additional rounds of feedback and refinement, the following designs were agreed upon for production.

Circles represent artists, and squares represent songs.