Loopy Pizza: Tangible User Interface for Collaboration
Design Challenge
Design a tangible user interface that encourages collaboration by combining the strength of analog tools and digital tools.
This was a 4-week (2018 Fall) group project in the Object & Space course taught by Graham Plumb and Aaron Soloway.
Team: Anchi Hsin, Asher Ran, Kendra Wong, Jay Wong (My main distribution is physical prototyping and visual/animation design)
Methodology: Qualitative Research, Ideation, Prototyping, programming
Project Overview
Problems
Students who just starting to learn coding face difficulties because:
- The lack of visual feedback makes them lose track of its system status
- Showing the code only on the individual’s screens discourages collaborative learning
- The concepts behind coding are hard for beginners to comprehend
Solutions
An interactive educational game in the coding classroom that allows students to:
- Receive clear visual feedback to understand its system status
- View pseudocode on a table-size, tangible interface to collaboratively learn together
- Understand the concept of for loop by using “pizza restaurant” as a metaphor
Demo Video
User Flow
Research
At first, we brainstormed many directions for the project, such as customize gifts, manage project timeline, and communication between teachers and students.
However, we ended up picking the topic of coding because as interaction designers, we are required to learn programming. Hence, we personally know the pain of the learning process of coding.
We interviewed 10 classmates (designers who took programming classes) and 2 coding teachers.
Opportunities
Based on the interviews, we came up with 3 main insights:
- The lack of visual feedback in the coding process makes people lose track of its system status and fail to fix errors
- It’s hard to communicate and collaborate with others as the code can only be shown on each individual’s screens
- Presenting code directly in computer language — a bunch of text, signs, and terms, can be overwhelming to beginners since it’s not intuitively designed language for humans
Hence, our challenge is:
How might we help new programmers to understand and ease into the concept and foundation of coding easier by providing visual feedback, encouraging collaboration, and translating the concept into human language?
Design
Ideation
At first, we were trying to reimagine a future coding space by replacing code with merely using physical gestures. However, we later realized that it was too difficult for us to build a whole new system of coding space while we ourselves are actually still beginners with coding as well. As a result, we chose to focus on how to teach students basic materials instead.
Game Mechanism
Based on our interviews, we knew that for loop was one of the concept that was hard to grasp for beginners. So how can we teach for loop in a way that is easier for student to understand?
It turned out that a pizza-restaurant-theme game for two players could achieve that. The elements in the kitchen could be metaphors for the concept of loop — the number of pizza orders and the number of ovens are the input while the quality of the pizza and cost are the conditions.
The players’ goal is to earn as much money as possible by deciding how many orders to take, how many ovens to run with the calculation of what is the perfect balance between the salary of the staff and the quality of pizzas (which is effected by the number of pizza ovens and orders selected). Since different combinations of orders and ovens can lead to different results, players could try out multiple times and the process itself is a learning journey.
Then we came up with different elements for running the game.
We keep everything that players need to do (input) physical/analog because it would be more intuitive and engaging to players. On the other hand, because feedback (output) have too many possibilities, it could only stayed in digital format to maintain its flexibility of change.
Technical Methods
The game used Processing as the language. We used the TUIO system to recognize the objects on the table. Since the game is not truly interactive (once the inputs of the amounts of orders & ovens are done for both teams, the outcome won’t change), we didn’t code the whole game. Instead, we exported each “outcome” as an animation, and play the results when the players move the “play” switch.
TUIO will detect the number of coded objects and its locations on the table and send the data to Processing. The code in Processing will then calculate the number of objects in specific boxes to determine the number of ovens and orders for both teams. Then another box switches, and it will be set as on whenever any object is in the area.
Based on the combinations of the input, the Processing loaded all pieces of the animations and played them accordingly.
Visual Presentation
As we were making the animation on keynote to serve as a material for Processing, we need to make all of the animations for all of the possible combinations of pizza orders and ovens (e.g. 1 order with 1 oven, 2 orders with 3 ovens, etc). We then discovered that there were 36 set of them and we didn’t know how we could deal with this huge amount of workload at first in such a limited amount of time.
However, after we talked to our mentor, he advised us to embrace the constrains — keep the visual simple. This determined our game’s unique visual personality by creating a minimal and pixelized visual element. It saved us large amount of time, but also its visual feeling echoed our theme — code and game!
Physical set-up
In order to present the game to real users, we set up the system physically.
In order to make the TUIO bar-code at the bottom of each component readable to the camera that is underneath the table, we made our table transparent. Also, to correct projector’s angles and size, we made a mirror with tilt holder for projector to reflect on it.
After endless adjustments and frustrating attempts, the system successfully detected the changes that the players had made on the table top.
Final solution
Reflection
Discussion
To what degree does Loopy Pizza help students learn how to code?
I think the most successful part of loopy pizza is to make coding more approachable and playful to increase beginners’ willingness to learn it. Also, students will know how for loop works step by step by knowing its status through visual feedback. However, it doesn’t includes helping students learn how to actually write code.
What is the next step for Loopy Pizza?
Firstly, because there are only limited possibilities (3 orders x 3 ovens) in the current system, we can create more variable to make the educational game more challenging and fun. Secondly, it can have many levels with different topics. Lastly, it can teach to write code by having students enter codes and receive interactive tutorials and feedbacks. However, I admit that since we are also just a beginners in coding, we don’t have enough capacity to design a complete educational platform yet.
Lessons
Embrace the fear and constraints
I am not a coder at all. Hence, it was a very challenging project for me. Even though the coding part isn’t my main responsibility, we bumped into a new technical difficulty every day and spent large amount of time trying to solve it. The process was painful, but it was a valuable learning experience since I had a unique opportunity to be familiar with techniques and equipments that I used to being opposed of using. Also, I realized that I should considered time as a friend, instead of an enemy. For example, we may not find a suitable visual language fast enough if there is no time constraint — which can actually help designers create better and more efficient solutions.
Communicate more to avoid misunderstandings
As we were divided into people into the makers and the coders groups among the team, it was very important to communicate with each other. Sometimes, we (Kendra and I are the makers) build the physical prototypes but forgot to ask coders if it would work. Also, we didn’t know if and when the coders need extra help until the very end. Even though, help was provided and the result turned out fine, we could’ve have better time management and communication methods earlier on.
