Ironhack UX Challenge Two: Wireframing

For this challenge I chose to wireframe a user flow within Shazam. It’s one of my favourite apps — it’s attractive and functional.

Wireframing is essential in taking our ideas about user experience and bringing them to life.

Importantly, the purpose of wireframing is not to create something beautiful, but functional — it ought to draw attention to the structure of the design rather than the aesthetics.

The most common user flow in Shazam is the process of identifying a song. The app analyses a captured sound and seeks a match based on its acoustic fingerprint in a database of millions of songs.

Firstly, I created a low-fidelity layout of the user flow with pencil and paper. I roughly sketched out the structure highlighting the predominant UI components — I found these in the Ironhack Wireframe Kit and on the Noun Project website. I then used Figma to design a mid-fidelity layout.

Original iOS screenshots of Shazam
Wireframes created in Figma

Here is a visual flow of the prototype I created in Figma:

Conclusion

This task challenged me to develop my understanding of Figma. I spent a quite a lot of time drawing alongside using wireframe kits — I well and truly ‘learnt by doing’ here. I could definitely have done it much faster and more efficiently if I had focused on using the wireframe kits!

It was an invaluable exercise in visualising layouts, learning shortcuts and illuminated how important it is to separate the actual experience of an app from its visual identity during the design process.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pete Armitage

Pete Armitage

52 Followers

A few essays on design, music and chaos amongst other topics.