Click Physical coding for education

Project: Research / Product Publication: Work in Progress paper accepted to TEI 2016

Click is a physical coding platform that utilizes smartphones as pieces of code. These smartphones can then be connected to form programs.

Mobile devices forming code chain

Concept Video


The brief for this project was to design a system for collaboration.

After exploring venues such as hobby meetups, hackerspaces and offices, the academic coding class emerged as a context particularly ripe for exploration.

The problem with coding class

Field research was done in the form of interviews with students, and sitting in classes themselves. Here are a few issues uncovered:

1) Coding classes focused on lectures and demonstrations with little realtime feedback on student understanding.

2) Weaker students were peer pressured into keeping questions to themselves, so classes moved at a speed of the stronger students.

3) Code learning is cumulative, it is difficult to pintpoint the moment a student has become lost, if that moment has passed.

Design Goals

1) How can we set the teaching pace at the speed of the average student?

2) How can we turn the stronger students into teachers for the weaker?


One instructor I observed had a ritual where every person in the class would be called on to explain a small section of code.

Each student explains a section of code

Because explaining any line of code required and understanding of previous lines, all students would need to follow along at the same pace. And any gaps in understanding could be identified quickly.


Taking inspiration from the teacher's activity, I built a concept around group coding. Each student would have the responsibility to contribute a block of code in order to build a program.

To do this, students turn their personal smartphone into a code block, which then can be connected with other student's devices to form a program. Outputs from the program can affect an avatar or use the hardware (ie camera) on a separate device.

The consensus building process for each block of code would naturally turn all students into both teachers and learners.

Each smartphone can be turned into a code block

UI Animation

Because components of Click are both physical and digital, I designed a set of UI animations to create affordances and feedback for the physical manipulation of digital/physical code pieces.

Virtual UI animations for physical interactions


Example of wireframes designed to map out functionality of the code blocks.


The Click system is the first iteration of this project. The next steps in this project are to create a working prototype and test its ability to facilitate learning in a group setting and measure its effectiveness against existing prototyping educational platforms.

Send Availability
LinkedIn Messaging
Experiential Augmentation
AR Communication Design
Physical Code
Conversational UI
Tangible Interaction
Walled City
Voice/Sentiment Analysis
Speculative Design
Character Animation