Wireframing: my 2nd Challenge at Ironhack

Hi again! In this second challenge of my Pre-work at Ironhack Berlin, I have started exploring the fascinating world of Figma and wireframing.

My assignment here was to choose an app I like, create wireframes and show a user flow. Wireflows are used in UX design to demonstrate the steps a user will take to complete a task.

Since I am re-decorating my room and have been using a lot of furniture/home decor apps lately, I have decided to work with the Zara Home app.

App Homepage — Zara Home

The flow I have created shows the actions of a user wanting to buy a vase. In order to complete this task, he/she would need to go through 6 steps:

• Click on the Burger Menu and Select a category (in our case LIVING ROOM)
• Click on the Category LIVING ROOM
• Select the Sub-category VASE
• Go through the Catalogue
• Click on the Product (to open the product page)
• ADD the product to the Shopping Bag.

The following sketches will give you a first rough idea of how the app will look like, the user flow and the screens he/she will navigate in order to insert a product in the Shopping Bag

Lo-fi wireframes — from the Home screen to Shopping Bag

I have re-created the same user flow using Figma and UI Kits elements. Even though the design is still quite simple at this stage, it gives you a better idea of how the final product will look like.

Zara Home screens + Wireframes

This was my first time using Figma and I have enjoyed it very much!

I have probably used too much real text, especially in the second and third screen… but it was necessary to show that the content of the pages is different (Category and Sub-category) and that the user will have to go through both of them in order to get to the product page.

I will end this post saying that wireframing is fun! What I would need to do is to improve the Organization of the layers (you don’t see the chaos in the image above, but I see it in my account… 😱 ) and to buy a bigger screen (my eyes hurt from how much concentration I had to put into all those little details)! Then, I am ready to become a Figma-Pro!

Before you leave, make sure you also check the prototype I have made here.

Thank you for reading,

Sara