Code Companion
In my graduation thesis, I characterized the step of abstractions and translation when designers want to translate their idea into code. I created a toolkit to facilitate the design and prototyping process. This toolkit is called the Code Companion and contains two tools: the Blueprint, and the Pattern Dictionary.


The Code Companion: a tool to help interaction designs with programming their ideas
To investigate the gap between idea and code, I organized multiple workshops where 40+ design students had to program and prototype a similar design (an interactive dice). All their code was printed and analyzed for patterns; which indicated that none of the students had any overarching knowledge of programming concepts.

Code analysis of designers that were programming for the first time
Next, I organized a paper programming workshop, in which design students had to perform a paper programming exercise for two very limited design briefs. Together with the code analysis; I identified two strategies designers employ when breaking down ideas: pathfinding & trial-and-error.

Besides observations, experiments, and exercises with designers, I also researched the history of programming. Understanding which programming paradigm influenced which language proved to be vital in determining possible solutions and design directions.

The Blueprint allows designers to breakdown their ideas into logic
To support the Blueprint and help designers find the right (programming) pattern, I designed the Pattern Dictionary. The dictionary includes common programming patterns and behaviors for Arduino, explains the flow and explains different concepts.
Additionally, a prototyping tool was made that had an array of pre-programmed inputs and outputs designers could use to test their concept. This eliminated learning hardware and electronics from the process, letting them focus on programming concepts.

In short, the Code Companion is an initial exploration in demystifying how programming works, and helps interaction designers breakdown their ideas into more manageable, programmable parts.

The Code Companion