Challenge 2 — Ironhack’s Prework: Wireframing
For this Second Challenge of the IronHack Bootcamp — São Paulo, I had to create a Wireframe from an application that I’ve been used in a previous exercise. The app I am working on is from a brazilian shoes brand called “Schultz”.
The main reason behind my choice for this specific app was it usability and also about it’s minimalist black&white and variations of gray design, which gives to the products all the protagonism.
I do appreciate the simple manner how the application structured it content and the use of bold typography to highlight important things such as price and the name of screen that you are. Besides that, the use of icons to simplify texts works nicely and provides a very friendly interaction.
Using this app is very easy and clear, I don’t have any issues to procede until the “check out page”. The flow I used in this app was:
Screen 01: App first page > categories ( second icon on the bottom ).
Screen 02: New in (after select this categorie, appears a list) > Choose in the list “See all products”.
Screen 03: Clic on the product that you want to see.
Screen 04: View the product chosen in detail and with all information about it > buy it.
Screen 05: Proceed to checkout.
To get used with wireframing, I first hand sketch it in low-fidelity, adding also the flow that I am using.
To understand it’s functionalty more in detail I had to create a mid-fi Wireframe and the program that I choose to use was Figma.
Feel free to check out my Figma prototype here.
What I’ve Learned from this Challenge:
The process analysis and wireframe an app that I alredy uses, makes me understand as a future Ux/Ui designer how essencial it is to be able to filter which information is helpful to the user and which ones are not and also how to delivered it.