E-commerce and Marketplace Prototypes

# CHAPTER 12

E-commerce and Marketplace Prototypes #

1. Introduction #

In a B2B SaaS application, users are generally forced to use the software by their employer. In E-commerce, the user is a volatile consumer who will abandon their shopping cart the exact millisecond they experience a moment of friction or confusion. A 1% drop in conversion rate due to a clunky prototype flow can equate to millions of dollars in lost revenue. In this chapter, we will master E-commerce and Marketplace Prototypes. We will engineer the high-stakes interactions of the Product Detail Page (PDP), simulate the complex filtering logic of Faceted Search, and build the modern, frictionless "Cart Flyout" and "Enclosed Checkout" flows designed specifically to eliminate cart abandonment.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Prototype a dynamic Product Image Gallery (Thumbnails to Main Image).

• Simulate "Faceted Search" checkbox filters for massive inventories.

• Build the "Cart Flyout" interaction using Figma Overlays.

• Architect an "Enclosed Checkout" flow to trap user focus.

• Test psychological urgency features (e.g., Stock indicators).

3. The Product Detail Page (PDP) Interactions #

The PDP is the conversion engine of e-commerce.

• The Image Gallery: A massive main image, with 4 small thumbnails below it.

• *The Prototype Logic:* You create an Interactive Component for the entire gallery. You create 4 variants (one for each main image). You wire thumbnail #2 to Change To -> Variant 2. When the user clicks the small thumbnail, the main image instantly swaps.

• Variant Selectors (Color Swatches): When the user clicks the "Red" circle, the primary product image component must Change To the Red shoe variant, proving to the user their selection was registered.

4. Faceted Search (The Left-Hand Filters) #

If a user searches "Shoes," they get 5,000 results. They need to filter by Size, Brand, and Price.

• The Checkbox Logic: Create Interactive Checkbox components (Chapter 7).

• The Flow Illusion:

• Frame 1: Shows 10 random shoes.

• User clicks the [Size 10] checkbox.

• Figma wires On Click -> Navigate To -> Frame 2.

• Frame 2: The [Size 10] box is checked, and the product grid now only shows Size 10 shoes. This tests if the user understands the taxonomy architecture of the store.

5. The Cart Flyout (Never Leave the Page) #

*The Old UX:* User clicks "Add to Cart." The site violently redirects them to a dedicated /cart page. They have to click "Back" to keep shopping. *The Modern UX:* The Cart Flyout.

• The Logic: User clicks [Add to Cart] on the PDP.

• Wire: On Click -> Open Overlay -> [CartDrawerComponent].

• Set the overlay to slide in from the Right Edge. Check Add background behind overlay (20% black) to dim the main site.

• The drawer shows the subtotal and a massive [Proceed to Checkout] button. If the user clicks the dim background, the drawer closes (Close overlay), and they are exactly where they left off, preserving shopping momentum.

6. The Enclosed Checkout Flow #

Cart abandonment is the ultimate enemy. Once the user clicks "Proceed to Checkout," you must trap them.

• Enclosed Architecture: The Checkout frames in your prototype must *remove* the Top Navigation Bar, the Mega Menus, and the Footer links.

• *The Psychology:* There are no distractions. There are no links to click except "Back" or "Enter Credit Card."

• The Order Summary: Prototype a fixed, sticky sidebar on the right side of the checkout screen that constantly displays the total price, including simulated tax and shipping. Unexpected costs at the final step are the #1 cause of abandonment.

7. Diagrams/Visual Suggestions #

*Visual Concept: The Cart Flyout Interaction* Provide a 2-panel visual.

• Panel 1 (The Trigger): A Product Page. A mouse cursor is clicking a massive blue [Add to Cart] button. A prototype arrow points to Panel 2.

• Panel 2 (The Action): The Product Page is dimmed dark gray. A white vertical drawer has slid in from the right edge of the screen, displaying the item, the Subtotal ($120), and a [Checkout] button.

This perfectly illustrates modern, frictionless retail UX.

8. Best Practices #

• Micro-animations for Add to Cart: When a user clicks "Add to Cart," the button itself should briefly change to a loading spinner (200ms), then to a green checkmark [Added!], and *then* the Cart Flyout should open. This creates an undeniable chain of tactile assurance.

9. Common Mistakes #

• Dead End Empty Carts: A user clicks the Cart icon in the top right, but they haven't added any items yet. *The Failure:* The Cart Flyout opens and is just completely blank white. *The Fix:* Always prototype the "Empty Cart State." The drawer opens, shows a sad shopping bag icon, says [Your cart is empty], and provides a massive CTA button: [Continue Shopping].

10. Mini Project: Build an Image Gallery Component #

Let's engineer a core E-commerce interaction.

1. 1. The Assets: Find 3 images of the same shoe (Side view, Top view, Bottom view).

1. 2. Variant 1: Draw a massive square (Main Image). Place the Side View image inside. Below it, draw 3 small square thumbnails (Side, Top, Bottom). Select all and create a Component. Add a Variant.

1. 3. Variant 2: Change the Main Image square to the Top View. Add a blue border around the Top View thumbnail to show the active state. Add a Variant.

1. 4. Variant 3: Change the Main Image square to the Bottom View. Add a blue border around the Bottom View thumbnail.

1. 5. The Wiring: Inside the Component set, wire Thumbnail 2 in Variant 1 to Change To -> Variant 2. Wire Thumbnail 3 to Change To -> Variant 3.

1. 6. The Test: Drag the component onto a frame. Hit Play. Click the tiny thumbnails. The massive main image instantly swaps to the correct angle. You have built a production-ready PDP gallery.

11. Practice Exercises #

1. 1. Define the architectural concept of an "Enclosed Checkout." Why must a UX designer explicitly remove the primary website navigation links from the prototype once the user enters the payment flow?

1. 2. Explain the UX superiority of the "Cart Flyout" (sliding drawer) interaction compared to aggressively redirecting the user to a dedicated, separate Cart Page every time they click "Add to Cart."

12. MCQs with Answers #

13. Interview Questions #

• Q: A client wants to hide the "Shipping and Tax Calculations" until the absolute final screen of the checkout prototype to make the initial price look cheaper. Walk me through the statistical and psychological reasons why you must aggressively reject this request.

• Q: Explain the mechanical Figma logic required to build a functioning Product Image Gallery where clicking a tiny thumbnail instantly changes the massive hero image above it.

• Q: Walk me through your User Testing strategy for "Faceted Search" filters (e.g., Size, Color, Price checkboxes). Since you cannot query a real database in Figma, how do you simulate this complex filtering flow for a test participant?

14. FAQs #

Q: Do I need to prototype a payment gateway (like Stripe)? A: You do not need to build a fully functioning credit card validator. However, you MUST design the visual layout of the credit card form exactly as it will look (Card Number, MM/YY, CVC) to ensure the spacing and labels fit within your layout constraints. A simple "Pay Now" button wired to an "Order Confirmed" screen is sufficient for UX testing.

15. Summary #

In Chapter 12, we engineered the digital retail environment, ruthlessly optimizing for momentum and conversion. We mastered the tactile interactions of the Product Detail Page, utilizing Component Variants to build instant-swap Image Galleries and dynamic Color Swatches. We managed inventory chaos through simulated Faceted Search flows. We abandoned the high-friction redirects of the past, utilizing Figma Overlays to construct elegant Cart Flyouts that preserve the shopper's psychological momentum. Finally, we armored the revenue pipeline by Enclosing the Checkout, trapping user focus and eliminating the catastrophic friction of cart abandonment.

16. Next Chapter Recommendation #

Our interactions are fast, fluid, and profitable. But can *everyone* use them? What happens when a user cannot use a mouse, or cannot see certain colors? Proceed to Chapter 13: Accessibility in Prototyping.