IronHack’s challenge 2 : Wireframes & Prototypes
Here we go again for the next step of ironhach’s prework: wireframing and prototyping! 💪
The purpose of this challenge is to ‘reverse engineer’ the one popular app Interaction Design and User Flow. And for that, we must create a wireframe and a prototype of an app of our choice. But first of all…
What are they? 🧐
A wireframe is a visual representation of an app or mobile. The purpose is to show the constructions of your future app so forget about lovely details, colors and pictures here (even it could be tempting to jump some steps)… For now, you need to structure elements: choose the important ones and simulate them by different shapes. Each shape have a fonction (i.e. square for icons, line for text…). Think of the wireframe as a skeleton of your future app.
Otherwise, a prototype is a simulation that can be tested by other people, even if it’s not the finale version. If the wireframe is the skeleton, the prototype can be like the muscle and ligament which are linked together — like the anatomic model we had in our science lab!
— My project: Zara’s wireframes and prototype —
I used to work in fashion before starting in UX-UI Design, so as a reflex, I chose a fashion app. When I was a fashion designer, we had to do competitive intelligence in order to always be aware of new trends, new brands…
Zara is the fast fashion leader: always number one on the trends with a huge choice and affordable prices. Real « guru » for the fashionistas, unmissable for every fashion professionnal, we had a look at their website every single day to find inspiration. All the fashion brands try to imitate Zara, at every levels: fashion items, models, pictures… and website as well.
My co-workers and I always found it very beautiful: easy, clean, intuitive, sober… organized to highlight the beauty of pictures and give us the desire to buy articles. 💸
It was the perfect time to dissect it for this 2nd challenge!
I worked on a purchase path and took screenshots at each step, as if I was spending my money to buy new trendy clothes.
First of all, I’ll say that I’m proud of me for having not listen to my CB’s voice and kept my money while I was on the app.
I also really enjoyed working on Figma (even if the beginning were difficult — since I don’t have a iPhone or android — and find the right measure for mine was a little bit hard 😅)
The most challenging part is for me to test the prototype because it reveals your possibles mistakes and you have to fixed those. Reproduce a frame is « easy » when you just follow the structure of element, but when you want to make connexion between them to simulate the prototype, it’s not the same lvl of difficulty. I clearly understand the test and iterate part of design thinking, especially when I made preview of my prototype which is the most playful thing because of the interactions between the screens.
I assume I will love when it will become a real app, or at least high-fid prototype.😊 I’m pretty excited of how much I have to discover and learn!
Thank you for reading me and feel free to share your thoughts!
⬇️ Here’s the link of my figma prototype ⬇️