Spotify Classical: Events
Updating the streaming concert experience across multiple platforms
[Updated late 2022]
After researching and designing Spotify Classical for mobile in 2020, I recently returned to the classical streaming service to explore how listeners might purchase tickets and watch events — concerts and talks — across multiple platforms.
Focusing on the updated Events feature of Spotify Classical, I spent several weeks as the sole product designer investigating the service design involved, including the user journeys and user flows, before creating prototypes for 💻 desktop and 🖥️ tv versions.
Spotify Classical Events prototype (TV)
From Global Concert Hall and Stories to Events
The strategy behind Spotify Classical was for Spotify to acquire and rebrand the classical music streaming service IDAGIO to drive premium subscriptions. Although the app was designed for mobile-first, user research showed a number of reasons to consider developing both desktop and home theater apps:
🏠 most classical listeners preferred to listen to music at home on desktop
📺 IDAGIO currently had no dedicated TV app for listeners to watch concerts on demand at home
🍎 🍊 Adding video could help Spotify differentiate itself from other streaming services
The Events feature in Spotify Classical started as the “Global Concert Hall” on IDAGIO — a covid-inspired innovation to provide streaming classical concerts when musicians could not perform live. Also in 2020, IDAGIO initiated a feature called “Stories,” a series of video conservations between classical artists.
Both features were unique to IDAGIO at the time.
Since 2020, IDAGIO subsequently streamlined “Concerts” and “Stories” into a single feature, “Events.” However, it still had no dedicated TV app at the time of this project.
Spotify Classical Concerts (original mobile prototype)
Challenge: translate concerts from mobile to home theater
This project's challenge was to adapt the Concerts feature from the original Spotify Classical mobile design to desktop and home theater.
⚠️ Specifically, how could I help users navigate purchasing tickets on one device to then easily watch concerts and talks on another?
Constraints
Lack of stakeholder/decision-maker input
Lack of technical input or collaboration from dev
No budget for user testing
Wireframing the desktop to TV user flow in Figjam
Event journey — from tickets to home theater
The user personas generated from the research indicated that classical listeners preferred to listen to music at home — often on a laptop or home theatre — than on their mobile phones.
Building upon the initial, mobile-first design, I sought to explore the desktop and TV app experiences, especially in terms of service design — the Spotify Classical listener journey across multiple platforms.
User flow for steps involved in selecting an Event
After creating a user flow for listeners purchasing a streaming event, I focused on user journeys involving mobile 📱, desktop 💻 and TV 🖥️ and quickly wireframed these five scenarios in FigJam:
Mobile to desktop — purchasing on mobile, watching on desktop
Mobile to TV — purchasing on mobile, watching on home theater
Desktop — purchasing and watching on desktop
Desktop to TV — purchasing on desktop, watching on home theater
TV — purchasing and watching on TV
Wireframing in FigJam the user flow of a listener buying event tickets on Spotify Classical’s mobile app and then later watching on the TV app at home.
Final events prototype (desktop)
Designing for desktop and home theater
Spotify Classical’s predecessor, IDAGIO, didn’t have a dedicated TV app at the time of this project. Spotify itself doesn’t offer streaming concerts and talks, so I turned to video streaming services for design inspiration in creating the Spotify Classical TV app.
Mobile vs Desktop vs TV
Translating the Spotify Classical experience from platform to platform involved changes not just in real estate but readability and interactivity:
📱 Mobile — small size, vertical, touchscreen, no states, gestures
💻 Desktop — medium size, horizontal, touch-pad/mouse, hover states, clicks
🖥️ TV — huge size, horizontal, keypad/voice, no states
Adapting two desktop designs
Both IDAGIO and Spotify have excellent desktop apps, so the challenge in creating one for a melded app was similar to that in the original mobile-first project — how Spotify should Spotify Classical be?
Just as Spotify for mobile is not designed for classical music — it’s set up for much simpler metadata (artist, song, album) and is organized primarily around playlists — so, too, its desktop app was less suitable for adapting to classical than IDAGIO’s version.
So I ended up keeping the bulk of IDAGIO’s design architecture in Spotify Classical — the main difference was using Spotify’s typography, and adapting the navigation bar with accompanying icons to match the mobile experience.
Difficulties in designing for TV apps
As this was my first time designing for TV, I spent a lot of time studying the navigation and user flow of streaming apps like Netflix, HBO Max, Amazon Prime, Disney+, Hulu, Criterion Channel, and other services, as well as Spotify’s own TV app, for inspiration and best practices.
Key Insights — simpler, linear
Among the key insights I gleaned from studying other apps were:
Despite TV’s large screen footprint, the best apps were simpler than mobile
Used simple shapes, provided lots of white space, had clear hierarchy
Didn’t make the user go back and forth
Avoided long carousels
Key challenges — the remote
Several key challenges encountered during my study and analysis of these apps that helped me with design:
the difficulty of navigating using a remote on a TV (up, down, left, right)
the nightmare of using a remote to “type” in anything, one letter at a time on an alphabet screen — the need for shortcuts
the importance of linear user interface flows – similar to designing for accessibility and navigating by keyboard
limiting text and the importance of readability
Incorporating these insights and keeping the challenges at the forefront, I expanded in Figma on the rough wireframes I had originally created in FigJam to produce a prototype to test with users.
Guerrilla testing the TV app
User testing the mobile and desktop apps had been fairly straight forward, especially now with so many remote tools available – I used for mobile testing.
But testing out the TV prototype proved tricky. I ended up doing some “down the hall” guerrilla testing at home on my own TV with relatives, friends and neighbors.
Below is a short film of the prototype after I hooked up my laptop to the TV and ran Figma.
Positive results, more work needed
Overall, the TV testers had positive feedback about the overall design of the Spotify Classical prototype for Events. Testing showed that more work is needed in the cart section — ticketing and payments especially.
“It looked and worked like a real Spotify app. Pretty cool!”
Ideally, I would also be able to better test the service design aspect of the project — how easy it would be to purchase tickets on a mobile, and then later watch that very concert on another device.
Classical music listeners whom I tested the desktop app with likewise said they were highly satisfied with the experience.
Assuming the technical side would sync up — that a purchased concert on mobile would appear in the purchases on TV — the separate testing shows that the experience would be positive for most users.
Learnings
Designing for multiple platforms really forces designers to rely on empathizing with their users and thinking like their users
Testing TV apps at home can be like a weird dinner party, but a lot of fun!
Other case studies from the Spotify Classical project:
📱 Spotify Classical: Product Design
🕶️ Spotify Classical: Accessibility
🖋️ Spotify Classical: UX Research