Prototype

• Prototyping Phase Essentials

  • Core Purpose

    • Create early models to show look/function
    • “Not building final product”
    • Test with users/stakeholders

  • Information Architecture (IA)

    • High-level organization diagram
    • Key Components

      Hierarchy: Topic priority/subordination Sequence: Navigation order “Shows how users move through product”

  • Prototyping Methods

    • Wireframes

      Paper: Quick sketches with basic shapes Digital: 2D designs in UX tools Uses placeholder text/grayscale

    • Lo-Fi Prototypes

      Simple interactive model Basic navigation between screens “Test early before detailed development”

    • Hi-Fi Prototypes

      “Close to final product as possible” Full components/interactivity Realistic content/placeholders Enables complete experience testing

  • Key Considerations

    • Review against earlier phases
    • Check problem statements
    • Verify user needs met
    • “Prototyping and testing are interconnected”

  • Example: Bakery Website

    • Homepage needs clear “Place Order” option
    • Must replicate phone ordering experience
    • Design for Berta’s easy navigation