IronHack Challenge #2: Wireframing

Pre-work exercise for UX/UI Bootcamp

Simple! Wireframes give a simple visual representation of how the flow of the app or website you are creating will be, they should be done in black and white and with just enough detail for them to be understood by someone else rather than focus their attention on its looks.

The Challenge:

Create a “reverse engineer” from a popular app Interaction Design and User Flow. This app could be any of my choice, so I decided to utilize the NIKE app where you can find a very modern app, easy to navigate and full of the best gear available for sport. You can select the item that you want by code or photo, gender, trends or even see you all time favorites.

I decided to analyze the app flow from the moment where the user open the app and have the impression of the moment where the user decide to shop one item from the favorite list.

I started with by drawing the user flow in lo-fi, where pen and paper takes the most important role.

After I achieve the result that made happy, I’ve then created a hi-fi wireframing, with Figma, one of the many programs available.

To test the flow of the wireframes I also built the interactive prototype that you can see here.

Final Thoughts:

This challenge made me understand the importance of wireframes when you prepare yourself to create a new design. There is many thing to take onboard when you start developing your idea and you should keep it as simple as possible in the beginning stage without losing too much time and effort detailing something that may change along the process, this will also help you focus what is actually important, the flow and user experience.

I really enjoyed this experience