Turtle Editor

How to help kids understand the relationship between code and block?How to use interaction design to make programming education easier?

Project Background

4 Months ( Feb - Jun. 2018 )

Interaction Design Intern

Code.Game is a start-up tech company in China that focuses on programming education for kids. While I was working as an interaction design intern at Code.Game, we designed and developed a desktop application called Turtle Editor to teach kids Python programming by visualizing the code into blocks.

Design Overview

Design for Education

Desktop App

Interaction Design

The final product is a desktop application that enables the transformation between code and blocks based on Scratch 2.0 developed by MIT Media Lab. Kids can see real-time changes in both sides while writing code or build blocks and also connect to hardwares in order to make IoT projects.

In this project, my main contributions are designing the interaction and UI of converting between code and blocks, product website design etc.

The design process is currently under NDA, but feel free to check our product on the website or reach out to learn more about the product!

⇣

What have I learnedAs an interaction design intern

I always see education as something that is truly powerful and impactful as long as human exists, and working as an interaction designer at an educational technology company has given me the best opportunity to think about how I can use design help people especially the younger generation to learn and understand the world. Working on a dynamic team with great diversity, while I was trying my very best to contribute to the team, I also learned so much from not only the co-workers, but also the kids we tested with.

Learning From Others

Design spec as a powerful tool of communication

When working with engineers and designers, design specs has become a critical tool to communicate ideas and pixels with them. Instructed by one of the senior designer on the team, I started to learn how to use clean and clear design spec to covey my design in a pixel-perfect and understandable manner.

Site Mapping

Information Hierarchy

Lo-fi Prototype

Design experience as a resource to be shared

At CODE.GAME, the design lead organizes weekly stand-ups for designers from the whole company to share their experiences and also conduct necessary critique on certain design decisions. It became a very valuable activity for me since this is my very first time working as a designer in a technology company, a lot of design experiences are very helpful for me to reflect on my current state when designing and communicating with other team members.

Working in a Group as a Designer

Brainstorming

How Might We

Our team has a great diversity not only in terms of role but also backgrounds and interests. Working in such a dynamic and diverse team gave me an opportunity to really express myself and exchange ideas with everyone.