👋 Hi, I'm Owen

I'm currently studying in the University of Queensland and major in Interaction Design. I love learning and exploring the unknown.

I love design and create interesting things.

PROJECT INTRODUCTION

Problem Domain

The domain of my concept is related to creative code learning, nowadays, programming skills have become more and more important and most of the major countries have added programming into children’s courses. But even in this case, there are still some people who can hardly master programming skills. So my project goal is to develop a set of robust and effective programming learning equipment which can arouse people's enthusiasm for programming learning and help them learn programming skills efficiently through a more interactive teaching method. The target audience of my project are the people who never learn coding language. Another target group is physical gamers, so they may learn a lot about programming when they get involved in this interactive game.

About my project

Introduction Video

User Journey Map

My project work is called ‘swipe code’, which is a creative code learning equipment that can teach people who have no programming background to learn how to code by swiping cards. it will provide users with different Instruction cards and each card contains a code fragment, like ‘moveNorth();’ and ‘if (...) {...} else {...}’, what the users should do is to swipe these punch cards on the punch card reader, and the code fragment will be inserted into the web-based IDE to control the character’s movement in the web-based game to complete different tasks. This installation includes two parts: screen and physical part.

Screen Part

The screen part means the interface and components shown on the computer screen, which is composed by four parts: a web-based coding IDE(integrated development environment), the game window, the console window and the top bar.

Coding IDE: The coding IDE is the place for users to input their code, users can swipe different punch cards on the punch card reader to insert the code in here.

Game window: In the game window, there is a character and a background map. By calling moveEast(), moveSouth(), moveWest() and moveNorth() four function instructions in the IDE, the game characters can move in four directions: east, south, west, and north. There are some rocks and trees on the map, and these areas are impenetrable. So the task of the user is to control the character to get to the destination on this map with minimal code.

Console window: The console window corresponds to the javascript console, all of the logs called inside of the console.log() function will show here. What’s more, every movement of the game character will also show here as text.

Top bar: The top bar is on the top of the interface, and users can find two buttons on it, they are ‘run’ and ‘insert’ respectively. The ‘insert’ button can be clicked after each time you swipe a card, by clicking this button, the user can insert the code of the card at the position where the cursor flashes. The ‘run’ button is easy to understand, when users finish insert the code, they can click this button to run the code to control the movement of the game character.

Physical Part

As for the physical part, the core interaction is the swipe the card with the punch card reader. We will provide users with some punch cards, The user needs to select the card they want and swipe the card in the direction of the arrow on the punch card reader. Each card has a hole. When the stylus passes through the hole, the binary data is generated according to the combination of the hole position and passed to the computer. Apart from this, another interaction is interactive LED strip, when the user swipes a card, the LED strip will flash for two seconds as a feedback for successful card swiping, and the color of lights will be different according to different cards.The purpose of this interaction is to enhance the appearance and fun of the product. The last physical interaction is the LCD display, after the user swipe the card, the information contained in the card will be displayed on the display, the user can check whether the card input is correct.

DESIGN PROCESS

Ideation & Team Formation (Week3)

We formed our team based on the problem domain we chose in week3, and we conducted our first meeting. Our problem domain is about ‘Creative Learning’, so in this meeting we chose programming as our research direction from four topics we discussed: circuit learning, coding education, cooking learning and instrument learning. After determining our research direction, we start to brainstorm ideas about how to make programming learning more creative and interactive. At this stage, the ideation method we used is the affinity diagram. We summarized the ideas of each team member into keywords and sorted them into an affinity map, and then chose the most suitable plan from them. From the discussion about project purpose, target audience and main interaction three aspects, we finally decided our team concept.

The Original Idea (Week4)

The original idea of our project is an interactive game to help teenagers learn the logic of programming, the control module consists of camera and instruction blocks and the other part is a physical maze with a small robot in it. The way people control the movement of the robot is to place the command block in correct order, these commands are like go forward, go backward, turn left, turn right, and some instructions for looping. The user only needs to place the side with the command they want to enter to the top, the camera will detect it and use it to control the movement of the robot.

First Iteration (Week5)

We did the proposal pitch as a team and got some feedback about our ideas. The feedback pointed out some problems on our team concept and we made some discussion around these problems and tried to make some changes. In week5, I started to explore my individual concept on the basis of our previous feedback and team concept and I got my Arduino kit and started to do some research on it. As for my individual idea, it is still a multiplayer game, the two robots were placed at two different sides, and the destination is in the middle. We will let the users fill in the blanks in the coding questions to help them understand the syntax of the programming language.When the player answers the question correctively, the robot will move forward and if they didn't complete the question, the robot will go backward, so the player who gets to the destination first will win the game. The difficulty of this game will gradually increase from easy to hard, so that people at all levels can handle it successfully. In terms of my attempt on the Arduino, I just began to try connecting some simple components like LEDs and motors.

Second Iteration(Week6)

During the mid-break, I conducted user research, which is a questionnaire conducted with university students to discover the factors that hinder people's programming learning. I also asked some questions about my personal concept to find out user's attitude towards my idea. Apart from that, I also asked some questions about how to improve the physcal interaction of my concept and I got the punch card reader idea from tutors. According to user's feedback and tutor's answer, I made another change on my concept. I want to use the punch card reader as an input device in my project and use it to interact with people. Punch card reader is a way to enter information physically, people can insert a small card with holes into the card reader, the card reader can recognize the content of the card and send it into the computer.So,in this concept, users can swipe cards to fill the blanks in the code to achieve different tasks, which can help them learn the programming syntax.

Making Peototype(Midbreak - Week7)

After I got the idea of a punch card reader, I searched a lot of information about it, and I started to make one by myself with simple materials. The punch card reader has three components: the stylus, metal contact and the body. As for the first prototype of the punch card reader, I used two metal hooks as contact pins and made the body with acrylic board, for the realization of metal contacts, I used copper stickers. The final product is shown in the upper left picture, but because the reader is not made fine enough, there are always errors when reading the card.

Then in order to improve the function of the punch card reader, I decided to make another one with the tools and materials in the UQ Innovate. I used the cutting machine and drilling machine to make a wooden punch card reader, compared with the last version reader, this one can read the card more accurately, and the appearance of this punch card reader is simpler and more beautiful.

Making Peototype(Week7 - Week8)

I also decided to add a lcd screen to let the users check the data that is read by the punch card reader. The picture on the right is the scene when I tested the connection to the display. The connection process is very smooth, and the data in the Arduino can be displayed on the display successfully.

Then I connected the punch card reader and the LCD screen together, the data that is read by the punch card reader can be successfully shown on the LCD screen, which can let the user check the data they want to input to avoid unnecessary errors. I also sticked a LED light strip to the punch card reader, to add some visual feedback to the prototype, so that each time users swipe the punch card, the LED lights will flash different colors according to the content of the card, which improved the interactivity of the device.

Making Peototype(Week9)

I made a simple interface for my project this week, there is only a coding IDE on the screen with two buttons on the left. The code read by the punch card reader can be inserted into the IDE. After clicking on the 'Run' button, the result will be shown on the right part. The operation of the code in the IDE is based on JavaScript, and if you have any syntax errors, the error informations will also show on the right part of the screen.

Third Iteration(Week10 - Week13)

After making the prototype, we critique with each other. According to the feedback from other groups, I decided to add a programming game to my project, users can swiping the punch cards to call the functions that control the movement of the character. Users can also wrap the function within if sentence or for loop to complete the programming tasks with shortest code. The three pictures shown above shows the changes made on the interface.

Finally, I connected these components together, I used node.js as my backend to fetch the data from Arduino, and the data can show on the webpage successfully.

Reflection

Due to the COVID-19, the physical computing course project of this semester was temporarily changed to a personal project. Although I did not have the help of my teammates, I also improved my ability to solve problems in my personal project. The topic of our group is creative learning. At the initial stage of the project, I wasted a lot of time on the ideation. I thought about many ideas, but there are very few practical solutions. Inspired by tutor, I gradually found the direction of the concept, and slowly began to embark on the technical stage. I think that in the early stage of this project, I did not have enough communication with tutor and classmates. So I wasted a lot of energy in the early stage.

Due to the epidemic, user research and usability testing were affected. As far as the expected conceptual functions are concerned, this work has already achieved most of the functions, but the recognition accuracy of the punch cards reader is still not good enough. This may be related to its realization principle, because the data can only be read out when the contact pin of the card reader is in accurate contact with the hole. In the following project improvements, other card reading principles with higher recognition rates may be used. As far as the game on the page is concerned, at present, it is only for the user to control the characters to go to the end on the map, which lacks fun. In the next improvement, I can add more elements such as enemies, traps, etc.

Outputs

Individual

Group

References

Brown rock illustration, Pixel art Sprite, ROCKS free png | PNGFuel. (2020). Retrieved 9 June 2020, from https://www.pngfuel.com/free-png/nynpt

Christmas Pixel Art, Christmas Tree, Digital Art, Logo, Fir, Oregon Pine, Green, Colorado Spruce free png | PNGFuel. (2020). Retrieved 9 June 2020, from https://www.pngfuel.com/free-png/rgiru

Khamphroo, M., Kwankeo, N., Kaemarungsi, K., & Fukawa, K. (2017, May). MicroPython-based educational mobile robot for computer coding learning. In 2017 8th International Conference of Information and Communication Technology for Embedded Systems (IC-ICTES) (pp. 1-6). IEEE.

Li, F. W., & Watson, C. (2011, December). Game-based concept visualization for learning programming. In Proceedings of the third international ACM workshop on Multimedia technologies for distance learning (pp. 37-42).

Mathrani, A., Christian, S., & Ponder-Sutton, A. (2016). PlayIT: game based learning approach for teaching programming concepts. Journal of Educational Technology & Society, 19(2), 5-17.

Milne, I., & Rowe, G. (2002). Difficulties in learning and teaching programming—views of students and tutors. Education and Information technologies, 7(1), 55-66.

Robins, A., Rountree, J., & Rountree, N. (2003). Learning and teaching programming: A review and discussion. Computer science education, 13(2), 137-172.