REVOLUTIONIZING THE IN-CAR AUDIO EXPERIENCE

Launching a new Spotify in Tesla

REVOLUTIONIZING THE IN-CAR AUDIO EXPERIENCE

Launching a new Spotify in Tesla

Benchmarking: From Idea to Launch in 30 days

Model3-87

OVERVIEW

Spotify's Car Team, the Research & Development hub behind Spotify, redesigned a new beyond-the-driver experience with Tesla in 30 days as part of a wider audio strategy (covering everything from charging moments to shared listening moments).

This case study showcases my approach to team process and the outcomes of improving the in-car audio experience. Special thanks to the Tesla and Spotify teams for their great teamwork.

Opportunity
 
Goal:
Benchmark a rich in-car Spotify experience beyond the driver.
Launch a new technical platform to improve it through data analysis.
 
Approach:
Create a proof of concept and relaunch a new large-screen Spotify experience tailored for the car, influenced by features for autopilot, charging, and shared listening moments. 
 
Timeline:
30 days
The Team
Tesla's product development team, at California's Tesla Design Center.
 
Spotify's in-car product development teams at Sweden's R&D headquarters.
 
My role: I co-led with Tesla leads to support a team of designers, researchers, and engineers in redesigning and launching a new Spotify app integration for Tesla vehicles globally.
Key Results
• Defined automotive UX benchmarks, best practices, and guidelines for large-screen UX.
• Highlighted UX areas for improvement and future roadmap alignment with Tesla.
• Design concepts for shared listening and charging moments.
• Built a culture of collaboration and trust.**
• Reinvent a template for how we work with partners.**
• Proved new technology to unlock more Spotify features.**
• Built a platform for gathering and analyzing data to gain insights.**
 
 
KPI
Activation, User Engagement, Consumption (per day/week), Monthly Active Users (MAU), App stability and performance, Adoption Rate vs. competitors in Tesla and against other integrations, and satisfaction of Partner Collaboration.

01~
Design Process

TEAMING UP WITH RESEARCH & DATA

After a several-year insights gap (2017-2020), our team needed to make sense of how consumers use Spotify in their everyday lives and baseline the experience.

Our designers collaborated closely with our Research and Data teams to conduct pre-launch and post-launch research. This effort helped us identify areas where consumers experienced challenges and helped us to compare the current experience with our popular mobile app and our beloved competitors.

Research methods: Motivated by lack of access to instrumentation—analyzing dashboards, diary studies, in-person interviews, remote sessions, and surveys.

Research-01

DECIDING WHAT TO BUILD

Synthesizing data and research findings, I learned that the experience fell far short of expectations. I prioritized themes based on impact and technical feasibility, focussing on key areas that would cover the gap and proactively set us up nicely for future versions of improvements. Focus areas:

Designers collaborated with Tesla and exchanged insights, which helped them uncover in-car listening behaviors, preferences, pain points, and opportunities.

Card-IA
Card-login
Card-podcast
Card-audiobook
Card-entity
Card-filters
Card-Lightmode
Card-visual

CREATING A CULTURE OF COLLABORATIVE IDEATION

To build a culture of close collaboration with partners, I orchestrated several design-led sessions with Tesla's product and engineering teams to generate ideas for exploring the focus areas and laying the foundation for how we want to work together. 

Our design teams explored numerous creative concepts during ideation. While many ideas sparked excitement, several were ultimately sidelined due to brand misalignment, driver distraction concerns, and poor usability feedback. Below are some explorations that didn't make the first launch update.

Tesla-Exploration-01
Tesla-Exploration-02

MY THOUGHTS—

As a design lead working with many stakeholders across both brands, having healthy conversations means actively listening and pushing back when needed...to help achieve a rich audio experience that balances brand equity for Spotify and Tesla.

(While providing a safe in-car audio experience for users.)

REINVENTING OUR PROTOTYPING CULTURE

I wanted us to reinvent how we engage with strategic partners, and Tesla was an opportunity to collaborate more closely. Our designers established an iterative design process with development teams using various prototyping tools on test bench units, car simulators, and road vehicles.

Working as one team helped deepen our connections, nurture empathy, test accessibility, hypotheses, and more.

Iteration-02

 

ALIGNING WITH 'ONE' SPOTIFY

Consistency is key to providing consumers with a cohesive experience. While Spotify's 'One Experience' principles ensure that consumers encounter familiar elements and interactions, sometimes deviating away can be the right choice.

Our designers decide when to repeat brand language and design system elements and when to remove them. Hygiene means everything from getting Spotify's basics right to providing features that wow the experience.

Card-01
Card-01-2
Card-01-1
Recycle-Card
Repeat-Card
Remove-Card

MY THOUGHTS—

Our design teams underwent multiple rounds of iterations and feedback sessions, leading to executive-level leadership. This allowed us to align the UX to make consumers feel at home in their Tesla.

While designing, my role was to bring stakeholders along the journey, orchestrate the collaboration, and guide the design process (in parallel to other workstreams).

Model3-87

02~
Design Solutions

"I just want my Spotify.""I just want my Spotify.""I just want my Spotify."

Consumers want the authentic Spotify experience, especially while driving. While our mobile app is jam-packed with features, finding a rich feature set yet keeping the experience distilled while driving for this first release is important.

OPPORTUNITY

Balancing Visual Brand Identities

In a joint effort, the Tesla design team and Spotify Brand team developed a visual language that seamlessly integrated with Tesla's UI guidelines while staying true to Spotify's unique brand identity, guided by Encore, Spotify's design system. Learn more.

Old-UI-Language-Spotify New-UI-Language-Spotify

( PLAYLISTS - SLIDE TO COMPARE THE OLD AND NEW VISUAL DESIGN SYSTEMS )

MY THOUGHTS

Designs underwent numerous revisions and reviews, gathering consumer feedback, internal teams, and executive leadership from both companies. It was important to us to lean on key stakeholders and step in and guide when needed to ensure a balance of brand equity between Spotify and Tesla.
 

OPPORTUNITY

New Light Mode/Day Mode Polishes

Tesla and Spotify accessibility best practices ensured that our new designs balance Tesla's design system while reflecting Spotify's identity.

Home-—-Light

( IMPROVEMENTS WERE IMPLEMENTED TO REDUCE GLARE AND DRIVER DISTRACTION CAUSED BY DARKER INTERFACES )

OPPORTUNITY

New Information Architecture

While testing, we decided the main navigation should realign closely with Spotify's signature navigation—Home, Browse, and Your Library. Although this change is a point of debate, it must happen if we want a scaleable IA to support future changes.

Personalized content and a Shortcuts section were designed into the new templates and adaptable elements to accommodate future updates and feeds for other content types.

Screenshot-2024-03-16-at-15.35.17 Home-—-Music-Speed-Control

UX TIP: HICKS LAW

—— The time it takes to make a decision increases with the number and complexity of choices.

OPPORTUNITY

New Beyond The Driver Moments

We're working to create friendly experiences that entertain passengers during downtime while waiting for their cars to charge. Content such as music, podcasts, audiobooks, and videos are being explored and tested.

ModelX_71-1

( E.G.SONG LYRICS IN REAR SCREENS TO ENTERTAIN PASSENGERS DURING CHARGING BREAKS )

OPPORTUNITY

New Shared Moments With Spotify Jam

Introducing Spotify Jam, a feature that lets friends listen to and add songs to the queue together, whether in person or virtually. Learn more.

Model3-86-1

 ( E.G. QR CODE FOR FRIENDS TO JOIN A SHARED LISTENING SESSION )

OPPORTUNITY

Refreshed Your Library

~40% of listening happens from Your Library. With this in mind, we moved to a more scalable solution over the original carousel design proposed by Tesla. Switching to a dedicated surface with a sub-layer to host Albums, Artists, audiobooks, etc didn’t significantly impact the metrics, but it better aligned with how users think and navigate.

Screenshot-2024-03-16-at-15.35.17 Your-Library-—-Playlists

( AUDIOBOOKS ARE NOW SEPARATE FROM PODCASTS, RESOLVING A PREVIOUS TECHNICAL ISSUE )
 

OPPORTUNITY

New Browse & Recently Played Tab

The Browse tab has been redesigned with new genre cards, mirroring those on all other Spotify platforms. The Recently Played section (only found in Spotify car experiences) has also been removed from the main navigation tab.

Screenshot-2024-03-19-at-11.19.00 Browse

UX TIP: JAKOBS LAW

—— Users spend most of their time on other sites. This means that users prefer your site to work like all the other sites they already know.

OPPORTUNITY

New Entity Pages

Consumers want to dive deeper or pivot while listening. To address this, we made artists and albums clickable in track rows, added features to easily build the queue (a high request from consumers), and more.

We also improved design consistency by aligning the designs of the artist, creator, and playlist pages. Our updates include a header with multiple actions for starting playback or navigating deeper into listening sessions.

Old-UI-Language-Spotify New-UI-Language-Spotify

( NEW PLAYLIST EXPERIENCE )

Entity-—-Artist

 ( NEW ARTIST EXPERIENCE )

Screenshot-2024-04-03-at-10.57.34 Entity-—-Podcast-1

( NEW PODCAST EXPERIENCE )

Entity-—-Audiobook-1

( NEW AUDIOBOOK EXPERIENCE )

Profile

( INTRODUCING A NEW ACCOUNT PROFILE EXPERIENCE, CONSUMERS CAN NOW BROWSE CURATED CONTENT FROM OTHERS )

OPPORTUNITY

Improved Podcast Experience

Previously, listening to podcasts was difficult as consumers would switch between their phones and Tesla for playback. To improve this, we added creator and episode pages, scalable header details, listening resume points, and tailored episode pages for the automotive environment as part of the Spotify app redesign. These changes helped consumers properly evaluate content.

Designs are optimized for medium to large screens based on automotive best practices. Although imperfect, we're committed to improving the podcast experience through usability tests.

OPPORTUNITY

Improved Podcast Experience

We improved the podcast creator and episode pages. Scalable header design templates, listening resume points, and detailed episode pages specifically tailored to the automotive environment are among the changes seen across the Spotify app redesign.

Designs are optimized for medium to large screens and based on automotive best practices (simplicity). Although imperfect, we're committed to improving the podcast experience through usability tests.

Entity-—-Podcast

( PODCAST UPDATES INCLUDE BOOKMARKS AND OTHER FEATURES TO HELP USERS EASILY PICK UP WHERE THEY LEFT OFF )

Entity-—-Podcast-exp

 ( PODCAST CREATOR WITH DESCRIPTIONS )

Entity-—-Podcast-episode

( ADDED EPISODE DETAILS PAGE PLUS DESCRIPTIONS AND FEATURES TO IMPROVE DISCOVERABILITY )

OPPORTUNITY

New Audiobook Experience

We expanded our content offerings by adding audiobooks to our catalog, aiming to enhance consumers' listening experience.

Entity-—-Audiobook

OPPORTUNITY

Improved Playability: Effortless Playback

We've enhanced the Tesla now-playing bar with essential features: podcast and audiobook speed controls, a fully operational queue, and seamless resume points for precise playback continuity.

Additionally, users can now easily add tracks to specific playlists directly from the now-playing bar.

Talk-Speed-Control-Dark

( PODCAST / AUDIOBOOK CONTROLS )

Music-Speed-Control-Dark

( MUSIC CONTROLS )

OPPORTUNITY

New Activation: Streamlining Tesla Login

Single-click QR code and pin options were introduced to make logging in smoother and quicker. (Goodbye to username and password hassles.) While not perfect, early data already indicates a drop in login friction. The goal is to eliminate all friction in the log-in flow. 

Side note: Vehicles outside the U.S. often have subsidized accounts with a 'Use Tesla Account' button that allows users to seamlessly log in or create a new account. This feature addresses this common challenge.

Rectangle-13

03~
Implementation

BUILDING (STRONGER) RELATIONSHIPS

The designers and engineers from Spotify and Tesla collaborated across time zones, from Sweden to California. We made various adjustments and addressed technical challenges in real time, leveraging test hardware, in-car simulators, and pre-production road vehicles—meticulously tweaking the app for quality.

As a result, we lived through constraints and freedoms from cross-team pollinating.

Collaboration-00

04~
Outcome

KEY RESULTS AND IMPACT

Overall, Tesla owners are generally happy with the new Spotify update. Feedback has been positive, and early metrics show deeper engagement and retention. More people are consuming music and exploring podcasts and audiobooks. We also seen a jump in successful login attempts and account creation with the new login flow.

We're still in the early stages of analysis. Now, with a more robust technical foundation in place, we'll be able to delve deeper into the metrics and drive improvements that cater to the needs of consumers, creators, and our business strategies alike.

 

The Impact So Far...

  • Defined automotive UX benchmarks, best practices, and guidelines for large-screen experiences.

  • Highlighted UX areas for improvement and future roadmap alignment with Tesla.

  • Design concepts for shared listening and charging moments.

  • Build a culture of collaboration and trust.**

  • Reinvent a template for how we work with partners.**

  • Proved new technology to unlock more Spotify features.**

  • Built a platform for gathering and analyzing data to gain insights.**

KPI:
Activation, User Engagement, Consumption (per day/week), Monthly Active Users (MAU), App stability and performance, Adoption Rate vs. competitors in Tesla and against other integrations, and satisfaction of Partner Collaboration.

 

Since the release, we've been monitoring feedback and metrics from several sources (I'm happy to share in person). But here are some fun ones from one of the social platforms (X/Twitter).

IMG_0712
IMG_0713
IMG_0714
IMG_0719
IMG_0710
IMG_0718
IMG_0717
IMG_0721
IMG_0720

Even, our CEO, Daniel Ek featured us in his latest Tweet immediately after the initial release, expressing his excitement.

Screenshot-2024-03-14-at-15.38.57

05~
Reflections

LESSONS LEARNED

Throughout the project, we faced several challenges: navigating strong-willed executive leadership (who actually drive Teslas), CEO-to-CEO dialogue, tight development schedules, proving new technology, different working dynamics, staffing tenure, geographical challenges, and more.

Despite all these obstacles, our lessons were invaluable and met every expectation. Here are some key lessons learned:

  • A clearer defined product requirements before committing to an aggressive timeline would be helpful.

  • Open communication and bringing stakeholders along the journey early were key to alignment and success.

  • Being vocal about collaboration between cross-functional teams (and companies) is challenging but needed.

  • With complex projects, be open to flexible design processes.

  • Maintaining brand equity while adapting to new brands requires the right people to work through the design's visual and functional aspects. (Seniority and tenure is key.)

  • Accessing data is critical to completing the picture, as research only paints a portion.

  • Regular sync-ups and iterative sessions helped ensure the final product aligned with design expectations.

  • Identifying potential technical limitations early allowed teams to explore creative solutions and adjust deliverables.

FINAL THOUGHTS

I'm celebrating a milestone, but we have a long way to go. The redesign of the Spotify app for Tesla cars exemplifies the power of collaboration between industry leaders who have one goal: to create the best in-car consumer experience.

I'm wholeheartedly proud of our team's efforts in delivering a new and fresh product with Tesla while strengthening the bond between this partnership. I know there's still much work to accomplish together, and that excites all of us.

Should you have any questions about my role or want to dive into data details, I’d be happy to tell their story.

Blessings.

 

A huge thanks to all the rockstars who made this milestone possible, and a special thanks to my friends below!

DESIGN

Adam Kasprazk, Jihoon Suh, Cindy Hu, Ray D, Shaivy Rastogi, Reema Bhagat, Marco Righi, Gustav Arntez, JC Chhim

PRODUCT

Alan Trevena, Charles Sheih, Mady Villavicencio


ENGINEERING

Yoko Yamaguchi, Tosin Yedeka, Amitoj Banwait, Walid Tazout, Geetika Aurora


DIRECTOR BUSINESS DEVELOPMENT

Daisuke Tanaka

RESEARCH

Annie Rydström,  Alice Gross

DATA SCIENCE

Adrien Grellet

☻2024. THIS SITE IS 4EVER UNDER CONSTRUCTION.

SAY WHATS UP ~ LINKEDIN

View