CAST A SPELL IN BLACK AND WHITE

Revealing the trick

Shazam’s user flow wireframe

Fabio Bonamico
3 min readDec 28, 2020

Do you ever get the feeling that technology works like magic? I definitely do when using Shazam, one of my favorite apps of all time. Just pop your phone, open the app, tap the big button, and Shazam! Never ceases to amaze me how simple, fast, and accurate it is.

The product promise is quite straightforward: it will identify any song or TV show in seconds.

Source: Shazam

It does so by using your phone’s microphone to create a digital fingerprint of the audio you’re listening to, let’s say, background music at the supermarket, and matching it against millions of tracks in a database. The name of the song and the artist is then printed on the screen, together with other information. All that in a couple of seconds. Magical.
Along with the discover function, Shazam is packed with a library to store all your shazams, a Charts section to explore what’s being shazamed around the world, and features like the auto shazam, that’ll capture audio and identify them for you on-the-go.

Summoning a music video

I decided to work on the “watch a video” journey because it consists of five different screens to get to see your video. Unfortunately, the last step takes you to YouTube so that the video can be played. I would love to see Shazam having this video embedded in the app to make the experience more seamless.

The starting point was identifying all the elements that should be present in the wireframe. Sketching the screens helped to map those components and to make sure that nothing was going to be left behind.

The task was then broken down with task analysis technique:

Task: Play the video of music #1 in Brazil chart

With the app open:
1. Tap on the “Charts” icon or text on the top right corner of the screen or drag the screen to the left;
2. Tap the first music in Brazil Chart image thumbnail or text;
3. Tap the “Videos” link in the header;
4. Tap the video thumbnail at the center of the screen;
5. Wait for the video to load on YouTube.

Conjuring the prototype

After putting all that together in Figma, the wireframe came to life and it was ready to become a mid-fidelity prototype. You can interact with the final result here. You can also snap the following QR Code to open it on your phone.

What about you? Do you know another app that feels like witchcraft? If you do, please share it in the comments below and spread the juju!

--

--

Fabio Bonamico
Fabio Bonamico

Written by Fabio Bonamico

Product Designer from São Paulo, Brazil

Responses (1)