littleBits Education | Code Kit

2017

To quote Seymour Papert, "Every maker of video games knows something that the makers of curriculum don’t seem to understand. You’ll never see a video game being advertised as being easy. Kids who do not like school will tell you it’s not because it’s too hard. It’s because it’s–boring."

The littleBits Code Kit empowers inventors to learn engineering and design skills through creating their own games. Games are intrinsically great projects for design and engineering because they require an understanding of systems thinking. What's more - since games are so fun and challenging, they keep students focused and motivated to persist in the face of challenging problems. It's not uncommon after all to see someone playing a level of a game many times over before completing it. littleBits adds a unique angle to the experience of making your own games by bringing it into the physical world - an important modality for thinking about systems.

As a core team member for this project, I lead the execution of all videos, and packaging, and contributed to the design of the inventions, tutorials, the new Bits in the Kit (codeBit and LED Matrix), and the Code Kit App. My main contributions to the design of the Code Kit App were in the design of the software blocks. I also storyboarded, produced, and directed two videos for the marketing of the kit. To see more process, check out the blog post.

littleBits Education | Code Kit

This photo captures the energy of one of the hero projects of the kit: Hot Potato... of Doom! The sense of physical danger of this game makes it extremely fun. The use of timers and sound effects are tied to coding concepts that motivate students to learn how to code their own games.

littleBits Education | Code Kit

We paid a great deal of attention to making sure that there was something for every kind of student in the kit. So in addition to traditional video games, there's also a music game and a sports game in the kit invention content.

littleBits Education | Code Kit

This is the "Tug of War" Invention, featuring some hand-drawn monsters I created. The design of the sleeve was a group effort but Sky White deserves special credit for the layout.

littleBits Education | Code Kit

The codeBit and LED Matrix are the two new Bits in this kit. I designed the font for the LED Matrix, and gave feedback on the silkscreen design on each Bit.

littleBits Education | Code Kit

These are the four inventions. Each one is tied to a specific coding concept, such as loops, or logic. Although most games involve many of them, this serves as a helpful pathway to help educators plan their lessons.

littleBits Education | Code Kit

This is the design of the home of the Code Kit App and the Code Tutorials section. Nick Santos did the UI design for these screens with feedback from the rest of the core team.

littleBits Education | Code Kit

This is the Code Kit App Canvas. On the left are the drawers for getting blocks from. On the right is any instructional content. The bottom contains feedback about connection to your circuit. I was a core team member on the UX design of the blocks, including deciding which blocks were included, and what level of abstraction we presented to our users.

littleBits Education | Code Kit

In addition to the core kit experience, we put a great deal of time and effort into supporting resources. Nick Santos designed the UI for this page, and Erin Mulcahy lead content development. I was responsible for storyboarding, producing, and directing all of the videos on this page.

littleBits Education | Code Kit

One of main challenges of this kit is conveying coding concepts to kids in ways that are meaningful and helpful. Our goal is for inventors to draw all of these conclusions on their own, but since every student learns differently, we wanted to provide this as a pathway for students and educators alike to familiarize themselves with the content through metaphors and examples. Chloe Varelidi and Sarah Page lead the content development for these videos, and I was responsible for Art Direction, Producing, and Editing them. Here I am linking my favorite two: Variables, and Logic, but there are more available to view on our YouTube channel.

littleBits Education | Code Kit
littleBits Education | Code Kit

I was the lead graphic designer for the print collateral in the Code Kit. Jorge Chuquihuanca took on most of the graphic design of the Bit Index.

littleBits Education | Code Kit

These are small details on the trifolds that come with the kit.

littleBits Education | Code Kit

These are some sample spreads from the Bit Index. I created the illustrations and worked on content and layout.

littleBits Education | Code Kit

These are spreads from the new "Bits not in this Kit" section which aimed to help students understand how the system of littleBits works, and to give them ideas for other inventions that that might want to make with other kits.

littleBits Education | Code Kit

These are assorted prototypes from user testing that was conducted in the early R&D phase. We conducted extensive user testing with many different versions of programming paradigms to determine which best facilitated the learning of coding principles through play.

littleBits Education | Code Kit

These are some of my 100s of notes on block ideas, user interfaces, and the various tradeoffs associated with design decisions. I can definitely draw these blocks in my sleep now.

Many thanks go to the teams at Google Blockly and Scratch for their pioneering and enabling work in the design of block-based coding languages.