From Search to Checkout: Wireframing the Amazon Shopping Flow

From Search to Checkout: Wireframing the Amazon Shopping Flow

Challenge 2 — Wireframing · AI-Driven UX/UI Design Bootcamp · Ironhack Prework

Why Wireframing?

Before a product becomes beautiful, it has to become clear.

Wireframing is the art of stripping a digital interface down to its bare skeleton — no colors, no images, no styling. Just structure, flow, and intent. The goal is simple: communicate how an app works without getting distracted by how it looks.

This is harder than it sounds. As a designer, the temptation to make things look good is always there. Wireframing teaches you to resist that temptation and focus on what truly matters: does the user understand where they are? Do they know what to do next? Can they complete their task without confusion?

Why I Chose Amazon

I chose Amazon for this wireframing challenge for three reasons.

First, I know it well. After three years working at Amazon Germany, I have used this app hundreds of times — as an employee, as a customer, and now as a UX/UI design student analyzing it with fresh eyes.

Second, the shopping flow is one of the most universal and well-studied user flows in digital product design. Every e-commerce app in the world is, in some way, inspired by or reacting to Amazon’s purchase flow.

Third, the flow is complex enough to be interesting but simple enough to wireframe clearly in 6 screens — making it a perfect subject for this exercise.

The Flow I Chose

I focused on the core “Happy Path” — the most direct route a user takes to complete a purchase:

Home → Search Results → Product Detail → Cart → Checkout → Order Confirmation

This is the flow that millions of users complete every day. It covers the most critical interaction design decisions in e-commerce: how do users find what they want, how do they evaluate it, and how do they commit to buying it?

The Wireframing Process

Step 1 — Reverse Engineering

I opened the Amazon app on my phone and analyzed each screen carefully. Instead of looking at colors or images, I asked myself:

• What are the key elements on this screen?
• What does the user need to see to make a decision?
• What actions are available to the user?
• What is the most important element on this screen?

This process — starting from a finished product and working backwards to understand its structure — is called reverse engineering. It is one of the most powerful learning tools available to a new designer.

Step 2 — Identifying UI Elements

For each screen, I made a mental inventory of the UI elements present: navigation bars, search bars, filter pills, image placeholders, text hierarchies, buttons, quantity selectors, toggles, price displays, and order summaries.

Step 3 — Building in Figma

Using the Ironhack Wireframe Kit and Figma, I built each screen following strict black and white rules. All images were represented as rectangles with a diagonal X. All non-essential text was replaced with Lorem ipsum. All essential text — prices, button labels, titles — was written clearly.

Step 4 — Connecting the Prototype

Once all 6 screens were complete, I connected them in Figma’s Prototype mode, creating a fully interactive clickable prototype.

The 6 Wireframe Screens

Screen 1 — Home

The entry point. Navigation bar with logo and key icons, a prominent search bar, category row, hero banner placeholder, and a product grid.

Screen 2 — Search Results

Filter pills, results grid with product cards showing image placeholder, title, and price.

Screen 3 — Product Detail

Large product image, title, rating, price, Prime delivery info, and two CTAs: “Add to Cart” and “Buy Now.”

Screen 4 — Cart

Selected item with image, title, price, quantity selector, subtotal, and “Proceed to Checkout.”

Screen 5 — Checkout

Item summary, pricing breakdown, shipping info, and the final “Buy Now” CTA.

Screen 6 — Order Confirmation

Large checkmark, order placed message, tracking info, “Continue Shopping” and “Share” buttons.

What I Learned

1. Structure is everything. When you remove color, images, and styling, what remains is pure structure. If the structure is clear, the design works.

2. Reverse engineering is a superpower. Looking at a finished app and asking “how was this built?” develops your design eye faster than any tutorial.

3. Black and white is liberating. Not being allowed to use color forces you to communicate through layout, size, and typography alone.

4. The happy path reveals the design intent. Focusing on the most direct route to task completion shows you exactly what the designers prioritized.

5. Wireframing is a conversation starter. A wireframe is not a final product — it is a tool for discussion. That mindset shift is one of the most important things I learned.

This article is part of my UX/UI Design journey — written as Challenge 2 of the Ironhack AI-Driven UX/UI Design Bootcamp Prework.

Figma prototype link: https://drive.google.com/drive/folders/1VZKWNQhgS11Dk2_XGra6FVIUY0UcXQet?usp=sharing

Submit name: Ironhack’s Prework: Cristea George Florin_Challenge2

Tags: UX Design · Wireframing · Figma · Amazon · User Flow · Ironhack · UX Case Study