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.
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.
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.
This is a prototype for the learning goals of the kit. David Sharp designed this.
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.
These are some early ideas for platform UX.
An early sketch of what a Guitar Hero - like game could look like.
Some early ideation around different types of variables.
A critique of one of the many iterations of blocks we had.
More block ideation.
Showing clearly the difference between different implementations of a pixel block.
A sketch of code for a Guitar Hero game, with key blocks highlighted. Seeing blocks in context was essential for determining how to implement.
A sketch of an alternative way to do expressions to avoid "block-ception" effect that happens with long math expressions in vanilla blockly.
Another example of code, showing what a Space Invaders-type game could look like.
Ideation for some innovative variable definition blocks.
More ideation for images, animations, etc.
Early invention concepts
A great graphic by Dave Sharp that explains how features to a game create a need-to-know for furthering code skills.
A goofy idea for a narrative that would tie together the kit experience.
An idea for an invention adviser toolkit.
Collateral ideation.
These are the highlights from collateral exploration and prototyping. I tried out many directions for each piece in the kit.
Prototype of the trifold for students.
Early sketches for the monsters I illustrated on the cover of the kit.