Wireframing practice from Shazam app
My previous article was related to Design Thinking in UX. Today, I share with you my second Ironhack challenge: Wireframing. Let’s learn how to use this essential step in any UI design process.
Everyone knows Shazam, the app that can identify music and movies, based on a short sample played and using the device’s microphone. It’s not without reason that Apple acquired this app for $400 million!
If Shazam is so popular, it’s certainly thanks to its ease of use and huge music database. As a user and a future UI designer, I wanted to know if the skeleton behind this app was part of its success as well. That’s why I chose this app for the wireframing exercise.
What is a Wireframe?
A wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors. As a wireframe usually represents the initial product concept, styling, color, and graphics are kept to a minimum. Wireframes can be drawn by hand or created digitally, depending on how much detail is required.
Shazam wireframes
My task here was to create a wireframe version of the Shazam user flow, based on 5 screenshots of the app. My final product should be a simple 5 screens interactive prototype.
The user flow
- Recording page: The user hears a song; he wants to know the title. He opens Shazam and accesses it automatically on the recording page. He touches the center button.
- Artist page: The track is identified and added to the list. The user touches the cross button to get to his library. (He can also press the play button, but I intentionally did not do this possibility because Shazam is not really a listening app).
- Library page: He has a general view of different music categories and the latest titles. He clicked on the “my Shazams” section to get to all his recorded tracks.
- My Shazams page: He takes a look at his tracks, then he clicks on the left arrow button.
- Tops page: The user switch two times by the right to access the Tops page. Here he can see the best-selling music artists.
For this exercise, I used Figma, which was new software for me. I found it very complete and intuitive to do both design and prototyping, and I really want to learn more about its features.
Play with my interactive prototype here:
What I learned
This challenge made me understand how very simple wireframes can allow us to focus on the user flow, without thinking about the visual aspect.
Figma was my tool of choice for this exercise. The speed of the process facilitates creativity and the implementation of information in order to communicate them easily. The Mid-fidelity aspect of the sketches avoid distractions and look and feel opinions, which are unnecessary at this stage of work. Going deeper into the construction of the Shazam app allows me to better understand it.
Thanks for reading me. Do not hesitate to comment on this wireframing exercise, your feedback is highly welcome.
See you soon for the next challenge ✌️
