Spotify

Design Exploration on Spotify

Spotify is an online cloud based music service that allows users to play music, podcasts, and audiobooks. The service’s feature list has grown over the years such as personalized playlists, Discover Weekly and Release Radar. Users want more in terms of personalization to keep each visit unique and fresh, allow artists to connect with their fans, and the ability to use Artificial Intelligence to help them discover and explore music.

Problem

  • Provide concise navigation for users, music should further reflect visual experience and artistic expression.

  • Controls, layout and visual hierarchy can be further improved.

  • Browsing for music can be overwhelming and should provide catered music through following friends, influencers, AI or by browsing.

View as Presentation Slides

Moodboard

A collage of promotional graphics and advertisements showcasing Spotify's branding and features, including images of mobile phones displaying playlists, colorful graphics with text about Spotify Wrapped 2021, and artistic illustrations celebrating music and design trends.

The Spotify design team, throughout the years, invested in creating visually appealing designs, particularly in their marketing campaigns, awards showcases, and year-end summaries for users. However, the app interface offers room for improvement in terms of individuality and artistic expression.

Feedback from the artistic community reveals that users look for more opportunities to blend design, art, and music together. A personalized visual interface reflects Spotify's creative design language to allow the ability for customization, and a unique and fresh experience with each visit.

A collection of colorful presentation slides on Spotify design topics, including team, tools, illustrations, and branding, displayed on a pink background.

Colours

Primary Colours

Spotify uses primarily blacks and whites for most of their UI. While keeping on brand, touches of the Spotify Green highlights various elements such as hover states and links. A key factor for this design choice makes the album art pop and stand out more.

Secondary Colours

Fun, bold and electric colours in the design to help extend the design language seen in their marketing campaigns, including Electric Green, Lavender and Fuchsia; diverse colours representing the diverse community.

Typography

A chart displaying six colors with their names, hex codes, and RGB values. The colors are Spotify Green, Black, White, Teal, Lavender, and Fuchsia.
A typography style guide showing font options, with text displaying uppercase and lowercase letters and numbers, and a row of six icons representing music note, user, book, microphone, speaker, and add, all in white on a black background.

Hi-Fi Wireframes

Screenshot of music app interface with sections for discovering new music, curated by AI, and featured in Canada. There is a sidebar with icons for different functions. On the right, there is a "Just Played" section, a "Recents" list with song titles, and a large gray rectangle for featured music at the bottom.
Screenshot of Spotify's browse page featuring sections for 'Discover What's New' with a song placeholder and categories labeled 1, 2, and 3, each with empty white boxes for content.

1. Main Page

Screenshot of a music streaming app showing a playlist titled "Pop All Day," with various playlists and albums on the left sidebar and a section for recently played songs at the bottom. The right panel displays album artwork and details of a song called "Here with You" by SRTW, Buchs, flower thief, along with a section about the artist and playlist follower info.

  1. Created a more consistent navigation where Music, Podcasts, Audiobooks, Browse and Playlist live in one place. Currently all of this is separated under the banner and left sidebar and is not easily accessible when scrolling down the page.

  2. A hover bar for the music interface allows for a more modern and universal design language across mobile - inspired by Apple iPhone’s dynamic island.

  3. Reduced repetitive elements. "Recently Played" playlist was showing up in multiple places—on the left menu, under the banner, and in the categories column. Consolidated into one section of the bento box on the right.

  4. Added a space for featured banners to appear showing better visual hierarchy with varying hero carousel banners.

  5. Experiment with adding an area for a followers/friends list to help build a stronger sense of community. This would encourage sharing, highlight top listeners, and give artists and bands a better way to connect with their fans and promote their music.

Screenshot of Spotify's software interface showing various music selections, playlists, and recommendations.

2. Backgrounds

Screenshots of the Spotify app interface showing a playlist, album art, and music recommendations in four different color themes.

Users can customize banners created by Spotify. This adds uniqueness and a personal touch reflected by the visual design team. A wide rage of images can be introduced depending on seasonality, events or promotions specific to the featured banner, making each visit to the app feel fresh and unique.

3. Explore Page

Music streaming app interface displaying a library with various music genres and playlists, including a highlighted playlist titled 'Get Trapped, Vol. 1' with album art and a playing track titled 'Money Ain't a Thang' by Tropkillaz on the right side.

  1. The "Browse All" page can be challenging to navigate without categories and a lack of sorting options.

  2. Showcase music videos paired with song information adds to visual engagement, taking inspiration from Netflix's interface to create an immersive experience.

  3. To make exploration easier, users now have the option to immediately search categories, helping them narrow down genres more efficiently.

  4. Genres are now grouped under a parent category, with a convenient sorting feature placed on the right side of the screen for additional refinement of searching available genres.

Spotify app interface featuring a music playlist screen with an image of a woman playing an electric guitar on a stage with purple and pink lighting

4. Spotify AI Search

Spotify music streaming app interface showing a rap performance on a rooftop, with playlists, stations, featured channels, and mood playlists.

  1. Using Artificial Intelligence, users can type just about anything they want and Spotify.Ai can tailor music specific to the users age, location, and other methods. Enhanced searching includes terms like:

  2. “Find me songs that cheer me up”

  3. “Play songs from the 1999 Grammy Awards, only in Country music”

  4. “I have a one year old baby, play sounds that help them sleep”

  5. List of Recommended songs similar to the suggested displayed right under the banner.

  6. Users can explore lists specific to their mood and time of day, this is learned from previous user behaviours and previously played music.

5. Friends/Followers Feed

Spotify app interface displaying a playlist with a cover photo of two musicians playing on stage, one with a guitar and the other with a bass guitar. The current song is titled "Riptide" by TOKYOFLOW. Below, there are several playlists for listening history, including "The Myth of the Turtle Mix," "90s Mix," "House Mix," "Upbeat Mix," "2010s Mix," and "Calming Acoustic." The interface includes icons for music, microphone, books, and people on the left, and options to navigate, search, and access user account on the top.

  1. Inspired by Instagram, friends can discover and explore music together and the ability to follow their favorite bands. This also creates opportunities for artists to promote themselves through music videos, live shorts, sneak peak song release or event updates.

  2. Song titles is displayed below, and a carousel slider automatically plays the next track, keeping the experience smooth and engaging.

  3. Friends' listening history would be showcased for easy access, adding a fun, interactive way to connect. This section also lets fans dive deeper into the music of their favorite artists, celebrities, or influencers, providing daily inspiration—like discovering what tracks people are listening to during their gym workouts.

Result

  • Make use of clearer category sorting and less repeated playlists on the main screen.

  • Consolidate Controls, Notifications, Profile, Search functions.

  • Add features to help users explore music.

View Prototype