Bringing constructivist learning to an AI-powered canvas
brief
The goal of this project was to use an AI-assisted prototyping tool like Lovable or Claude Code to create a prototype related to some kind of educational concept or issue. My partner and I both had CS backgrounds, so we wanted to leverage our CS skills for more granular control and scalability in our application.
context
Designing AI for Education — Northeastern University
tools and methods
- Claude Code
- Figma
team
Zach Marino, Stevie Frisch
timeline
6 weeks
insights
Students use AI for many tasks, learning included. But how effective is the learning when AI gives you the answer in a big wall of text? Without friction, students learn little. Guiding students to the answer lets them build on their knowledge constructively, and worked examples let students get a feel for the problem before jumping in. If students are going to use AI either way, what if our solution could provide that AI use in a way that is actually conducive to learning?
deliverables
We scaffolded a single-page application whiteboard app using Claude Code. The app is based on Vite and uses tldraw to render the canvas. The built-in AI is a wrapper for Claude, which is given a prompt to not give the answer and support the student, as well as how to handle whiteboard interactions. Claude is prompted to return all responses in a JSON format that includes the AI response and any actions it will take on the whiteboard.
the challenge
If there is one thing kids are known to do, it’s cheat on their homework. During my time in high school, that meant searching up similar problems and their answers on Chegg and Quizlet. While I am not going to sit here and say cheating is good, this form of it at least gave kids a chance. Since no one wanted to pay for Chegg and Quizlet was wrong half the time, these forms of cheating functioned as “worked examples” at best. And according to researchers, worked examples do a better job at distributing cognitive load when learning a new skill. But now that AI is available to everyone, students are getting fast, personalized answers that are often correct. With so little friction involved, students aren’t learning.
How can we make learning and understanding math more accessible for students who find it challenging, without sacrificing the friction required for learning?
Claude gives the answer immediately, removing all friction required for learning
project goals
AI systems like Claude and Gemini have learning modes that will not reveal the answer to the problem, but their responses are big walls of text with some occasional HTML. It can still be useful if the user is determined to learn, but the answer is literally one click away at all times, limiting engagement. Our primary goals were to prioritize the worked example and avoid the wall of text. We wanted students to receive personalized, uninterrupted feedback that builds on their own work, inspired by constructivist learning styles that build on prior knowledge.
the initial prototype
Loading Iframe content...
After a competitive analysis of other AI-assisted whiteboarding tools (see full presentation), we created a Figma prototype of a canvas with an AI assistant. We focused on the interaction between the user and the AI and how to avoid the wall of text. We designed a lasso tool that would select canvas entities and send them to the AI along with the prompt. The AI would then respond both in text and also on the whiteboard itself through different tokenized actions.
live demo (AI needs API key)
Loading Iframe content...