Redesigning Our Learning Environment: Process


The Objective

The main challenge we faced was to design a platform that could teach any programming language.

The Process

The Modular Framework

Evolution of the Codecademy learning environment.
Exploration of different models for flowing through content. In the end, Model D proved to be the most effective in terms of providing flexibility.
While the Header and Navigation elements comprise the shell, the workspace consists of a flexible 3 x 2 grid.
While the grid allows for more layout permutations, these modalities became our Content team’s initial toolset.

Detailed Interactions and Visuals

We are not only teaching people how to code, but also how to use the tools developers use every day.

Each module’s functionality and detailed interactions were explored and documented carefully. One of the most important modules was the Code Editor, pictured here in different configurations.
First iteration of the new Codecademy Learning Environment.
We experimented with both a light theme that resembled the look and the feel of the rest of the Codecademy website, and a dark theme, which offered a more immersive, truer-to-life experience.
Different modalities of the learning environment in final visual design.


Second iteration of the Codecademy Learning Environment.
The file navigator module, part of the feature set for the second iteration of the learning environment.

What We Learned

About Codecademy

Lessons learned while teaching the world to code

    Andres Iga

    Written by

    Product Manager at @Codecademy.

    About Codecademy

    Lessons learned while teaching the world to code