Search for the Right Document
< All Topics
Print

Prototyping Session Example: E-Commerce Website

Date: [Insert Date]
Facilitator: [Your Name]
Participants:

  1. Product Manager
  2. UX/UI Designer
  3. Marketing Specialist
  4. Three potential end-users (customers)
    Tools Used: Figma (for wireframes and interactive prototypes), Laptop, and Projector (if in-person)

Objective

  1. Present low-fidelity wireframes of the e-commerce website to stakeholders and potential users.
  2. Collect feedback on the layout, navigation, and key features.
  3. Refine and improve the design based on user input.

Prototyping Approach

  1. Create Low-Fidelity Wireframes
    • Designed a simple, clickable prototype using Figma.
    • Focused on key pages: Home Page, Product Listing Page, Product Detail Page, Shopping Cart, and Checkout Page.
    • Emphasized layout and navigation, leaving detailed design elements for later iterations.
  2. Set Up the Prototyping Session
    • Invited participants to join an interactive session to review and test the prototype.
    • Prepared questions and scenarios to guide participants through the prototype.

Session Agenda

  1. Introduction (10 minutes)
    • Welcome participants and explain the purpose of the session.
    • Provide a brief overview of the e-commerce website and what features the prototype will cover.
    • Set expectations: The prototype is a rough draft to gather feedback, not a polished final product.
  2. Walkthrough and User Testing (45 minutes)
    • Scenario 1: Finding a Product
      • Task: Ask participants to use the Home Page to navigate to the Product Listing Page and find a specific product.
      • Questions: “Was it easy to find the product you were looking for? Did the layout make sense?”
    • Scenario 2: Viewing Product Details
      • Task: Instruct participants to click on a product to view the Product Detail Page.
      • Questions: “Is the information presented clearly? Is there anything you would expect to see here that is missing?”
    • Scenario 3: Adding an Item to the Cart
      • Task: Have participants add a product to the shopping cart and review their items.
      • Questions: “Was it clear how to add items to the cart? Did the cart layout make sense?”
    • Scenario 4: Checking Out
      • Task: Ask participants to proceed to the Checkout Page and simulate completing an order.
      • Questions: “Were there any confusing steps in the checkout process? Do you have any suggestions to make this easier?”
  3. Collect Feedback (30 minutes)
    • Discuss what participants liked and disliked about the prototype.
    • Ask open-ended questions like, “What features or options do you think are missing?” and “How would you improve the navigation?”
    • Take notes on common pain points and suggestions for improvement.
  4. Wrap-Up and Next Steps (5 minutes)
    • Thank participants for their time and valuable feedback.
    • Explain how their input will be used to improve the design.
    • Discuss the timeline for the next iteration of the prototype and potential follow-up sessions.

Key Feedback and Insights

  1. Home Page: Users found the featured product carousel useful but suggested making the search bar more prominent.
  2. Product Listing Page: Participants requested better filtering options and clearer product images.
  3. Product Detail Page: Users wanted more detailed product descriptions and the ability to zoom in on images.
  4. Shopping Cart: Participants liked the cart summary but asked for an option to save items for later.
  5. Checkout Page: Users found the checkout process straightforward but suggested adding a progress indicator (e.g., “Step 1 of 3”).

Action Items

  1. Adjust the Home Page layout to make the search bar larger and more prominent.
  2. Add more robust filtering options to the Product Listing Page.
  3. Enhance the Product Detail Page with zoomable images and more product details.
  4. Implement a “Save for Later” feature in the Shopping Cart.
  5. Design a progress indicator for the Checkout Page to improve user experience.

Follow-Up

  • Refine the prototype based on feedback and prepare a high-fidelity version for the next session.
  • Schedule a follow-up prototyping session to test the updated design.
Table of Contents