Li’l Robin’s founder Anke Stohlmann at <codr> presentation, June 5, 2014.

For today’s students, coding is the new literacy: If they don’t know how to code, their job prospects will most certainly be limited in the future. In a YouTube video posted for Computer Science Education Week last December, President Barack Obama asked the U.S. to learn how to code: “If we want America to stay on the cutting edge, we need young Americans to master the tools and technology that will change the way we do just about everything.”

Block-based code (Scratch), left; professional code, right.

Many children are now learning basic coding skills in Scratch, a popular programming environment that teaches the concepts of coding using a simple visual system based on building blocks. But it’s a big leap from Scratch to the “real” programming languages of Javascript, Python and Processing, and it’s hard to know which language to learn next. <codr> is a new app that helps kids “graduate” from Scratch to the more complex text-based programming languages that are used at a professional level. L’il Robin founder Anke Stohlmann collaborated on the creation of the app with the educator Keledy Kenkel and the developers Adam Wooton and Hassan Abdel-Rahman.

<codr> team: Anke Stohlmann, Adam Wooton, Hassan Abdel-Rahman, and Keledy Kenkel concepting.

<codr> grew out of our participation in a 12-Week Prototyping Bootcamp, a series of workshops presented by EDesign Lab in partnership with 4.0 Schools. Both organizations are incubators that seek to “hack” the future of education, bringing together entrepreneurs, educators, technologists and designers to co-imagine and rapidly prototype interactive learning experiences that improve student engagement, motivation and success.

Prototyping Bootcamp: reviewing and grouping concepts, looking at patterns, and creating teams around concepts.

The Bootcamp selected eight teachers and seven technologists (including Anke, the only designer) to work in four teams over the 12-week period. Following a series of introductory exercises at the first meetup, the teams were formed and began work on their concepts. Our idea for <codr> came together organically out of our discussions. Keledy is a computer science teacher and wanted resources to support her students in learning how to code inside and outside of the classroom. Adam and Hassan had their own experiences to share as developers, and Anke had an intimate knowledge of Scratch through her daughter Luna, who uses it to make animations.

Prototyping Bootcamp: prototyping and user testing.

Following EDesign’s guidelines for the concepting and prototyping process, we created storyboards, paper prototypes, and finally digital prototypes. We defined the perimeters of our project, gathered and analyzed our research, and began setting out the flow of <codr>’s learning interactions. We then created a functional prototype, to see how the concept might work in action. Keledy teaches at Packer Collegiate Institute in Brooklyn, and we were able to test the prototype with her students, who provided invaluable feedback. Based on conversations with the kids, we made substantial changes to the application, including the creation of a widget version. We shared the project at a showcase in New York City earlier this month, where we welcomed feedback from other participants.

<codr> team: Anke Stohlmann, Adam Wooton, Hassan Abdel-Rahman, and Keledy Kenkel creating first paper prototype.

Scratch is incredibly successful at getting kids interested in coding. Developed by the MIT Media Lab, the application uses a highly visual system to teach the fundamental principles of how coding works. Students drag and drop group blocks of different colors and shapes to program various interactions for simple animations, games, and other media—literally “building blocks” of code. Fun and easy to use, Scratch demonstrates how programming cues work and quickly captures the imaginations of young students—not to mention adults—who want to learn programming or dip their toes into computer science.

It’s the next step that’s more difficult. “Even my students who excel at programming in Scratch struggle when they transition to text-based programming,” says Kenkel. “When they hit that wall of text and syntax errors, they stop and lose interest.”

During our research, one sixth-grade student told us learning a new programming language after Scratch “is like someone from the baby pool jumping to the deep end of the pool.”

A fifth-grader told us, “I tried to learn Javascript, but I had a hard time getting all the brackets right.”

<codr> site.

<codr> is designed to make it easy for students to “graduate” to a second, professional-level programming language after Scratch. Developed as a site and a widget, the app helps support students in translating what they already know into learning their next programming language.

The coder’s identity is facilitated in figuring out which language might be best. The student first takes a quick, engaging quiz that asks if they consider themselves an Artist, Gamer or Storyteller. Next, their goals for programming come into play: Do they want communicate with others, build beautiful things, or entertain themselves and others? The last round of questions asks what they consider a successful program, and the final results recommend the next programming language they should learn.

<codr> widget.

The app then guides the user through several side-by-side comparisons of Scratch and similar codes in the selected language. <codr> uses the Scratch blocks as a reference tool while coding in the new language, translating key concepts. The user interface is simple and easy to understand, echoing the basic structure of Scratch while providing a bridge between the two languages.

We’ve learned a lot ourselves as the project has progressed. Moving forward, we plan to further test and refine the <codr> site and widget, and to develop more content for the pilot before placing it in a few classrooms this fall. In future versions we’d like to utilize coding mistakes as a learning opportunity, and to perhaps use video as an instructional tool. We’re excited to see how the <codr> learning environment can be extended into an educational experience that gives students the coding skills they need.