Cases study: Wireframing Spotify
Wireframes are visual representations of websites or apps. They help designers saving time and focus on the essential parts of the design on an early-stage prototype.
I am not an expert on the matter, but if you want to learn more, I recommend you to watch this video or read this article. (They will be able to explain it to you in a much better or funnier way!)
Getting back on track and finally starting the article, the goal was to “reverse engineer” an app that we liked to copy its layout and practice wireframing.
I started asking myself:
Which app should I choose to copy and wireframe?
I like to challenge myself so immediately I knew that I wanted a well-designed app, with a bunch of functions and information on the screen designed in an elegantly way.
After deciding on my goal, I started to scroll my cellphone screen and see which apps I had that would fulfill that desire.
At first, I thought about doing from the NuBank app, a very innovative digital bank that is a huge success in Brazil and has a gorgeous app. But I would have to do some prints of my app screen and I thought that it would not be a good a ideia to post on Medium sensitive information about my bank account. =X
(I could just have blurred the sensitive part, but that would make some part of the designe to change and I didn’t want that.)
After scrolling a little bit more I stopped at the Spotify app. When I opened the app, I realised that it was my best option.
The app is beautifully designed, It has a lot of functions, a lot of features and also combines different styles and medias. (Each artist has a photo with it’s own style).
Another important factor why I choose Spotify is beacuse it’s a well know case of user experience success. Since the beginning of the app, the company was worried about providing a great user experience and it’s constantly upgrading it’s interfaces, always worried with the user.
I also forget to mention that I am also a music producer and an artist, I even have music at Spotify, so that’s another point for Spotify!
https://open.spotify.com/artist/2heroAR0kxbbc11AqIqDr9?si=1WI-57RLTw6tYOv2PRvyHQ
Starting to wireframe
After I choose Spotify as my app, it was time to begin to wireframe it.
I started making prints of 5 screens of the app, having in mind that I had to have a screen flow that I could work on after I wireframed the design, in able to create a prototype.
I choose a flow that comes naturally to me, passing through all the 3 main pages that we are able to access when we open the app:
1 — Home page
2 — Search page
3 — Library page
and then adding 2 more pages as we search for an artist and choose the album to hear it.
Lo-Fi Prototype
After deciding the app, the screens I was going to wireframe and what was the flow, it’s time to begin to draw the lo-fi prototype design…
or at least it would be in a more common approach.
I have to confess a secret, I am much better doing stuff inside software than drawing on paper, so I started by doing the Mid-Fi Prototype at Figma, and just after I finished the Mid-Fi I did the Lo-Fi prototype.
You may be asking yourself why I did the Lo-Fi prototype at all if I already had done the Mid-Fi, but the main goal of this project is to develop the wireframing skill and not finishing the task, so even though I did the mid-fi prototype first, drawing the lo-fi prototype in the paper, seeing the workflow in the lo-fi and how it feels was still important.
Mid-Fi Prototype
The Mid-Fi prototype is the core of this project, with the complete wireframe and a prototype that can be viewed and tested just like it would be used in a phone.
In the Mid-Fi prototype, the UI elements are picked to show the essential of the designe, excluding unnecessary parts, but adding enough details in order to focus on testing the usability, the flow and the organization of the design.
Conclusion
This wireframe practice was great to develop a new set of skills for me. Building wireframes is something that I have to learn to do as a UX designer. Start copying an app so well designed like Spotify was a great opportunity to practice and to see what a powerful tool is Figma.
I also could design a lo-fi prototype in the paper, something that I am not used to do. That was also a good experience giving me more confidence to start on paper in the future.
To see my Figma project and see the complete Mid-Fi prototype:
https://www.figma.com/file/qynhqJfziIfxFpT9gFDfq7/Challenge-2-Wireframing?node-id=175%3A6654
