Shazam
Ironhack UX/UI Bootcamp Prework-Challenge 2: Wireframing
How many times before have you thought this??
“Wow!! I love this song!! I heard it before… but, what song is this??
This song reminds me of my childhood… my mum sang it to me… Do you know which one is?
This add has a catchy song… I would like to know who the singer is…”
Shazam is an app to identify songs and TV programs that sound around you, only pressing the Shazam button. The app shows you the name of the track, the artist and other information like the lyrics, video, artist’s biography, concert tickets and recommended tracks. Apart from this, the app has a global top of songs, featured top artists, discovery tracks and you can share it in social media or with whoever you want. Once you start shazaming you can’t stop!!
For this challenge I chose this app due to its easiness of usage, when you hear the song that you like, you only have to press the Shazam button and that’s it!! Even if you hum it the app will find it!! Shazam is one of my favourite apps, I am used to do playlists or to know new artists, given that the app gets you all the information about the song.
USER FLOW
As I previously commented, Shazam is an intuitive and simple app to use, you only have to open the app and “Do a Shazam” to find that song or TV program that is playing around you. I worked on two different users flow. We can see it below.
The first user flow is to search a song. For instance, when you are shopping in a store and it plays a song that you don’t know, you will do the following:
- Open Shazam and press the button.
- The app is listening.
- When it finds the song it shows you all the information about it, title, artist, other tracks, and you can listen to it in Apple Music or a fragment in Shazam.
- If we press play button in Shazam we will listen to a part of the song and other ones.
- The next step will be to go back or we have more options in the right button at the top.
- Finally, we can play the song in Apple music, buy it in iTunes, add it to my music, share...
The second user flow is about “My music”. Here we have all the Shazams and the artists that we searched, as well as the last Shazams we have done.
SKETCHING
Once we have the users flow and the screenshots of them, it is time to put the main information in order, and the elements I really need to communicate the idea efficiently. Sketching is best way to do it. Therefore, I grabbed my promarker, my stabilo and some templates of a mobile screen to draw the sequences of the two flows.
WIREFRAMING
After I drew the user flow in lo-fi by sketching, I did the mid-fi version in Figma. I mimicked the screenshots of Shazam but simplifying the design, so that we can focus on the important information. The wireframe that we can see below only contains the icons or relevant text for the user flow.
PROTOTYPING
As a result of the previous work, we get to the last step: testing the prototype. Would you like to try it?? Come on, let’s do it!!
CONCLUSION
In the process of design, the wireframing is essential to have a quick and useful prototype of our web and app. By creating wireframes we can get a rapid design, focusing on the structure and the main sections, without other elements that can distract us, like typography, colours or images. The main goal is to build a prototype for testing with the user, and to prove what is wrong, thus it allows us to do changes rapidly and redesigning the structure of a web, avoiding us to lose time and higher costs.
My experience in this challenge has been greatly satisfactory, being able to see how step by step the designs take shape. Designing and wireframing with Figma has been amazing, I have seen that without previous knowledge of the app I could get mimic screens or even do wireframes, I can’t believe it!! I’m so excited and I want to learn and practice more!!
