top of page
bg.jpg

UIX Case Study

Spotify_logo_with_text.png

Company

Spotify

Year

2021

Type

UIX Case Study

Spotify is the leading audio streaming and media services provider and my personal favourite, when it comes to music platforms. Based on research of online published statistics and a number of user reviews, this UIX case study was created to showcase my general work process - doing an extensive research and based on it - making design decisions.

Homepage (Desktop & Mobile)

01 Research

According to GlobalWebIndex, Spotify users prefer the mobile application and in every region more than 50% of the user base preferred mobile before desktop application. This outcome is rather expected, having in mind the global trends for mobile devices usage. Based on those results, I stared the design process from the mobile application and used the mobile-first approach.

Sources:

https://www.globalwebindex.com/reports/music-streaming-around-the-world

https://www.businessofapps.com/data/spotify-statistics/#2

spotify-mobile-vs-desktop.png
Spotify_02.png

02 UI Changes

For the UI, rounded forms have been chosen for the section thumbnails and buttons/CTAs. This decision is based on the Spotify's users age. 55% of all Spotify users are between 18-34 years old and we can state that those are young, modern and energetic people. Rounded forms are in general associated with friendly, calm and charismatic feelings. This is what the brand of Spotify is - a place where diversity, creativity, friendliness and forward-thinking are cherished.

Rounded 3D forms for the illustration are also in the background, because catching and keeping the attention of younger people nowadays is rather challenging and we can try to provoke interest in them. Those lines represent sound-waves in a much more visual way than standard.

Source:

https://www.businessofapps.com/data/spotify-statistics/#2

03 UX Changes

The UX changes are probably the most, and the aim was to simplify both mobile and desktop platforms as much as possible. Again the mobile-first approach affected the UX on the desktop as well. The main UX changes are the following:

  • Creating overall visual hierarchy with focus on the user and user's most favourite playlists;

  • Adding tabs on the top of the screen to showcase all Spotify products and features;

  • Adding a Playlist with the picture of the user on top to focus on him/her;

  • Adding "Sponsored" playlist right next to the "Made for you" playlist for the user;

  • Changing the order of the sections to "Made for you", "Recently played", "Try something else", "More like (Artist)", "More like (Playlist)";

  • Creating sections only for Artist or Playlists to differentiate them.

ezgif.com-gif-maker.jpg
Jenny02.jpg

04 UX Changes - detailed

Personal Greetings

Spotify already developed personal greetings which are great and I just added the name/nickname of the user to make them even more personal.

The user-centered approach has been applied for all UX decisions.

Tabs/Quick Navigation

Creating tabs for all Spotify products - Music, Video, Podcasts, Radio and Friend's Playlists.

The aim is to make all products/features visible and easily accessible.

Note: Videos are still not part of Spotify's features, it is just an idea for future exploration.

Tabs02.png

Old

User.png

Playlist

New order of playlists is introduced:

  • "Recently played" - quick access to user's favourite songs;

  • "Try something else" - if the user wants to explore new music, a new playlist is created based on personal preferences, AI could match styles based on previous plays;

  • "More like (Artist)" - other artists making music similar to the user's favourite one;

  • "More like (Playlists)" - more playlists with music similar to the user's favourite one.

User-centered design

Once logged-in/open the application, the user sees his/her own profile picture with a special playlist created for him/her. This way they can easily navigate to their favourite songs, just one click away.

Sponsored Playlist/Tracks

For every business it is important to monetize their product and having a sponsored playlist or track right next to the playlist made for the user can attract user's attention.

Sponsored.png
Playlist.png

New

05 Desktop Home Page

New

Spotify_home_desktop.jpg

Based on all UI changes made for the mobile, here we keep the consistency and follow the already created design style.

Aiming to simplify the Spotify desktop app with the following ideas inline:​​

  • Removing Search bar, "Upgrade" button and user's profile button from the header. We can find all those functions under the left navigation bar. Under "Browse" we can both search and browse for music, artists, podcast and all content. Under "Settings" inspired by the mobile app a user can manage his/her profile. Same applies for "Upgrade" and "Premium" menu - it should redirect the user to upgrade his/her plan;

  • Under "Your Library" we can find the new order for the home sections with quick links to them;

  • Under "Playlist" noting is changed - we can access quickly our playlists.

Spotify_landing_mobile_light.jpg
Spotify_home_desktop_light.jpg

Thank you!

06 Light Mode

07 Animation

bottom of page