Term 3 Week 5 - Week 2

Prototype the Interface and Design the Logic

Create wireframes, user flow, pseudocode, flow chart and trace table evidence before full development.

Learning Goals

  • Create a wireframe or prototype that shows the main screens or interactions.
  • Plan the user flow from start to result.
  • Write pseudocode for the main algorithm.
  • Show selection, iteration and validation in the logic.
  • Create a trace table for one meaningful test case.

Five-Lesson Sequence

1

Create low-fidelity wireframes or a text-interface prototype.

2

Map the user flow and identify where input, decisions and output happen.

3

Write pseudocode for the main feature.

4

Create a flow chart or trace table to test the algorithm before coding.

5

Complete the prototype and algorithm checkpoint.

Current Stage: Prototype

Plan and design

Turn the idea into a planned interface and logic model.

Checkpoint: A user can follow the intended product flow before the code is complete.

Input-process-output table
User flow
Wireframe or prototype
Pseudocode or flow chart
Trace table plan

Detailed Lesson Build Pathway

Lesson 1

Wireframe the Main Screens

Show what the user sees before code is written.

  1. Choose Figma, paper, screenshots, slides or a text-based layout.
  2. Create the first screen where the user starts.
  3. Create the main result screen where the user gets feedback.
  4. Label inputs, buttons, result areas and error messages.

Evidence: Wireframe or prototype screenshot.

Lesson 2

Map the User Flow

Show the path from user input to final output.

  1. Draw or write the first user action.
  2. Show each decision point or repeated action.
  3. Show what happens when input is valid and invalid.
  4. Check the flow against your requirements.

Evidence: User flow diagram or ordered step list.

Lesson 3

Write Pseudocode

Plan the main algorithm in plain English before coding.

  1. List variables and inputs.
  2. Write the sequence of steps.
  3. Add IF statements for decisions.
  4. Add a loop where the product repeats a question, checks records or processes a list.

Evidence: Pseudocode for the main feature.

Lesson 4

Flow Chart and Trace Table

Check that the algorithm works before building the full product.

  1. Create a flow chart for the main decision or repeated process.
  2. Choose one test input set.
  3. Trace variable values step by step.
  4. Fix any logic issue found in the trace table.

Evidence: Flow chart and trace table.

Lesson 5

Prototype and Algorithm Checkpoint

Confirm that the interface and logic are ready for development.

  1. Prepare prototype, user flow, pseudocode and trace table evidence.
  2. Explain where sequence, selection, iteration and validation will occur.
  3. Record teacher feedback.
  4. Update the design evidence before coding the final MVP.

Evidence: Checkpoint notes and revised design evidence.

Key Build Steps

Create the prototype

  1. Sketch the main screens
  2. Label input and output areas
  3. Show error feedback

Design the logic

  1. Write pseudocode
  2. Include decisions and loops
  3. Trace one complete path

Student Checklist

  • My prototype matches my requirements
  • My pseudocode includes selection
  • My logic includes iteration
  • My trace table matches the algorithm

Common Mistakes to Avoid

The wireframe is only decoration

Label inputs, outputs, user actions and feedback.

The pseudocode is too general

Write the actual decisions and repeated steps your program will use.

The trace table uses random values

Choose values that show the algorithm actually works.

Useful Guides This Week

Define a Product Worth Building

Define a useful, realistic and assessable Study Session Helper Program.

Prototype and Wireframes

Plan the product experience before writing the final code.

Algorithm Design

Plan the logic so the product has clear processing, decisions and repetition.

Weekly Checkpoint

Prototype and algorithm evidence checked before full product development.