Physical coding for education PROJECT:Mobile / Web App PUBLICATION: Work in Progress paper accepted to TEI 2016

Click is a physical coding platform that utilizes smart devices as component pieces. These code blocks can then be connected to form programs.

The platform enables a soft introduction to code and prototyping that can be taught in both a classroom and family environment. The platform uses smartphones as modular pieces, because of this users are able to take advantage of smartphone functionality as inputs and outputs to their program/prototypes.

Example of mobile devices forming code chain

Concept Video


BRIEF System for collaboration

The brief for this project was to design a system for collaboration. A few loose personas were assigned, and we were given a choice to design for any of them. One of the personas was Stuart:

A young adult in his 30s who love technology, programs for a living and is an organiser at a local a hacker space.

FIELD RESEARCH 1 Initial Exploration

As the brief was intentionally loose, Initial research was conducted to focus into a specific problems.

Field research was conducted in possible locations the persona Stuart would visit. This included areas where Stuart would act as a leader such as hackerspaces, and areas where Stuart would work.

The information was collected into a series of problem scenarios which Stuart may face.

PROBLEM Teaching code

From the first round of field research, a specific problem area of coding education in group settings emerged as a rich topic for exploration. The following set of challenges were identified:

1) The teaching speed of classes cater to the smartest group of students. Weaker students were peer pressured into keeping questions to themselves. As lessons in class were cumulative, this caused them to be left behind.

2) It is difficult for those with intiuitive understanding of code (especially the teachers) to understand the point of confusion of those without (weaker students).

3) Coding classes focused on lectures and demonstrations with little realtime feedback on the level of student understanding.

SYNTHESIS Focused questions

From the challenges, I created a set of directions phrased in the form of questions. In particular, ideations around the following questions were the most fruitful:

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.


Insight for the final solution was drawn from observation of a teacher who would continually ask students what subsequent lines of code in his demo programs did. Because explaining any line of code required and understanding of previous lines, even weaker students would make sure they understood each line before allowing the class to continue.

Taking inspiration from this 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. Those who were not contributing the next block of code would still be able to participate in deciding what code should come next.

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

CONCEPT Group physical coding

The platform is designed to be used across mobile devices. Each individual in the group is able to turn their device into a code block, which then can be connected to form a program. Outputs from the program can affect an avatar on a separate device, or can utilize mobile device functions directly (for examples see above concept video).

WIREFRAMES Detailed functionality

Example of wireframes designed to map out functionality of the code blocks. Click picture for more wireframes.

UI ANIMATION Virtual affordances for physical code

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.

FUTURE Next steps

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.