Add to Collection
About

About

A reimagining of the web-based education tool Codecademy as child-oriented mobile app.
Published:
'Codecademy Kids' Title / Loading page.  I wanted this app to look like a child's arts & crafts project.  Nearly every visual element looks like it was cut out of paper or cardboard, and drawn, painted, or pasted together.
 
All assets were created with consideration for the retina display.
This little monkey is Ratchet.  He's a "robot mechanic" and needs help building his robots - so he's going to show us how!
 
Rather than having students pursue badges, why not have them pursue items that have a story behind them, or at least some context?  Instead of badges, let students earn collectable robots.
 
Online Codecademy lessons are divided up into Tracks - Weekly Courses - Sections - Subsections.  Each weekly course would be a new robot to build (earn).  Each completed section would be equivalent to helping Ratchet build one part of the robot.  In the above sample, completion of the first section awards the student with the robot's feet and legs; the next section would earn the student the robot's torso and arms, and the following would be the robot's neck and head.
 
If some weekly courses have more sections than others, just design a robot that has a corresponding number of parts.  The robot can have multiple heads, arms, legs, or other completely imaginary appendages - they don't have to be anthropomorphic.  
I think having a drag and drop 'template system' would make coding simple for children.  In the previous image, there is a green button in the expanded toolbox that says "variable."  The student only has to drag and drop this "variable key" into the notepad.  Once the key is dropped - or "pasted" - it becomes a basic template for a variable that the student can customize.
 
Also here, the hint button (the question mark) has been selected, and Ratchet is giving the student a little help.
In order to create more complex lines of code, the student can drop a new key within a template that has already been created.  The paper texture expands to encapsulate all code contained between brackets.
 
In the online version of Codecademy, there are several points of interest on screen for the student to look at in any given moment: the instructions, the editor, and the console.  This might be a little confusing for a younger student, so I've consolidated all of that text into one location, and defined conventions for delineating between each type of text.
 
All instructional text is contained in word balloons.  Grey balloon text is purely informative, blue balloon text indicates that a task is being given, and pink balloon text appears when the hint / help button is tapped.
 
All editable code is contained in pieces of colored construction paper.  Anything that would be in the editor appears in this format.
 
Anything that would appear in the console is shown as grey text written directly on the notebook paper.  
 
The holes in the looseleaf paper are a visual element to help the student keep from losing his or her place when scrolling.
Here's all of Ratchet's individual parts.  He too is put together like an arts & crafts project.  Each indivudual piece can be exported as a single image, and would be fairly easy to animate.
While writing out full lines of code might be a bit much for the young beginner, one way to provide more complex challenges for advanced students would be optional mini-games.
 
In the above mini-game, the student has to connect each part of the function end-to-end, and in the correct order, before the lines of code hit the bottom.  If successful, the lines of code disappear and points are awarded; if the student makes a mistake, the mistake is highlighted in red and the lines of code are added to the bottom of the game screen.
This is a close-up of the robot from the above samples (I'm calling him Elmer).  Having the student collect characters instead of just badges opens up the possibility for all kinds of social features.  
 
Perhaps, if a student is particularly active one week, he or she can choose which robot they'd like to collect for that particular set of lessons.  Maybe there could be themed robots for Christmas or Halloween?  There might even be ways to work the student's robots into other mini-games.