Ironhack’s prework challenge 2: wireframing — ZARA app

My new challenge today is to “reverse engineer” a popular app Interaction Design and User Flow; which means to create a wireframe version of the user flow of the chosen app based on screenshots.

I always found ZARA app being the perfect e-shop app! I never faced any issue using it, whether I was looking for a certain product or just browsing. The interface is very smooth and clean, very comfortable to use. Even managing orders or returns is easy. I find the app so efficient that I tend to avoid it because I tent to buy something every time I opened it… (curious to know what their conversion rate is!)

Wireframes of a buying journey

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 first thought about what users usually do when using ZARA app: browse, search for a particular item, and/or buy, manage orders... The flow that I chose to wireframe is the purchasing experience:

1. starting from the menu on the homepage
2. going through the suggested categories, here “COLLECTION” to access all the collection
3. choosing a subcategory, here “MANTEAUX” to see the coat collection
4. browsing the products list
5. selecting an item to buy, select the size
6. and finally going through the payment process

Wireframe and prototype

ZARA app screenshots: purchasing journey

Wireframes of the above screenshots

Prototype

Key learnings

In this wireframing process, I found difficult to weigh the importance/detail of the information to put, especially the labels: what needs to be part of the wireframe or not, to avoid influencing or sidetracking the conversation from important design decisions at this stage in the design process. So, I decided to name some labels to clearly communicate the flow I chose to explore, especially for the navigation on the prototype.

It is much easier to forget about the aesthetic, and focus on the visual presentation. However, I tried to keep a certain consistency in the blocks sizes and colors for example to make it “readable” for the users.

Still, it took me more time than expected! It reveals how important this design stage is, as it is easy to undo and amend. Also, I realized that grouping elements and naming layers are crucial!! I can’t wait to practice more now that I’m a bit more comfortable with Figma.

Thank you for reading, I’d love to see your comments!