Saavn: A Design Review

Yash Sethia
Pen | Bold Kiln Press
9 min readOct 23, 2017

Saavn is a US based (was a revelation to me as well!) music application company with nearly 20 million users on their platform.

As a music lover, I was introduced to this app by a friend, to help me carry a truckload of songs with me. Over the course of the year I have been using it, I’ve had my designer mind constantly come up with improvements, catch inconsistencies and more. Given just how popular this app is in my peers, I decided that for my first every app review, it was a super choice!

I’ve broken down my review into three Levels, 1 being basic UI inconsistencies, level 2 lists functionality issues and 3 being deeper UX challenges.

The design is a tad complex but the availability of lots of recent songs on dashboard is a plus point. Different charts, special shows and and mood curated playlists are some interesting parts of the app. What seems dull are the Facebook friend feature, music status, radio and a clumsy dashboard. The application UI color is good and the brand built around the app is quite attractive and easy to recognize. But it miserably fails to be a mood partner for a music lover. Here are some of the errors and feedback based on my observations in the app.

LEVEL 1 (Visual Inconsistency)

This level comprises elements of visual design which includes alignment, typography, icons, screens and much more, and finding visual bugs in them.

Alignment

Let’s start with alignment issues.

1) ‘Try Saavn Pro’ screen has a Paytm payment button with over padding from top and extra space on top which leads to disproportionate tabs with monthly payments. The Discount button is abruptly cut into the white space which gives a poor UI.

Unequal Spacing

2) Nearly every screen has buttons of Share, Add and Download (fig iii) but the alignment and spacing between them is unequal. This mistake is apparent across the app.

3) The Romantic chart playlist has text alignment issues which looks absurd.

Headings

As the basis for guiding the user across screens, its surprising that heading sizes vary over the entire app.
The dashboard has bold and tracked headings while some screens have regular font type used for headings.

tracked and bold heading
regular heading
bold and non tracked heading

I also feel that both the size (not big enough) and the colour (grey being very bland) of the headings could be re-evaluated.

Icons

Icons have a nonuniform form across the app.

The visual inconsistency starts when Facebook login is used.
Some screens show stretched profile picture. In the ‘Edit Profile’ section the image comes with a translucent black background on top that looks awkward inside the whole app.

Logging in with mobile number brings further inconsistency in the app.
Since no profile picture was selected so a green icon is displayed. This icon has changed its colour from green on the profile screen to black on the dashboard and even elsewhere the initials of my name Yash Sethia are shown. All of this leads to deep inconsistency across the app.

green icon
‘Y’ letter icon
profile screen
facebook login
Dashboard icon

Buttons

What’s great is that the use of green for the buttons is consistent through the app. Beyond that — a lot of inconsistencies.

Rounded rectangle buttons aren’t consistent — there are examples of them being fully rounded — pillbox style, and then also those where they’re only ever so mildly rounded.

Further — the weight of the text inside the buttons varies; as does the proportion of length of text to width of button.

Bold, Fully Rounded Rectangle || Thin, Mildly Rounded Rectangle

In itself, I believe this to be less of an inconsistency, but presents an opportunity to improve — the use of both the full width bar, as well as the popup. That said — when compared to the previous two buttons, these seem to stem from a different form language entirely.

Bar || Pop-up
Black (Transparent) Play Button

The black button below song thumbnails is barely visible, when the thumbnails themselves are a darker shade.

Imagery

The thumbnails used for radio part have no cohesiveness with the rest. Also in the playlist section the icons and song images mix and merge creating a perfect labyrinth.

Dashboard || Radio
Mix and Merge on the Top

Language & Copy

Language & copy inconsistency is visible in the Streaming Quality screen. Words used there are related to volume and speed rather than the buffering speed. Simple notation of speeds in kbps would make it simple. In the radio section, the navigation bar drop down menu has a heading as Stop Radio, which actually is an exit from the Radio feature — not in line with the copy. Sometimes the heading in the tab differs with the one shown on the navigation bar.

Chart Toppers to Charts on the navigation bar || Stop Radio button lands you on the dashboard || word used for buffering speeds

My favourite copy failure occurs when the navigation bar shows “ Weekly Top 15” and the list goes on till the Top 30.
Why? Maybe the user would like to see the subsequent 15 as well?!

4) Weekly Top 15 screen lists 30 songs.

LEVEL 2

Functionality issues

The basic observation once you land on the dashboard is that it gives you a lot of options at once with no idea or priority setup. I hated the over stacking of dashboard which makes it more visually dull and complex. It is visually challenging and confuses the user at the first glance. Navigation drawer is neat and easily accessible everywhere but the Saavn Pro feature appears twice on the drawer.

Now comes the navigation bar (guide in the app). It has three bars on the left (icon for navigation drawer), heading at the center, and basic icons of notification and settings in the right corner. A profile icon should definitely be a plus point as a one click solution to the user. Issues with navigation bar is that the consistency is missing.

Sometimes it changes to blue from green, becomes transparent and starts playing hide and seek with the user. A uniform navigation drawer is essential.

Transparent || Hide and seek ( vanished )
Lost on the dashboard
Original
blue
  • Clumsy Dashboard has a section of charts in the vertical scroll along with a ‘View All’ button. The issues arise when the ‘View All’ button shows only the same number of thumbnails as seen in the horizontal scroll. The button seems useless.
  • Also the drop down menu on the navigation drawer shows two options that are Home and Settings, also accessible on the navigation drawer with same number of clicks.
  • I logged in using Facebook, I was asked to login again when I used the people feature in the app. Redundant login may irritate the user.
  • Notifications come at regular intervals but the basis on which they come are not clear. I personally found them absurd and irrelevant to my music listening habits. Also the UI is very irritating with Saavn icon appearing on the top repeatedly. Why do we need to see the icon again if we’re in the app already.
Notification screen || Profile Picture update || chart playlist
Custom playlist || Radio player || Navigation Drawer
History Icon ||People feature ||Navigation bar Drop down menu
  • The basic music player screen has two icons for same function that is to ‘View History’ (clock icon), one on the navigation bar and another on the top of the songs’ list.
  • The Custom playlist screen has a drop down menu which does not have an edit option. Because it’s custom made we need to edit it on daily basis.
  • Once you login with your mobile number, profile screen asks you to update your profile picture. The only way to do this is to update it with your FB display picture. ?!

LEVEL 3

The overview

On first look at the dashboard, users have to guess which songs they need to listen. The app begins with choice of languages which is then supported with the dashboard listing our language choices. The main screen is lengthy in nature. With ‘People’, ‘Status’ and ‘Custom Playlist’ feature, the app offers a lot of options but none of them has a great user experience. What really excites me is the content and song curation team which has just made the right songs to fit at the right place in the folder. Here are key missing points in the app.

Key Missing Points

  1. No Like button for songs to help save them easily and effectively
  2. ‘Likes’ given to songs on the radio aren’t counted or shown in the app
  3. Custom playlist creation should be a primary function of the app
  4. Dashboard is not customised basis genres that one likes or follows
  5. Search can be improved by highlighting the top result & adding filters
  6. Music status should a primary accessible feature & easy to use
  7. Dashboard could be further uncluttered

Although with a lot of issues in the app, Saavn has the potential to overcome these barriers and become the lifeline for an avid music listened. I have really really enjoyed using this app as the content curated is just top notch. Deeper insights into UI/UX will give this app the push that they need. And love for music is undying always.

This was my first app review, I’d love to know your take on the points I raised, as well as how you think I can improve my reviews per se.
If you liked the review — clap it up! :-)

--

--

Yash Sethia
Pen | Bold Kiln Press

UX Design Professional at THEM consulting. DCE under graduate in Mechanical Engineering enthusiatic about human sciences, business and photography.