Wireframing: Spotify
For the second Ironhack pre-work challenge we were asked to wireframe a well known app. I chose Spotify because it’s an app I’m extremely familiar with. I’d say its a daily use, whether its so I can sing-along in (and out of) the shower or to listen to whatever podcast I’ve found that I say I WILL listen to every week (will never listen to it again). It is an absolute life saver in my Studio as I am surrounded by VERY VERY noisy musicians.
I wanted to do the desktop based app as opposed to mobile as that tends to be what I use the most. There is a lot going on visually with Spotify, so stripping it down to the bones was interesting…
The actual process of stripping back all of this information seemed very daunting. Producing 6 wireframe screens looked like a lot of work. However, I realized that actually it’s just the center section that is changing. Once I created the base that was recreated over all screens, the task seemed much smaller.
I chose a flow that allowed for a bit of variety within the screens. I wireframed the following:
- Home
- Browse
- Made for you
- Liked Songs
- Settings
I ended up making a 6th screen because I wanted to show the flow to the settings page.
Last but not least, I created a prototype from the wireframed screens, within Figma. This can be checked out on the below, just click the image!
