Project Work

✏️ Three Wireframe Directions

Critical Thinking & Problem Solving Self Directed Learning Content Expertise Academic Mindset Product Assessment Reflection Core Content Community Partners Essential Question Critique and Revision Submission Required

Sketch 3 clearly different low-fidelity website directions on paper, Figma, or FigJam, including page layout, navigation labels, and major content blocks. Use AI for content, layout, or code suggestions only after the first sketch set is complete, then record which suggestion you used, revised, or rejected in your prompt log. Give feedback to 2 peers, receive feedback, and revise one direction into a stronger clickable flow with linked screens or a clear page sequence.

Plan day

Day 7

Duration

120 min

Grouping

Individual

Steps

7 steps

Lesson plan

7 steps · 120 min

#	What teachers do
1	Launch the activity by reviewing the real user need from your community partner, the goal of creating three distinctly different directions, and the rule that AI can only be used after the first sketch set is complete. Have you set up your materials, open your prompt log, and note one design priority for clarity, usefulness, and originality. (10 min)
2	Create three low-fidelity wireframe directions on paper, Figma, or FigJam. Make each direction clearly different in layout, navigation labels, and major content blocks, and label how each option serves the audience and website purpose. Do not use AI during this round. (25 min)
3	Compare your three directions and choose 1–2 targeted questions to ask AI about content, layout, or code ideas. Use AI only after your initial sketches are complete, then record each prompt and note whether the suggestion was used, revised, or rejected based on fit for your audience and site goal. (10 min)
4	Revise your wireframes using your own judgment first and AI suggestions only where they improve the work. Add notes that show what changed and why, especially when AI was inaccurate, generic, or not useful. Prepare your three directions for critique. (10 min)
5	Participate in a structured peer critique with two classmates. Share all three directions, explain the audience need, and give and receive feedback on clarity, usefulness, originality, and technical quality. Capture specific comments and questions on your sketches or in your notes. (15 min)
6	Select one direction to strengthen into a clickable flow or clear page sequence. Link screens or map the order of pages, refine navigation labels and content blocks, and make sure the flow addresses the real user need from your community partner. (12 min)
7	Close with a brief reflection by sorting your evidence into What I Learned, What I Fixed, and What I Still Need to Test. Update your prompt log, identify one question to carry into the next user-testing activity, and submit or save your revised wireframe flow. (8 min)

Preparation (8 items)

Prepare sketching materials and digital design access options, including blank paper, sticky notes, pens, and working Figma or FigJam links.
Post or distribute a short critique guide with the feedback categories clarity, usefulness, originality, and technical quality.
Create or share a prompt log template with space for prompt used, AI suggestion, used/revised/rejected, and reason for decision.
Prepare a visible timer and a step agenda so the activity stays paced across sketching, AI testing, critique, revision, and reflection.
Set up peer critique pairs or triads in advance so each person gives feedback to two peers and receives feedback from at least two peers.
Provide an example of what counts as three clearly different wireframe directions, such as different page hierarchy, navigation structure, or homepage emphasis.
Make available a reflection template or board with the headings What I Learned, What I Fixed, and What I Still Need to Test.
Check that students can access prior notes from the design brief and community partner research so they can ground decisions in a real audience need.

Student-facing instructions

You will create three different low-fidelity website wireframe directions for your project using paper, Figma, or FigJam. Each direction must include a page layout, navigation labels, and major content blocks, and each one should respond to the real user need you identified through your community partner work. First, sketch all three directions using only your own ideas. After your first set is complete, you may use AI to ask for content, layout, or code suggestions. Record every prompt in your prompt log and note whether you used, revised, or rejected each suggestion and why. Then you will share your three directions with two peers, give feedback to two classmates, and receive feedback on clarity, usefulness, originality, and technical quality. Finally, you will choose one direction and revise it into a stronger clickable flow or a clear page sequence that you can test next. You will need your design brief notes, sketching or digital wireframing tools, your prompt log, and a place to capture critique and reflection notes.

Success criteria

You are done when you have completed all of the following: 1) three clearly different low-fidelity wireframe directions, 2) each direction includes layout, navigation labels, and major content blocks, 3) AI was used only after the first sketch set was finished, 4) your prompt log includes at least one recorded AI interaction with notes showing whether the suggestion was used, revised, or rejected and why, 5) you gave feedback to two peers and received feedback on your own work, 6) one direction was revised into a stronger clickable flow or clear page sequence, and 7) you completed a reflection using What I Learned, What I Fixed, and What I Still Need to Test.

Facilitator notes

Keep the emphasis on generating distinctly different options before polishing one idea. A common pitfall is making three minor variations of the same homepage; push for meaningful differences in hierarchy, navigation, and content emphasis. Reinforce the AI boundary early: no AI until the first sketch set is complete. During critique, remind participants to ground feedback in the identified audience and community partner need rather than personal preference. If participants struggle to vary their ideas, prompt them to change one major design variable at a time, such as navigation style, homepage priority, call-to-action placement, or number of pages. Support learners who need structure by offering a simple wireframe checklist or sample page blocks; extend advanced learners by asking them to test multiple AI prompts and compare which one best supports originality without flattening their own ideas. Watch time during the critique and revision segments so everyone leaves with one usable flow for the next user-testing activity.

Resources

No resources yet