Ironhack UX/UI Challenge 2: Wireframing
Or the unexpected virtue of patience (while playing around with icon size and pixel distance)
This week, I learned two skills with one challenge. I learned how to wireframe all while learning how to use Figma.
First of all, what is a wireframe?
A wireframe is a sketch used during the conception stage of a user interface. It serves an ergonomic purpose as it defines the zones and components that the interface must have.Wireframes are either rough sketches drawn on paper or screens created in an app like Figma, Adobe XD or Sketch, that give a basic example of what the user interface is going to look like, without all the bells and whistles.
Understanding UI design, wireframing and Figma through Spotify
The application that I chose for the case study is Spotify. Coming from a musical background, it seemed like a logical choice because I use the app every day on multiple devices and I also enjoy the simple and sober UI. This allowed me to take a closer look at how Spotify’s design makes navigating the app feel like second nature and what constitutes the kind of UI design I like using so much.
The user flow I chose to study inside the app is the one the user will experience when going from the Home Page to the Now Playing screen in the context of looking for a specific playlist to listen to.
Here is said User Flow:
The first screen is the Home Screen, consisting of a greeting, 6 rectangular cards for the albums/playlists the user has recently been interacting with, a “Recently played” title along with 3 more images (squares for albums and playlists, and ellipses for artists) representing content they’ve recently listened to. At the bottom of the page, just above the permanent triple icon navigation bar (for quick access to the Home page, the Search function and the Library page) is an accordion that, when clicked, opens up to the Now Playing screen so the user can jump back into what they were last listening to.
The second screen shows how the user gains access to their library (and thus their playlists): by clicking on the Library icon in the navbar. When on the Library screen, the user swipes down at the top to reveal the search bar, inputs the name of the playlist and clicks on the Filters button to search.
I didn’t include the swipe down interaction so as not to make things too complicated to wireframe. The wireframes were made under the assumption that the search bar is always visible.
The application then redirects to the playlists’ screen. All the user has to do to play the playlist is either press the green Shuffle Play button or select a song in the playlist to be taken to the updated Now Playing screen.
Here are the wireframes I created :
To create these wireframes, I used the Ironhack wireframe kit without wandering too far from it. I decided to give myself that limitation because I realised that I spent a bit too much time on the last challenge and wireframing, as user sketching, is not supposed to be a perfect replica. It’s a quick way of showing clients or collaborators the general gist of what the final product will look like. I did, however, need to use FlatIcon to find a couple of specific music-related icons (like the shuffle icon).
This challenge was particularly formative as I was able to progress in a few different aspects. First, I was able to learn how to breathe a little and not spend days and days on something that’s supposed to be quick because not everything has to be 100% perfect when you’re learning. I was also able to learn and see first hand the importance of wireframing and figure my way around Figma at the same time. Finally, I was able to take a closer look at a certain kind of UI design and reflect on why I like it for its’ aesthetics but also its’ UX.
