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.

Moodboard

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.

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

Hi-Fi Wireframes

1. Main Page

  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.

2. Backgrounds

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

  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.

4. Spotify AI Search

  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

  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.