Prototyping and Iterative Design

Active learning works for prototyping and iterative design because students must experience the discomfort of testing unfinished ideas and the satisfaction of improving them. By handling materials and seeing peers respond to their work, they grasp why quick, rough drafts beat polished but untested designs in real software projects.

• Grade 10
• Computer Science
• 4 activities
• 20 min–45 min

Learning Objectives

1. Create low-fidelity and high-fidelity prototypes for a proposed software solution using specified tools.
2. Evaluate the effectiveness of paper prototypes versus digital wireframes for gathering user feedback.
3. Analyze user feedback to identify areas for improvement in a software prototype.
4. Explain how iterative design cycles contribute to the refinement and success of a software product.

Project-Based Learning

⏱ 35 min·Pairs

Pairs: Paper App Prototype

Students pair up and sketch a paper prototype for a simple app solving a class-chosen problem, like a study planner. They role-play users navigating screens by flipping pages, note pain points on sticky notes, then iterate the design twice based on partner feedback. Pairs present final versions to the class.

Prepare & details

Construct a prototype (paper or digital) for a proposed software solution.

Facilitation Tip: During Paper App Prototype, circulate with guiding questions like 'What problem does this screen solve?' to keep pairs focused on user goals rather than aesthetics.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 45 min·Small Groups

Small Groups: Digital Wireframe Cycles

In small groups, students use a free tool like Figma to build a low-fidelity wireframe of their app. They conduct two feedback rounds: first with another group, then revise into a high-fidelity version. Groups demo changes and explain iteration decisions.

Prepare & details

Evaluate the effectiveness of different prototyping methods for gathering user feedback.

Facilitation Tip: In Digital Wireframe Cycles, set a strict 15-minute timer for each wireframe version to prevent over-refinement before testing.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 25 min·Whole Class

Whole Class: Feedback Carousel

Display all prototypes around the room. Students rotate every 5 minutes, leaving anonymous feedback on sticky notes about usability. After rotations, creators review notes and plan one iteration, discussing as a class how feedback drives design.

Prepare & details

Explain how iterative design cycles lead to improved product outcomes.

Facilitation Tip: For Feedback Carousel, post the rotation schedule where everyone can see it to reduce transitions and maximize peer discussion time.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 20 min·Individual

Individual: Iteration Portfolio

Students document their prototype evolution in a digital portfolio: initial sketch, feedback summary, revised version, and reflection on improvements. They self-assess against criteria like user feedback integration, then share one key insight with a partner.

Prepare & details

Construct a prototype (paper or digital) for a proposed software solution.

Facilitation Tip: When reviewing Iteration Portfolios, look for evidence of multiple versions and dated notes explaining changes to reinforce the iterative mindset.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Teaching This Topic

Teachers approach this topic by treating prototypes as conversation starters, not deliverables. Avoid letting students spend excessive time on visual polish early on, as this distracts from the core skill of testing assumptions. Research shows that students learn iteration best when they experience failure early and often, so design activities that force them to confront incomplete ideas in low-risk ways. Use real-world analogies, like comparing software prototyping to drafting an essay, to help students see iterative design as a standard part of creating anything valuable.

What to Expect

Successful learning looks like students confidently explaining why a messy first sketch often leads to a better final product. They should articulate how feedback loops shape their work and adjust prototypes based on clear, actionable input from others.

Watch Out for These Misconceptions

Common Misconception

During Paper App Prototype, watch for students insisting their sketches must look 'professional' before sharing them for feedback.

What to Teach Instead

Redirect them by asking, 'Which parts of this sketch would you want a user to see first?' and remind them that the purpose is to test the flow, not the drawing skills. Point to the example of sticky note flows used by professional designers to normalize rough work.

Common Misconception

During Digital Wireframe Cycles, watch for students treating high-fidelity tools as a first step rather than a later validation stage.

What to Teach Instead

Stop the group and ask, 'If we tested this wireframe tomorrow, what feedback would we get?' Use their answers to show how low-fidelity prototyping catches bigger issues earlier, saving time before adding colors or fonts.

Common Misconception

During Iteration Portfolio, watch for students only making changes at the end of the process.

What to Teach Instead

Ask them to point to specific feedback they received after each prototype version and how it led to a change. If they can’t, have them revisit their notes and add missing reflections to practice recognizing iteration as continuous improvement.

Assessment Ideas

Quick Check

After Paper App Prototype, collect each pair’s sketch and their two user feedback questions. Assess whether the questions target the prototype’s main flow and potential usability issues, not just visual details.

Peer Assessment

During Digital Wireframe Cycles, have partners exchange prototypes and use a simple rubric to assess clarity of user flow and usability issues. Collect the rubrics to check if peers identified at least one specific change for the designer to implement.

Exit Ticket

After Feedback Carousel, ask students to write one sentence comparing low-fidelity and high-fidelity prototypes based on what they observed in others’ work during the carousel.

Extensions & Scaffolding

• Challenge early finishers to create a third prototype version that incorporates feedback from at least two different user groups, documenting the changes in their portfolio.
• Scaffolding for students who struggle: Provide a pre-labeled template for their first paper prototype with clear sections like 'Home Screen' and 'Action Button' to reduce cognitive load.
• Deeper exploration: Have students research a well-known app’s redesign process (e.g., Google Maps) and compare its original prototype to the current version, noting how feedback shaped the changes.

Key Vocabulary

Prototype	A preliminary model of a product, used to test concepts and gather feedback before full development. Prototypes can range from simple sketches to interactive digital mock-ups.
Low-Fidelity Prototype	A basic, often hand-drawn or wireframe-based representation of a product's interface and flow. It is quick to create and useful for early-stage idea exploration.
High-Fidelity Prototype	A detailed, interactive simulation of a final product that closely resembles the look, feel, and functionality of the intended software. It is used for more in-depth user testing.
Iterative Design	A design process that involves repeated cycles of designing, prototyping, testing, and refining. Each cycle aims to improve the product based on feedback and analysis.
User Feedback	Information and opinions gathered from potential users about a product or prototype. This feedback is crucial for identifying usability issues and guiding design improvements.