spotify audit

spotify audit

In this interaction design audit, I have gone through some of the most-used screens on Spotify’s iOS app to identify the strongest and weakest aspects of its design. Although Spotify is undoubtedly a powerful and capable music streaming app, its visual design has some notable shortcomings. These include some design inconsistencies, a reliance on a couple of unergonomic design choices, and a dark-mode-only aesthetic that is starting to feel long in the tooth.

For an evaluation of the strengths and weaknesses identified here, see “Evaluation”, above.

home screen

[Spotify screenshot at left:] Good afternoon. [List of recently played playlists]. New release from Above & Beyond. Group Therapy 535. Your Playlists [List of playlists]. [Handwritten text added at right:] Settings only available from home screen. Refinement chips are suboptimal for filtering/refinement. Good use of grid variability. Lacks a light mode — bad for accessibility. Gap between art & section frame. Effective use of embedded play button. Now Playing overlay could be more distinct. Under-utilization of app footer.

home screen

scrolled down to suggestions

[Spotxfy screenshot at right showing home screen:] Music. Podcasts & Shows. Audiobooks. Chill with House, Dance & Electronica. [List of playlists]. Made for Meadows. [List of playlists]. Album picks. [List of albums]. [Handwritten text added at right:] Tapping section title doesn't show all items. App requires vertical and horizontal scrolling. —Unergonomic —Accessibility-poor. Inconsistent capitalization. Vertical format only allows 2-3 artist names to be shown. Now Playing overlay shows current device, but perhaps doesn't need to show it twice.

home screen

filtered for podcasts & shows

[Spotify screenshot at left:] Podcasts & Shows (highlighted). The dark universe: can a scientist battling long Covid unlock the myste... Episode. The Audio Long Read. [Handwritten text added at right:] Efficiently reduces header to maximize screen real estate. Vertical scrolling has resistance and snaps to each new episode frame; Should be implemented in Now Playing screen for swiping on album artwork. Snap-scrolling layout is effective for seeing new episodes but not for browsing new shows; no option to follow a new show from this screen — following [a show] requires 3 extra unintuitive taps. Algorithm is effective at identifying users' interests, as with music.

your library

[Spotify screenshot:] Your library. Playlists. Podcasts & Shows. Albums. Artists. [List of recently added items]. [Handwritten text added at right:] Library-only search can be consolidated with Spotify search in app footer. Refinement chips require horizontal scrolling on small screens or when Spotify is used for Podcasts/Audiobooks; no way to rearrange filters; "Podcasts & Shows" is too long for UI. Square corners for music; round corners for podcasts — but — round corners for album artwork in Now Playing overlay. —Looks messy and inconsistent. Identifying item type is redundant and inefficient.

your library

filtered for albums

[Spotify screenshot at left:] Your Library. Albums. Downloads. [Handwritten text added at right:] Black on green [highlight pill button filter appearance] feels dated and offers lower contrast. [App] supports both list and grid view. Touch target to remove view filter is small and hard to reach for right-handed users. Line spacing could be tighter; looks wider than on other screens [within the app]. Matching Now Playing overlay color to album art looks nice but can make it harder to see.

album screen

Spotify album screen: Not enough of a margin around art at the top and bottom; too much at sides. Art could be scaled up more for better effect. Too little space between album art & title. Inefficiently arranged [album artist, type, year]; looks cluttered. Long press [context menus] not available on songs; implemented inconsistently and sub-optimally across app. Small touch target for song menu; poor accessibility.

podcast screen

[Spotify Screenshot:] Fall of Civilization Podcast by Paul Cooper. [Added handwritten text:] Header area is well-arranged, aesthetically-pleasing; better layout than music album header. Info section has a lot of clashing visual elements & feels cluttered. Episode title is cramped at right. Episode artwork does not need to be shown; removing would save space for episode title.

now playing screen

[Spotify screenshot at left:] Pink Floyd. Wish You Were Here. Pink Floyd. Lyrics. [Handwritten text added at right:] Source is very small relative to other UI text; accessibility. Function is not clear to new users. Art should be moved up to make header look less empty. Left-right swiping on album art is sensitive; too easy to inadvertently change songs while holding with screen unlocked or closing Now Playing screen. This element [green check mark indicating that song is added to library] would look better in white; overuse of brand colors. Lyrics peeking up makes the screen feel bottom-heavy & cluttered; a down arrow would look better without sacrificing functionality.

now playing screen

scrolled to show lyrics & about the artist
inset shows an album & a podcast

[Spotify screenshot showing Now Playing screen:] Wish You Were Here. Pink Floyd. Lyrics [to "Wish You Were Here"]. About the artist. [Handwritten text added at right:] Multiple share menus in close proximity; cluttered design. Design combines square and round corners in ways that appear inconsistent; in addition to here, we also see this with artwork: album art has square corners, while podcasts have artwork with round corners. [Inset from another Spotify screenshot:] Slide. Album. George Clanton. Sounds Gay. Podcast. Stitcher Studios.

now playing screen

car mode

[text in screenshot at left:] Tycho. Time To Run. Tycho. Quick Play. [handwritten text added at right:] Larger, clearer source title. More even & consistent top & bottom margins than Now Playing screen. Wider left & right margins than now playing screen; aligns with controls but not text. Larger song title easier to read; better for accessibility — but — text margins narrower than art or controls. Unclear why Spotify removed target circle from behind Play/Pause button; this style is more consistent but removes some clarity. Icons are easier to interact with, more consistently sized & spaced. Appropriate use of peek-up lower screen.

context menu: album

[Spotify screenshot at right:] Zero Wave. admo. Remove from Your Library. Download to Apple Watch. View Artist. Share. Add to Playlist. Add to Queue. Go to Radio. [Handwritten text added at right:] Context menu: Album. Scannable codes is an excellent and unique feature. Good spacing [between album art, title, and artist]. [Download to Apple Watch is a] very convenient feature for Apple Watch owners. This menu is not available with long press.

context menu: playlist

[Spotify screenshot at left showing context menu for playlist:] Discover Weekly. Remove from Your Library. Download. Share. [Handwritten text added at right:] Context menu: Spotify-curated playlist. More than half the screen is unused. Very few actions available. This menu is available with long press.

context menu: podcast

[Spotify Screenshot:] Sounds Gay. Updated Jul 4, 2023. Stitcher studies. Pin Podcast. Close. [Handwritten text added at right:] Nearly the whole screen is blank. This menu is available with long press. Only one available action.