Ironhack’s Prework — Challenge 2: Wireframing
For this project I have to apply reverse engineer the User Flow and Interaction Design of an application. I have decided to work on Spotify , a popular application for music streaming. This application offers a lot of recorded music, music videos, podcasts and broadcasts.
Why Spotify?
Besides being the app I use the most, I think it is easy to navigate and offers many options to interact with each song, artist or podcast. I have specifically chosen the “Share a song (via social media, messaging or chat)” process. It’s an option that I only became aware of recently and as a music lover who likes to share and recieve new music I think it’s very interesting.
UI elements
- Images
- Icons
- Buttons
- Text
- Search Bar
- Navigation Menu Bar
Task Flow
- Select “Your Library” from the Navigation Menu Bar
2. Select Folder “Liked Songs”
3. Choose the song you want to share and tap the “More” button
4. Select “Share”
5. Choose where to share it.
Prototypes
I have made two prototypes of the flow, the first one is a lo-fi prototype:
And the second one is a midi-fi prototype made with “Figma”:
Conclusion
While at first I thought the midi-fi prototype would be quicker to make, it wasn’t as I thought because the application uses a lot of images and although there isn’t a lot of long text there are a lot of “titles” and “subtitles” used. The Ironhack’s Wireframes Kit helped me a lot and made the process easier. Something I would try to improve in the next opportunity would be the order of the elements and icons in Figma. In the beginning I had everything sorted by folders but after a while I started to have more disorder what hindered the workflow and cost some minutes. Repeating midi-fi Wireframes practice is the best ally. One becomes faster and more efficient especially thanks to the muscle memory that comes from working with programs like Figma.
