Ironhack’s Prework Challenge 2: Wireframing Amazon

I n this second challenge our task is to “reverse engineer” and I have to create a wireframe version of the user flow from any app of my preference based on screenshots to finally complement this task with a prototype.

When we are creating wireframes the goal is to focus on functionality, behaviour, how to display certain information and prioritize content. 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

Amazon app Logo

For this challenge, I chose Amazon app because I use it very often and I think it is very easy to use. The interface is very simple, which makes the navigation experience to be very confortable. Moreover, the application has several functionalities that further enhance the purchase process. For example the suggestions the app makes based on your previous searches helps you saving searching time and the rating based on other buyer’s experiences is very helpful to choose a product over another.

The purchasing process is the most critical path for an e-commerce, from the moment a user is looking for a product until the purchase has been completed. The process in Amazon app is very smooth and works very well, that is why it is the flow I selected.

The flow starts when a regular user launches the app for the first time:

  1. First, the user has to select between three different options: “¿Ya eres cliente? Iniciar sesión”, “¿Eres nuevo en Amazon?Crea una cuenta” or “Proceder sin identificarse”. For this flow, I have selected the first one so then the email and password is required;
  2. Next, the app redirects the user to the home page and in the searching bar he/she can start typing the desired product, in this case UX Design;
  3. Then, the application will suggest several options while typing. He/she can click on “enter” or select any of the app’s suggestion;
  4. After this, a list with the results will be shown so the user must do scroll up and down to choose any of the results and click on it;
  5. Once selected, in the next page, the user must check the selected product, the price, select also the number of items and click on “Comprar ya”;
  6. The he/she must drag the button to the right where “Arrastre para comprar ahora” says to complete the purchase process;

The user has already purchase the item!

Wireframe and prototype

Note: you can scroll down to find more information and buttons at the bottom

Key learnings

Working on this process I have realized how close and at the same time how separated are the aesthetical part from the functional part in an interface. The first one is really important but if you don’t have a strong skeleton, with all the possible flows well tied, the beauty of the app is of little value. Thus, this work showed me how important this design stage is.

Keeping the most important information and omitting the rest has been one of the hardest part to me in this work, but at the same time, the funniest. It has been a great exercise not to go to the detail and focus on the truly important, but I really enjoyed it!

Figma itself has been another challenge! It took me some time to get used to it but the more I learn about it, the more powerful seems to me. On more than one ocassion I looked for video tutorials and articles to know how to proceed and they have been really useful to deeper learn about this program.

Thank you for reading!

On the way of being UX researcher and UX/UI design student at Ironhack