Ironhack’s Prework — Challenge 2: Wireframing

Our challenge was to reverse engineer the Interaction Design and User Flow, and that is exactly what I did. We could choose any app and I could not wait to work on one of my favorite apps, Spotify. Seriously, I use this every day! The mobile application’s interface is hands down the of the feature that first drew me to using the app. It is the visual design Spotify offers allows its user to interact with its functions.

An important part of the web design process is wireframing. Wireframing is what the structure of the page is going to be and how to organize the content. In this step there is no need to create design guideline like colors, type or even shape. It’s all about organization of the information.

Stage 1: Lo-Fi Sketch

Sketching an already created app allows you to see what information is being organized. This quick concept summarizes the general content that needs to go on the page.

Some factors to add to the sketches are:

• Headers
• Type hierarchy
• Images of the albums
• Descriptions allows for background information
• Buttons for call to action

Stage 2: Mockup Design on Figma

Mocking up the design allows to view the structure of the page. By keeping it simple, in design aspects, this allows you to focus on the arrangement of information. It’s important to keep only the essential elements of the app and to simplify the structure.

Below are some screenshots of the Spotify and wireframes.

Learned

During the sketch of the design process, I have found that when you get your ideas out rapidly it helps with coming up with new ideas. Another factor that came up was thinking about new, and innovated was to arrange the information on the page. For sketching, I like to draw on my iPad. The digital version allows me to refer back to old concepts and is a lot more forgiving when making mistakes.

Once mocking up the designs on Figma, I found that it always gives me more ideas on how to layout out the page in different ways.