Prototyping Solutions: Wireframes and Paper Models

Active prototyping teaches students that rough, low-fidelity models are powerful tools for testing ideas early. When students sketch wireframes or fold paper prototypes, they focus on user needs instead of polished details, which builds confidence in iterative design processes.

• Year 5
• Technologies
• 4 activities
• 25 min–45 min

Learning Objectives

1. Design a paper prototype for a chosen digital product, incorporating interactive elements like flaps and fold-outs.
2. Analyze user feedback on a wireframe or paper prototype to identify specific areas for design improvement.
3. Differentiate between essential user interface elements and non-essential decorative elements in a low-fidelity prototype.
4. Explain how creating a wireframe before a digital mockup saves development time and resources.
5. Compare two different paper prototype designs for the same app, evaluating which better meets user needs.

Project-Based Learning

⏱ 30 min·Pairs

Pairs: Wireframe Feedback Rounds

Pairs sketch wireframes for a simple app interface in 5 minutes. Swap sketches with another pair, note one strength and one improvement on sticky notes. Return and revise based on feedback, then present changes to the class.

Prepare & details

Explain how early prototyping saves time in the development process.

Facilitation Tip: During Wireframe Feedback Rounds, circulate with a checklist to note which pairs identify both functional and non-functional elements in their partners’ work.

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: Paper Prototype Challenges

Groups select a user problem, like a school planner app, and build paper prototypes with foldable pages. Test prototypes by role-playing users clicking elements. Record issues and create version 2 with fixes.

Prepare & details

Prioritize user feedback for iterative design improvements.

Facilitation Tip: For Paper Prototype Challenges, set a timer so groups must prioritize one core feature before adding extras, making trade-offs visible.

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

⏱ 35 min·Whole Class

Whole Class: Feature Sort and Prototype

List 10 app features on cards. Class votes to sort into essential and non-essential piles, discussing reasons. Pairs then incorporate top essentials into quick paper prototypes for peer review.

Prepare & details

Differentiate between essential and non-essential features in a prototype.

Facilitation Tip: In Feature Sort and Prototype, provide colored sticky notes so students physically move elements to show their decisions about must-haves and nice-to-haves.

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·Individual

Individual: Speed Wireframe Sprints

Students individually draw three wireframe variations for the same task in 10 minutes. Select the best, add paper elements, and test with a partner. Note what each version revealed about user needs.

Prepare & details

Explain how early prototyping saves time in the development process.

Facilitation Tip: During Speed Wireframe Sprints, walk around with a timer visible and encourage quick decisions, reminding students that rough sketches are more useful than perfect ones at this stage.

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 should model rough sketching during demonstrations, emphasizing that prototypes are temporary and meant to be changed. Avoid spending time on aesthetics; focus instead on labeling screens and pathways clearly. Research shows that students learn iteration best when they see teachers revise their own quick models in real time.

What to Expect

Successful learning shows when students explain their design choices with concrete examples from their prototypes. They should respond to feedback by revising their models with clear reasoning, demonstrating understanding of user-centered design.

Watch Out for These Misconceptions

Common Misconception

During Wireframe Feedback Rounds, watch for students who focus on making their partner’s wireframe look polished.

What to Teach Instead

Stop the activity and ask the class, ‘What problems did you find by testing a rough sketch?’ Guide them to discuss usability issues uncovered by simplicity.

Common Misconception

During Paper Prototype Challenges, watch for groups trying to include every possible feature in their first model.

What to Teach Instead

Hand each group three sticky notes labeled ‘must-have’ and say, ‘Use these for the features your user truly needs. Save extras for later versions.’

Common Misconception

During Speed Wireframe Sprints, watch for students who erase and redraw repeatedly to make their wireframe perfect.

What to Teach Instead

Ask them to flip the paper over and sketch a new version instead, reinforcing that prototypes should be quick and disposable.

Assessment Ideas

Quick Check

After Wireframe Feedback Rounds, present a wireframe on the board and ask students to write down: ‘What is the main purpose of this screen?’ and ‘What is one element that might be considered non-essential?’ Collect responses to check their ability to identify core functions.

Peer Assessment

During Paper Prototype Challenges, have students pair up and switch roles as ‘user’ and ‘designer.’ The ‘user’ attempts a task while the ‘designer’ observes and asks, ‘What was easy about this?’ and ‘What was confusing?’ The ‘user’ then gives one specific suggestion for improvement.

Exit Ticket

After Speed Wireframe Sprints, students write a short response to: ‘Imagine you are explaining your prototype to a friend. What is the most important feature you included and why? How could you improve it based on feedback?’ Use these to assess their understanding of user needs and iteration.

Extensions & Scaffolding

• Challenge: Ask students to redesign their paper prototype to solve a new user need, such as accessibility, and explain their changes in a one-minute recording.
• Scaffolding: Provide pre-cut paper templates with labeled sections for students who struggle with layout planning.
• Deeper exploration: Introduce a second prototype iteration where students incorporate one piece of feedback from their peer testing session.

Key Vocabulary

Wireframe	A basic visual guide representing the skeletal framework of a website or app, focusing on layout and content placement without visual design elements.
Paper Prototype	A low-fidelity, hand-drawn model of a digital interface, often made from paper, cardstock, and markers, used for testing user flows and functionality.
Low-Fidelity	Describes prototypes that are basic and simple, focusing on structure and function rather than detailed visual appearance.
User Feedback	Information and opinions provided by potential users about a product or design, used to guide improvements and iterations.
Iterative Design	A design process that involves cycles of prototyping, testing, and refining based on feedback to gradually improve a product.