Ironhack Berlin

Challenge 2: Wireframing

For this second challenge, I chose the Zara app to “reverse ingeneer” it with Figma.

Tatiana Henriquez
2 min readJan 9, 2022

--

Using Figma, my task was to create a wireframe version of the User Flow of an app of my choosing based on screenshots or high-fidelity prototype screens.
Out of all the apps I constantly use, the Zara app is my favorite one, it’s minimalist, elegant and their photography is more often than not just breathtaking.

The User Flow or Happy Path I chose was “Save Item”, these are the high fidelity clones I made as a previous challenge:

The tasks required were the following:

  • Create a lo-fi user flow based on 5 or more screens.
  • Describe the task analysis of the flow you choose to work with.
  • Wireframe the screens using wireframe kits and put together a prototype using Figma.
  • Remember to group and rename your layers so you keep your document organized.
  • Think about which text labels are important, and which text should be replaced with phony text (google: lorem ipsum).
  • Think about which visual elements need to be there and which don’t (logos, icons, maps, buttons) in order to communicate the idea efficiently.

Lo-fi Wireframing:

Happy Path is “Save Item”

The app is easy to navigate thanks due to its simplicity.
The first screen new users will come across is the request to drop them cookies. After accepting it, they will be taken to the Home screen where feature stories will be highlighted, which can be new drops, sales, seasonal collections. Currently Zara is in winter sale season.
The users will directly navigate through the featured highlights, or via the Menu. Then they will select the category of their preference, explore the collection and Save their favorite items to buy later.
The save option can be made directly from the catalog, or after expanding the item.

What I found a little bit challenging was figuring out which text not to remove, specially the buttons, they all felt important to me but in the end I only kept the “Menu” as a flow start.
The program was easy to handle since it has many similarities to Adobe Illustrator. I particularly liked the plugin feature and downloaded a few to play around with them. :)

--

--