Annotated Portfolio

Magic Blocks

by Bowen & Solomon

Problem Space

[Team]The general problem space of our project is that explore the creative methods to help people learning to program.

[Individual]Solomon and I have narrowed down the problem space, which becomes visualizing the process of how codes work, meanwhile, help users to eliminate their negative impression on learning programming.

Background

According to the research, the main barrier that avoids novices constantly learning to program is the negative impressions, like over considering its difficulty. Therefore, the Magic Blocks contributes to eliminating negative impressions through an intelligence robot as the learning companion.

Target Audience & Scenario

Novices of learning programming who has negative impressions on learning programming

Pain Points:
- Excessively consider learning programming is difficult
- With poor cognitive concept that the codes work inside the system
- Lack of constant motivation

Ideal concept

The ideal solution is always fantastic that can clear all the barriers between novices and programming master. However, the fact is crucial, it is hard to learning programming in one go. But we still can imagine a workable project that has enough time and resources.

The features of ideal design:

- An adventure game with tasks

- Multiplayers in both competition and cooperation modes

- High intelligence character that can record all the programming errors

- Giving instant feedback when the errors happend

- Giving suitable motions feedback (encourage words when the task is failure)

The ideal concept locates two main problems, which are maintaining users' motivation and eliminating their negative impressions. Users can learn alternative programming skills through different tasks, and practice the ability of self-modify toward the errors of codes with the feedback from the robot and the intuitive process performance.

Final Product

Based on the ideal concept, our team started to build the prototype. The latest version of Magic Blocks has already realized some of the core functions, like inputting codes through blocks, compiling the pseudocode, and manipulating the robot to accomplish basic tasks. More detailed user experience can be found in external link > Prototype one > user journey.

Locate on the target users:

- Different maps choice give them a smooth start

- Pseudocode practice enables them to train basic programming logic

- The combination of error feedback and robot performance
trains their ability of self-inspection

- Encouraging words to give users extra motivation and decrease their fear of failure

User manual

Map is the main interaction site for the Anki Vector. The inital idea is that user can freely compose the route so as to train different aspect of programming and enable the multiplayers mode. However, at current stage, there is only one map with fully ornament.

Anki Vector is the main character in the interaction. It is a smug robot, sometime may even make jokes on you. However, users will spend the majority of time on interacting with it. Anki Vector is designed as the character of friend and companion during the journey of learning programming.

The compiler is where the system deals with the input pseudocode and translate them into real python codes. Users don't need to interact with it. The camera on the laptop captures the QR code on the code block. You need to put the code blocks in the named place.

Code blocks enable users to compose their unique solutions toward a task. Users need to first place the right order of the code blocks and scan them in sequence. Every block has three pseudocode, the QR code match the pseudocode in its back. There are three types of code blocks, including direction (W, R, L), statement (if{, Loop[, }, ], numbers), and 'Duplicate'(enable users to duplicate the last command)

Project Composing

System Workflow

The camera captures the order of code blocks and send the data to the laptop.

Then laptop will work as the compiler to translate the pseudocode into workable commands.

After that, those commands will manipulate the Anki robot via wifi so that the robot can follow the users' will step by step.

How does the backend system work

The camera sends a list of orders to the compiler, every element represents a command.

Then, the compiler will analyze the list and translate them into real python codes.

After that, the system will simulate the outcome within a matrix algorithm, which indicates the route and final location so that the system can give different feedback based on specific outcomes.

[video]Backend introduction starts at 5:06.

Design Process

Proposal Critique

"For example, some places have children learning programming as early as 9, so this system would be redundant there, because the users already know how to code regularly"

There are nearly 30% of participants indicated the improper user group(age 9-12). Therefore, our team conducted more research on this part, and the result proved that age can not represent the level of programming skills. Therefore, our team modifies the user group from the age of 9-12 kid into the novice of programming.

User research

After ensuring the target user group, I conduct a number of interviews to have deeper empathy with our user. The majority of interviewees mentioned that the first impression on programming is difficult and also indicated that their job doesn't require this skill either. So, they are not going to learn programming.'

Therefore, it helps us to locate two main obstacles that avoid novices learning programming, which are the negative impressions and lack of constant motivation.

Video Prototyping

In this section, we got feedback from three professional teams. Two teams mentioned that emotional feedback will disturb user from learning and may cause users to feel frustrating.

To avoid those potential problems, we decided to remove all the redundant emotion expression that not contributes to programming learning(like yawning, playing sadness animate when interaction failure happens

Prototype testing

Though the observation, we found that although the tutorial mentions how to use the system, users still don't understand the detailed rules and system's workflow.

In terms of that, our team decided to refine the tutorial to make sure both every rule and block are introduced.

More information can be found in the external link > Journal

Reflection

Magic blocks are the project as an exploration of creative programming learning. It still in the early stage of the ideal concept. However, the outcomes it brings are positive.

Magic blocks combine the merits from existed market programming toys, which has the ability to visualize the process, with the demands of the programming novices. That combination comes up to the final project that offers a game-based self-learning environment. Novices can learn the basic programming logical thought from the practice of using if statement and loop function.

The robot performance and error feedback give them extra training on self-refining and make them learn from the failure. In addition, the funny interactions between users and robots can minimize the negative stereotype of programming learning, and further, enhance the learning motivation.

In terms of the limited developing time, there are lots of contents remained to be finished in the future, like the error feedback is not specific and the encouraging words is over-simple. How to make the robot more intelligent and helpful is one of the vital topics in the next iteration.

External documents

Journal

The detailed information of the design process, team agenda, and technology research

Proposal

It is the start point of the entire project and also contains some of the literature reviews.

Prototype one

The first prototype that designed for peer critique

About me

I am Bowen Jiang. It is my last semester for the MIxD study.

Look through the whole journal of the studying, all kinds of creative projects can always attract my interest, like game and website building. Even though I am not a good programmer, l like the process of exploring the new fields and creating something.

Project Magic Blocks contains a combination of user research, multiple design iterations, and programming. It's a pity that the campus is locked down due to coronavirus, otherwise, the process and outcome will both become more interesting.