Danielle Villa-Agustin
UX Designer & Problem Solver
Spotify CarPlay
How might we redesign Spotify CarPlay to establish a more efficient and safer usability experience on the road.
OVERVIEW
The advent of CarPlay in the 2010’s reimagined the way we stream music. It made platforms, like Spotify, easily accessible and consequently caused their user base to skyrocket: with over 381 million active users monthly.
Yet, the Spotify CarPlay interface fails to meet the user’s existing mental model of the app. As a result, users rely on a combination of their phone and CarPlay to successfully carry out functions like search. Using two devices is not only inefficient, but unsafe, especially on the road. We hope to use the power of design to reduce distracted driving.
Yet, the Spotify CarPlay interface fails to meet the user’s existing mental model of the app. As a result, users rely on a combination of their phone and CarPlay to successfully carry out functions like search. Using two devices is not only inefficient, but unsafe, especially on the road. We hope to use the power of design to reduce distracted driving.
PARAMETERS
Timeline: 4 weeks
Context: Final Class Project
Final Product: Version of Spotify CarPlay that is consistent with other versions of Spotify and reduces distracted driving
**Disclaimer: This project took place before the "Spotify Car Thing" launch in February 2022
Context: Final Class Project
Final Product: Version of Spotify CarPlay that is consistent with other versions of Spotify and reduces distracted driving
**Disclaimer: This project took place before the "Spotify Car Thing" launch in February 2022
KEEP YOUR EYES ON THE ROAD
User Research
We interviewed 4 participants who are all regular Spotify and CarPlay users. Questions were based on common tasks that assessed their familiarity and identified pain points. Interviews were conducted in the car to simulate driving. Participants were encouraged to think aloud and were told to try to keep their eyes up, as if they were driving. We got permission to record the interview and tracked eye-movement for each task by counting how many times participants moved their eyes away from the road.
While participants were generally pleased with Spotify CarPlay, they were surprised by the internal inconsistencies. In fact, none of the participants could search or queue a song without using their phone as a crutch. Participants frequently looked away from the road during these tasks.
While participants were generally pleased with Spotify CarPlay, they were surprised by the internal inconsistencies. In fact, none of the participants could search or queue a song without using their phone as a crutch. Participants frequently looked away from the road during these tasks.
This feels illegal. How do I keep my eyes up? I usually have a passenger queue up songs since I can't on CarPlay.
DRIVING FORCE
Defining the Problem Space
We identified 3 main usability problems based on our User Research and Nielsen and Norman’s Usability Heuristics:
1. Consistency and Standards: The current product lacks internal consistency resulting in a hefty cognitive load.
.png)
When comparing Spotify CarPlay vs Mobile, we find several differences in the search function alone. Spotify CarPlay does not allow users to search through keyboard, voice command, or otherwise. Instead, they offer a "Browse" tab that forces users to click through a trail of breadcrumbs in hopes of finding their desired content. Not only does this fail emulate other versions of Spotify, but it also fails to take advantage of the Siri voice command already embedded in CarPlay.
2. Visibility of System Status: Users glanced the most when they were waiting for the screen to load. There was no message to indicate why it was loading, leaving users in the dark.
One interview took place in a parking garage where we lost connection in the middle of the interview. I noticed how the participant began to lose focus of the road and hastily troubleshoot: pressing buttons, repeatedly tapping the screen, plugging, and unplugging their phone all in an effort to get rid of the load screen. This can be especially distracting and potentially dangerous if we were actually on the road.
Adding in a progress bar and descriptive feedback could make all the difference and put the user's mind at ease. For example: "No service. One moment while we reconnect you." or even including a call to action if necessary: "USB disconnected. Please plug in your device to activate CarPlay."
One interview took place in a parking garage where we lost connection in the middle of the interview. I noticed how the participant began to lose focus of the road and hastily troubleshoot: pressing buttons, repeatedly tapping the screen, plugging, and unplugging their phone all in an effort to get rid of the load screen. This can be especially distracting and potentially dangerous if we were actually on the road.
Adding in a progress bar and descriptive feedback could make all the difference and put the user's mind at ease. For example: "No service. One moment while we reconnect you." or even including a call to action if necessary: "USB disconnected. Please plug in your device to activate CarPlay."
3. Flexibility and Efficiency of Use: Spotify CarPlay does not provide an easy way for users to queue and customize content.
.png)
Unlike the mobile version of Spotify, where users can queue content with a simple swipe, Spotify CarPlay does not allow users to queue music. While CarPlay allows users to view the Queue, this is ultimately confusing: What's the point of viewing the Queue if you do not have the option to add to the Queue?
When asking our interviewees how they work around this, one participant mentioned how they have to queue up songs before they hit the road. The others admitted to using their phone while driving or having a passenger do it for them.
When asking our interviewees how they work around this, one participant mentioned how they have to queue up songs before they hit the road. The others admitted to using their phone while driving or having a passenger do it for them.
HOW DO OTHERS GET FROM POINT A TO B?
Competitive Analysis
We expanded on our research by exploring different versions of Spotify and other Apple CarPlay applications. Through this research we deduced that queuing is not common among CarPlay apps, therefore we decided to focus on the search function. However, if we were to improve queueing we would implement a tactile swipe to queue as well as a voice command option.
BBC Sounds:
BBC Sounds offers an identical approach to Spotify CarPlay. Both apps include a "Browse" tab, but categories are organized and presented differently. Spotify presents many categories at once, causing users to scroll more and tap through breadcrumbs less. Meanwhile BBC Sounds minimizes the number of initial categories, causing users to tap through breadcrumbs more and scroll less. This establishes a tradeoff between the amount of information available on a singular screen and the amount of screen changes/taps.
BBC Sounds offers an identical approach to Spotify CarPlay. Both apps include a "Browse" tab, but categories are organized and presented differently. Spotify presents many categories at once, causing users to scroll more and tap through breadcrumbs less. Meanwhile BBC Sounds minimizes the number of initial categories, causing users to tap through breadcrumbs more and scroll less. This establishes a tradeoff between the amount of information available on a singular screen and the amount of screen changes/taps.
.png)
Google Maps:
Similar to the Spotify app, Google Maps uses the more common term "search" accompanied by a magnifying glass to signify the search function. Users can use voice command to initiate a search while the vehicle is in motion, this way users can focus their driving and conduct a search with minimal effort.
Similar to the Spotify app, Google Maps uses the more common term "search" accompanied by a magnifying glass to signify the search function. Users can use voice command to initiate a search while the vehicle is in motion, this way users can focus their driving and conduct a search with minimal effort.
.png)
Users can also search via keyboard, but only when the car is stopped. While a keyboard search is more in line with a user's expectations, the provided board does not meet industry standards and lists letters alphabetically in a horizontal line. This approach fails to utilize the screen's full real estate. Text is small and stretched forcing users to reach across the screen to type. Though, they offer dynamic search suggestions as the user types to expedite the process.
.png)
GET IN LOSER, WE'RE FIXING CARPLAY
Prototyping
Based on our user testing and competitive analysis, we decided to create prototypes that address the need for a more efficient search.
Each team member developed their own sketches to prevent bias and develop a variety of unique iterations. We presented our ideas to the group, gathered our best ideas, and built two high-fidelity prototypes around them.
Each team member developed their own sketches to prevent bias and develop a variety of unique iterations. We presented our ideas to the group, gathered our best ideas, and built two high-fidelity prototypes around them.
Prototype A
It's all in the details
• Cover art highlighted with a colored border to distinguish the type of content: artist, album, genre, song
• Heart icon on each cover art and readily available for liking/disliking
• Microphone pop-up with rotating ellipsis to indicate that the system is listening encourages the user to use voice command while driving
• Heart icon on each cover art and readily available for liking/disliking
• Microphone pop-up with rotating ellipsis to indicate that the system is listening encourages the user to use voice command while driving
HIGHLIGHT KEY
Purple: Artist
Green: Genre
Green: Genre
Blue: Playlist
Orange: Album
Orange: Album
Yellow: Song
Prototype B
Turn down the noise
• True to the original layout: less clutter, no color coding, or heart icons
• Bigger microphone button is placed on the left so the driver doesn't have to reach over
• Microphone pop-up takes up the whole screen so the driver is not distracted by the background noise
• Bigger microphone button is placed on the left so the driver doesn't have to reach over
• Microphone pop-up takes up the whole screen so the driver is not distracted by the background noise
TEST DRIVING
A/B Testing
We rounded up a new set of 4 participants who are all regular Spotify and CarPlay users and introduced them to both prototypes. Participants were guided through a number of tasks, similar to the first round of testing. Interviews were not conducted in the car so participants can relax and carefully browse through our changes.
It doesn't take adding in a bunch of new features and fancy pop-ups to fix a major problem
All 4 participants found Prototype A overwhelming and challenging to understand. Having likes readily available added unnecessary clutter and voice command pop-ups to search were dismissed. We hypothesize that this is due to the negative connotation associated with desktop pop-ups and ads.
While Prototype A presents a unique solution to finding content, the color coding system did not contribute toward a faster search. Instead, it presents a major tradeoff: norm vs novel. Perhaps the color coding system would be useful if we provided formal onboarding and users learned how to interpret it, but users refuse to stray away from what is familiar. A design tale as old as time.
Participants ultimately prefer the direct nature of Prototype B, as it was more in line with their current knowledge of Spotify CarPlay. When searching "while driving", the voice command prompt took up the whole screen. This elevated its importance and caused users to really evaluate its purpose, rather than dimiss the message like the pop-ups in Prototype A. They also appreciate how the subtext provided search examples as a form of onboarding. This addition encouraged them to use voice command and made them eager to know that the microphone icon is accessible on all pages.
While Prototype A presents a unique solution to finding content, the color coding system did not contribute toward a faster search. Instead, it presents a major tradeoff: norm vs novel. Perhaps the color coding system would be useful if we provided formal onboarding and users learned how to interpret it, but users refuse to stray away from what is familiar. A design tale as old as time.
Participants ultimately prefer the direct nature of Prototype B, as it was more in line with their current knowledge of Spotify CarPlay. When searching "while driving", the voice command prompt took up the whole screen. This elevated its importance and caused users to really evaluate its purpose, rather than dimiss the message like the pop-ups in Prototype A. They also appreciate how the subtext provided search examples as a form of onboarding. This addition encouraged them to use voice command and made them eager to know that the microphone icon is accessible on all pages.
DRIVING IT HOME
Reflection
While four weeks was not enough time to address the complexities of Spotify CarPlay, it’s safe to say that this project pushed me and my teammates to creative extremes and helped us grow a greater appreciation for the design process.
I will admit: I was not keen on the color coding system because it branched away from Spotify’s current branding, but perhaps it just deserves a fair chance. I would be willing to explore this option with proper onboarding and more extensive user testing, where users have the opportunity to get comfortable with the system. It’s challenging for users to embrace unfamiliar settings and even as a designer I am a bit skeptical, but I feel that our research is not sufficient enough to rule this option out. Sometimes the “craziest” ideas end up being the best if we are willing to rise up to the occasion and take risks.
If I could take this project a step further I would be eager to...
I will admit: I was not keen on the color coding system because it branched away from Spotify’s current branding, but perhaps it just deserves a fair chance. I would be willing to explore this option with proper onboarding and more extensive user testing, where users have the opportunity to get comfortable with the system. It’s challenging for users to embrace unfamiliar settings and even as a designer I am a bit skeptical, but I feel that our research is not sufficient enough to rule this option out. Sometimes the “craziest” ideas end up being the best if we are willing to rise up to the occasion and take risks.
If I could take this project a step further I would be eager to...
1. Test New Iterations Rooted in Feedback
At one point during the project, our interviewees mentioned how they rely on their passengers to conduct searches via phone… but why not keep things consistent and allow for passengers to search on CarPlay while the vehicle is in motion? I believe that CarPlay could take advantage of existing technologies, like the airbag sensor, to detect if there is truly a passenger available to type in searches. This feature could supplement voice command.
At one point during the project, our interviewees mentioned how they rely on their passengers to conduct searches via phone… but why not keep things consistent and allow for passengers to search on CarPlay while the vehicle is in motion? I believe that CarPlay could take advantage of existing technologies, like the airbag sensor, to detect if there is truly a passenger available to type in searches. This feature could supplement voice command.
2. Expand Testing to Novice Users
We could expand testing to novice users to compare if their opinions are consistent with our existing data and run a competitive analysis between CarPlay and the Spotify Car Thing. This project was administered before the release of the Spotify Car Thing in November 2021 and I am curious to know why Spotify felt the need to design their own infotainment system (aside from the outreach to older car models).
We could expand testing to novice users to compare if their opinions are consistent with our existing data and run a competitive analysis between CarPlay and the Spotify Car Thing. This project was administered before the release of the Spotify Car Thing in November 2021 and I am curious to know why Spotify felt the need to design their own infotainment system (aside from the outreach to older car models).
3. Revisit the Load Screen
I firmly believe that developing a more productive load screen would present real life implications and promote driver safety, but it was simply beyond the scope of our project parameters. There is a great need for research on infotainment systems especially as cars, like Tesla, call for bigger and even more distracting screens. Such research could establish standards on screens to ensure safety.
I firmly believe that developing a more productive load screen would present real life implications and promote driver safety, but it was simply beyond the scope of our project parameters. There is a great need for research on infotainment systems especially as cars, like Tesla, call for bigger and even more distracting screens. Such research could establish standards on screens to ensure safety.
Catalyst:Impact
How might we encourage young folx to get involved in their community and create positive social change
VIEW CASE STUDY >>
Youth Garden
How might we increase Youth Garden’s outreach, engagement, and retention through establishing a more intuitive design
VIEW CASE STUDY >>
DFA @ UCSD
How might we celebrate DFA's accomplishments through their website to reach potential members, mentors, and community partners
VIEW CASE STUDY >>