WIREFRAMING : Zara Home APP

Wireframes give a simple visual representation of how the flow of the app or website you are creating will be. The key word here is simple; which is why wireframes should be done in black and white and with just enough detail for them to be understood by someone else, without distracting from the goal (creating the skeleton of your interface).

I present you the second challenge given by Ironhack which concerns UI Design: Wireframing. I chose the Zara Home application for this new subject.

Zara Home is an e-commerce application offering furniture and decorations for the home. You can order on the application, discover the latest trends for the home, their catalogues and brand information.

I made this choice because we use more and more E-commerce applications for various purchases.
I find it interesting to understand how the skeleton of this type of application works. This study will allow me to better understand the intuitive experience for the user and will help me to complete tasks, efficiency and satisfaction.

I took 6 screen shots of the Zara Home application and then adapted them into wireframes that will look like a skeleton made of wires of what the actual content will be. This journey which consists of understanding the path from point A : product choice to point B : product purchase.

I draw the user flow in lo-fi wireframe and then adapt it virtually.

IT CONSISTS OF :
- A home page > we find in the home page a header with an Input Controls and a footer. There are various categories: promotions, novelties …
- A drop-down menu > A drop-down menu that includes different categories and sub-categories allowing a wide choice and multiple paths to a specific section.
- 1 category page > We can see the products in the selected category. Several options are available such as a filter button or more colours…
- 1 product page > We have the detailed product material, price, colours. We can put it in the basket, our favourites, our downloads or go back.
- 1 shopping cart page > We find all our purchases made with the necessary information to finalise our order. There is an additional feature which is the Chat button.

For my wireframe I used the Figma application which allowed me to lay out my wireframes.

This application allows to create an interactive wireframe where the user can interact directly with the prototype and test the product.

My experience with wireframing :

I discovered a new tool and a new way of working which fascinated me.
Indeed, this application not only allows you to prototype several interfaces and to be able to animate them in order to test and optimise the user’s experience.
I learned the world of wireframing which is essential to create a solid structure for a mobile application or a website.
I particularly appreciated the possibility offered by the Figma software to prototype a project so simply.

I still have a lot of knowledge to acquire because it is a universe that is in perpetual development.