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.
In-Situ Mocks
Revised Palette and Gradients
Due to a leadership request, the variation of colours used was minimised and a new set of gradients was developed.
More Mocks
Notes from UX Research
As a part of a broader study, notes were captured on participants’ comments regarding the artwork updates.
Project Status
Roadmapped
After receiving leadership approval, this update is being developed for rollout alongside a broader Pandora update in the upcoming future.
Please feel free to reach out with any questions,
and thank you for taking the time to explore my design process.