Code Kit Process

August 15th, 2017

The Code Kit was by far the biggest undertaking I've ever done as a designer. Over the course of my one year on the project, by the numbers the team completed (estimated):

  • 200+ invention ideas
  • 100+ code block ideas
  • 60 collateral prototypes
  • 60 pages of storyboards
  • 45 user testing sessions
  • 10 photo or video shoots
  • 4 iterations of a custom font for the LED Matrix
  • 1 weekend spent drilling holes in a piece of Canadian birch for the video backgrounds

You get the idea!
Specifically, projects that I worked on from start to finish of the code kit were:

  • Prototyping and user testing to determine the coding paradigm
  • Prototyping and user testing the UX of the App interface
  • Prototyping block ideas
  • Ideating and refining the kit experience
  • Ideating and refining invention concepts
  • UX ideation for functions and variables in the app
  • Producing and directing two video shoots
  • Directing animations for 5 videos
  • Storyboarding all 15 videos
  • Editing 5 of those videos
  • Lead designer on all physical collateral in the Kit

I learned a ton from working on the Code Kit. I'll try to distill it down to a few digestible points.

  • Teachers are an extremely diverse set of people. Most user groups (students, athletes, designers, mathematicians, etc.) are like this. Be careful to over-generalize in the name of "empathizing with users" are you empathizing with all of them? Or just a few?
  • An innovative idea is useless if you cannot communicate it clearly. In art school, I felt frustrated when people weren't as passionate about my innovative ideas as I was. I realize now that an idea that can't be communicated clearly might as well be a bad idea. Spending time to make your ideas clear (to the point it seems obvious to your audience) is always worth it.
  • Setting a weekly cadence of user testing helps the development process stay sober.
  • A prototype that focuses on testing an isolated aspect of an experience allows you to get data quicker, but it's extremely important to supplement that with testing that provides everything in context. You wouldn't an engine of a car and a wheel of a car and assume you didn't have to drive it around once assembled before shipping it out to a customer. Balancing the two types of testing is an art form of product development.
  • Making an amazing product takes time. Set realistic expectations. We developed Code Kit in one year and expected it to be as great as things that have been evolving for decades.
Code Kit Process
Code Kit Process

These are some prototypes from "bodystorming" a technique I learned from Cas Holman to generate fun ideas from games backwards to how it's normally done. In this exercise you make random goofy body movements and then attempt to post-rationalize the game that made the person get into that pose.

Code Kit Process
Code Kit Process
Code Kit Process

This is a prototype for the overall UX of the kit. This style of non-linear user journey helped us understand how to navigate students learning how to use Bits and how to Code at the same time.

Code Kit Process

This is a prototype for the learning goals of the kit. David Sharp designed this.

Code Kit Process

This is one of the earliest prototypes we did to learn about the UX of the coding platform. Through testing we discovered that asking students to manage a representation of their circuit in the coding task was just a bunch of busy work.

Code Kit Process

These are some early ideas for platform UX.

Code Kit Process
Code Kit Process

An early sketch of what a Guitar Hero - like game could look like.

Code Kit Process

Some early ideation around different types of variables.

Code Kit Process

A critique of one of the many iterations of blocks we had.

Code Kit Process

More block ideation.

Code Kit Process

Showing clearly the difference between different implementations of a pixel block.

Code Kit Process
Code Kit Process

A sketch of code for a Guitar Hero game, with key blocks highlighted. Seeing blocks in context was essential for determining how to implement.

Code Kit Process

A sketch of an alternative way to do expressions to avoid "block-ception" effect that happens with long math expressions in vanilla blockly.

Code Kit Process

Another example of code, showing what a Space Invaders-type game could look like.

Code Kit Process

Ideation for some innovative variable definition blocks.

Code Kit Process

More ideation for images, animations, etc.

Code Kit Process

Early invention concepts

Code Kit Process
Code Kit Process
Code Kit Process
Code Kit Process
Code Kit Process

A great graphic by Dave Sharp that explains how features to a game create a need-to-know for furthering code skills.

Code Kit Process

A goofy idea for a narrative that would tie together the kit experience.

Code Kit Process

An idea for an invention adviser toolkit.

Code Kit Process

Collateral ideation.

Code Kit Process
Code Kit Process
Code Kit Process
Code Kit Process
Code Kit Process
Code Kit Process

These are the highlights from collateral exploration and prototyping. I tried out many directions for each piece in the kit.

Code Kit Process
Code Kit Process

Prototype of the trifold for students.

Code Kit Process
Code Kit Process

Early sketches for the monsters I illustrated on the cover of the kit.