Shazam: a User Experience Case Study

This case study looks into pain points within the Shazam App to unearth potential room for improvement for developing the app to become more successful. These pain points within the Shazam App are identified through the Nielsen Norman Usability Heuristics for User Interface Design, and ultimately, solutions are presented to help combat the identified pain points.

Upon opening the app, users can see the relatively small space the app runs within. The initial screen (after original sign up and log in) jumps right to the main page with the large “Tap to Shazam” button. This is a smart design move, because the premise of the app is to catch a song that is playing in real time, and as one knows, songs are relatively short, only lasting a few minutes long. Thus the immediate opening screen directly relates to the user’s need.

Beyond this initial screen, the app only has two other pages. One page houses the user’s app history, and showcases all the songs the user has Shazam-ed. The alternate page, is for browsing and discovering new music the app choses to showcase. Within these three pages, there are a few problem areas that hinder the ease of reception and understanding from users of the app.

For this heuristic, it is smart for app designers to create an easy escape route for users, who often wonder through an app more unintentionally than not. With Shazam’s specific interface, the third “Discover” page presents new music for the user to uncover. At the end of this daily-updated feed is a final card that reads “That’s all for Today” and “See all Charts”. Clicking (tapping) anywhere within this card takes the user to one place: a link of Shazam’s top-charts. But there is no route back to the beginning of the Discover page.

Instead the user sits at the end of having flipped through 8 or so cards, and can only either: tap to be rerouted to the charts, or flip back through the cards one at a time, requiring 7 swipes down to return to the top of the page.

This card should have a link back to the top of the page; this would allow for more user control and freedom.

(Disclaimer: There is one other escape route, although unmarked, which would be to swipe right, changing from the “Discover” page back into the home “Shazam” page. Although a quick escape, it is unmarked leaving only expert users to know this was a possible route.)

Another slight issue found within Shazam’s app, is in the presentation of system status. As mentioned, the app runs between only three separate pages. The app design does rely on a horizontal page indicator, which tells the user which page of the three the user is on within Shazam.

The three headings are shown here:

Relating back to the heuristic of consistency, I found it strange that each of the headings were structured a little differently, besides the horizontal page indicator showing on all three pages. But as the user swipes from left to right and back again, the home page (middle) is the one header that does not contain the page’s name as a title. The first and third pages do (“My Shazam” and “Discover”). Instead of the title on the middle page, it has the icons for the alternate pages on their respective sides of the middle home page.

A way Shazam could make this page indicator more understandable, would be to title all the pages, and have all three titles with icons visible on all pages, having a distinct indicator for the page being viewed. Or, each page could be titled, centered within the headers, its page specific icon, along with the horizontal page indicator icon, as is structured, but carried out on all three pages. Each header should be fixed, or not fixed, with continuity across the app, unlike the current case within the running app, of one header being fixed, one not, and one not fixed but always visible.

(Disclaimer: Shazam does utilize a great, if not iconic, example of visibility of system status. The App produces a pulsing visual within the main screen behind the “Shazam” button when it is pushed. This visual cue tells the user that the app is listening and processing the musical data being assessed.)

Consistency allows users to follow an app platform intuitively. Within Shazam’s app there are several design inconsistencies which disrupt user’s understanding, proving to be a major pain point throughout this app. These inconsistencies are seen within varying screen designs, differing layouts, various color changes, and near-content overload on some pages, making deciphering presented information difficult. Some of these pain points will be discussed here, and others will be further addressed in the following heuristic violations (see Aesthetic/Minimalist Design & Recognition/Recall).

Seen below are various music cards shown on Shazam’s Discovery page.

As you can see, the cards’ layouts differ. One is text-aligned center, one is text-aligned left. Some album covers fill the card, others are scaled down. The play button remains a common element, but it is never in the same place. The only element that proves consistent between the cards, is the vertical ellipsis drop down menu in the top right corners of each card.

The lack of set consistency works against ease of understanding for users. Music entails lots of various information (song title, artist, album, etc.) and successful design should organize it all well. Shazam has different layouts for certain content within these cards, however, the layouts do not overlap enough for the user to readily understand the cards content as they flip through and “discover” new music. More consistency integrated into each of these Discover card layouts specifically, would make the app more readable and understandable. Projected solutions and examples are discussed as follows.

In this image, one can see various Discover page cards, as presented by Shazam, all of which are oriented around user posts that call out specific songs or videos and their artists. I found these user post cards to be confusing and hard to decipher as a user, a main pain point lacking consistency in this app.

But here is a proposed solution for reorganizing the same data. For these user post cards, there needs to be some visual element that denotes what was posted versus the actual song/video link. I used a blue line to delineate, leaving the posting info at the top and bottom of the cards, and the music link in the center.

(Note: the other 2 added blue elements will be discussed in the following heuristic violation paragraph.)

With the afore mentioned issue of consistency and standards and the inconsistent cards showcasing new music on the “Discover” page of the Shazam app, identifying the given music information more thoroughly could also be of benefit.

By working toward recognition within the app, Shazam could help label the discovery data they provide. The blue card, shown here on the right, has a Shazam given label of “Recommended Song” (also blue). Yet the yellow and red cards do not have any such given title. They show music content as well, but their lack of correlating title leaves the user searching the content to decipher what is being presented.

As you can see, the pop of blue titles helps to navigate between the written and visual content within these cards. Discover-page cards showcase either songs, videos, or users posting about videos or songs. Thus three titles could be used: Recommended Song, Recommended Video, and Listener Recommended (denoting a user post/comment). One of each of these three titles are shown in my redesign example. Utilizing these given titles would help users recognize what is happening within these cards.

Also in the proposed redesign image, one can see I changed all the play buttons on the cards to be this same Shazam-blue color. This helps users to identify similar content across the app’s various pages. This too is recognition. In the preceding image, you can see that Shazam made a design choice to keep the play buttons on each card the same as the background of each respective card. As this may look clean across the individual screen being viewed, it actually confuses the content that is working across the app. Shazam should be more concerned with unifying its content across its various pages, instead of unifying content locally on individual differing pages.

As a whole, the Shazam app does well to maintain minimalism throughout their app. It keeps a simple layout, presenting page-specific data. However, as being discussed, Shazam presents information in a variety of ways within its small space. If Shazam worked to hone in on keeping its three pages more concise, its minimalism would be perfected.

The left most image is from the “My Shazam” page, and the right two images are from the “Discover” page. In the first image, the album cover is displayed, complete with song title, artist, and Spotify link. The second image, with the blue back drop, mimics that text-layout with album cover, only showcasing a singular song. It still presents the album cover, followed by text-aligned left song/artist/music info; however, the song title is a bit more emboldened. Next, the third image, with the yellow backdrop , presents semi-different information: a user’s post which targets an album/song. This song information falls out of line with the two other models. If all the song/artist information could be reworked to have the exact same text styling across all Shazam pages, the minimalistic design of this app would feel more concise and congruent across the app.

As discussed, this app works off of three primary pages. They are the home “Shazam” Button page, the “Discover” page, and the “My Shazam” page. These three pages do three different functions, listed respectively: listen to the audio in real time around you, showcase new music to explore, and stores past Shazam-ed songs as a personal library. So I went ahead and created three user flows for each of the three pages as main site functions: music identification, music discovery, and personal music library.

My only proposed change to a pain point within the app that actually could change the user’s flow is presented here, as is discussed in the User Control and Freedom segment (Please see above). All other heuristic pain points revolved around design changes, thus not tampering with user flows.

This main flow proposition is located on Shazam’s “Discover” music page. On this page there are multiple cards that present different music for the user to encounter. These are explorable by swiping up, changing from one card to the next. At the very end of this chain of new music, is a final card that reads “That’s all for Today”. Now although Shazam lists several comments on this card, the only viable action of tapping anywhere within the card, takes the user to a separate charts page, where music can be explored via top-charts and lists.

Maybe they do not want to look into charts further in that very moment, yet that is the only noted option available to them. Unmentioned actions would be to scroll all the way back through each individual card (maybe a marketing choice forced upon users) or to swipe right, which aborts the Discover page entirely and takes the user to the adjoining home central Shazam page. My additional proposed button is marked with red in this flow chart. As you can see, it provides an option for users to dictate where they want to go.

Shazam: a User Experience Case Study

Research & References of Shazam: a User Experience Case Study|A&C Accounting And Tax Services
Source

Share on Facebook

Tweet

Follow us