Ironhack’s Prework: Wireframing — Challenge 2

Wireframe me — Shazam!

MkiaKia
2 min readOct 3, 2019

You know that feeling — the song starts and you know it, and you really like it? Still, you cannot remember who the performer is? You sing along a bit, and it’s there, the name is there somewhere, it’s on the tip of the tongue…but it just doesn’t come out!

photo by Dzema de Mac Dubididada
Photo by Dubididada

Instead of having it blurry and not being able to overcome “the tip of the tongue” moment, you have the option to Shazam it. It’s the app I really love. It’s not pretentious, it’s super minimalistic, straightforward, easy and intuitive to use. It saved me from hitting my head against the wall many times. It also helped me win a couple of bets. Not only it tells you who is the performer and what’s the name of the song, but you can also check out the lyrics, the other songs on the album and similar performers.

How did they make this app so right?

I have no idea, I guess they gathered really good UX/UI team.

I used Ironhack’s prework challenge to wireframe an app I like to get the impression of how did the last step before the development of Shazam look like.

Wireframes bring clarity to the project. It’s the primary visual representation of a user interface without design or any branding elements. It makes users focus on functionality during the testing phase and helps UX guys better define the interface and the features that will exist on key pages.

You can draw wireframes simply by hand, which makes the process faster, or you can use programs such as Sketch, InVision or Balsamiq to make them a bit prettier. For the purpose of this exercise, I used Sketch to get to know this software better.

Let’s see what does the user do with the app.

  • Hears a song, wonders what it is and opens Shazam
  • Presses the Shazam icon
  • The song is identified and displayed
  • User checks the lyrics and sings along
  • Maybe the user is also interested in the video
  • If the song is cool, the user can check similar bands
  • All the time you can share it with your friends or on social media
Wireframe — Shazam

To check out how this wireframe is behaving as a prototype check out how I played with it in InVision.

--

--

MkiaKia

Instructional Designer jumping into the world of UX/UI