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.
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.
