Computing · JC 2 · Computational Thinking Project · Semester 2

Designing a Simple Solution

Students will create a basic design for their digital project, outlining how different parts will work together and what the user interface will look like.

• MOE Syllabus Outcomes
• MOE: Computational Thinking Project - Middle School

About This Topic

Project Presentation and Review is the final stage of the JC 2 Computational Thinking Project. Students must communicate their technical solutions to an audience, which often includes non-technical stakeholders. This requires them to synthesize their work, highlighting the problem they solved, the design choices they made, and the technical hurdles they overcame.

Reflection is a key part of this process. Students evaluate their own work, identifying what went well and what they would do differently if they were to scale the project. This meta-cognitive step is vital for growth as a computer scientist. This topic comes alive when students can practice their 'pitches' in a supportive environment and engage in peer-led reviews that celebrate their achievements while providing constructive feedback.

Key Questions

1. How will our project look and feel to the user?
2. What are the main parts of our project and how will they connect?
3. Draw a sketch or create a simple prototype of your project's interface.

Learning Objectives

• Design a user interface sketch for a digital project, incorporating user experience principles.
• Identify the core components of a digital project and illustrate their interconnections.
• Create a simple prototype or wireframe to represent the project's visual layout and flow.
• Explain the rationale behind design choices, linking them to the project's intended functionality.

Before You Start

Introduction to Digital Projects

Why: Students need a foundational understanding of what a digital project entails and its purpose.

Basic Algorithmic Thinking

Why: Understanding how to break down problems into steps is crucial for designing project components and their interactions.

Key Vocabulary

User Interface (UI)	The visual elements and controls a user interacts with when using a digital product, such as buttons, menus, and screens.
User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a product, focusing on ease of use and efficiency.
Wireframe	A basic visual guide representing the skeletal framework of a webpage or application, showing layout and content placement without visual design details.
Prototype	An early model or sample of a product that demonstrates its functionality and design, allowing for testing and feedback before full development.
Component	A distinct, modular part of a larger system or project, such as a specific function, module, or feature.

Watch Out for These Misconceptions

Common Misconception

A good presentation is just a list of all the code I wrote.

What to Teach Instead

A good presentation tells a story of problem-solving. It should focus on the logic and the user's experience. Peer-critique sessions help students move from 'code-dumping' to 'solution-pitching'.

Common Misconception

If my project has bugs, I will fail the presentation.

What to Teach Instead

The review is about your process and reflection. Being honest about bugs and explaining why they happened and how you would fix them shows a high level of computational thinking. Discussing 'lessons learned' is often more valuable than a 'perfect' demo.

Active Learning Ideas

Simulation Game: The Elevator Pitch

Students have exactly 90 seconds to explain their project to a 'non-technical investor' (a peer). They must focus on the 'why' and the 'how' without using overly dense jargon, followed by a quick Q&A session.

20 min·Pairs

Gallery Walk: Project Showcase

Students set up their projects at 'stations' around the room. Half the class acts as 'visitors' who move around to see the demos and ask questions, while the other half 'presents'. Then they swap roles.

50 min·Whole Class

Think-Pair-Share: The Scaling Challenge

Students individually consider how their project would need to change if it had 1 million users instead of 10. They pair up to discuss changes to database design, server architecture, and security, then share one 'big change' with the class.

25 min·Pairs

Real-World Connections

• App developers at companies like Grab use wireframing tools such as Figma to map out the user flow for new features, ensuring a seamless experience for commuters booking rides or ordering food.
• Game designers create interactive prototypes for new video games, allowing playtesters to experience core mechanics and provide feedback on controls and game flow before the final release.

Assessment Ideas

Quick Check

Provide students with a simple scenario (e.g., a basic to-do list app). Ask them to sketch a single screen of the UI, labeling at least three interactive elements and their purpose.

Peer Assessment

Students exchange their UI sketches or wireframes. Ask them to provide feedback using these prompts: 'Is it clear what this button does?' and 'What is one change that would make this easier to use?'

Exit Ticket

On an index card, have students list the two most important components of their project and draw a simple arrow diagram showing how they connect.

Frequently Asked Questions

How do I explain complex code to a non-technical audience?

Use analogies and focus on the 'data flow' rather than the syntax. Instead of explaining a specific loop, explain what the loop achieves for the user. Visual aids like diagrams and simple UI demos are much more effective than showing lines of code.

What should be included in the 'Project Review' section?

You should include an evaluation of your final product against your original requirements, a discussion of the technical challenges you faced, and a reflection on what you learned about the software development lifecycle.

How can active learning help students with their final presentations?

Presenting is a performance skill that requires practice. Active learning strategies like 'Elevator Pitches' and 'Gallery Walks' provide low-stakes opportunities for students to practice their communication. Getting immediate feedback from peers helps them identify which parts of their explanation are confusing before the final assessment.

How do I handle difficult technical questions during my demo?

Be honest and analytical. If you don't know the answer, explain how you would go about finding it or what part of the system the question relates to. Showing that you understand the 'boundaries' of your knowledge is a sign of a mature developer.