Case Study

Ivy

Envy created a license-able course platform that teaches code to anyone.

Nathaniel Bibler Ayana Campbell Smith Tyler Hunt Dray Lacy Nick Walsh John Wilson

Project Details

The Idea

By 2013, Envy had built the same thing for multiple clients: a training platform that taught code in-browser. Seeing a common need, Envy took lessons learned and built one common platform to handle the common use cases for future needs.

Ivy

Project Goals

  1. Delightful course authoring

    Distributing educational content online has already proven to be the most effective form of delivery—both for consumers as well as authors. With Ivy existing as a web app, it inherently wins at distribution by default. If Ivy can nail the content creation process, making it enjoyable to author content, it will have the makings of a great education platform.

  2. Executing code in the Cloud

    By running code in the Cloud rather than on a user’s machine, it would free up small-to-medium businesses and large corporations from having to take care of extensive setup, maintenance, and IT for the purposes of training. Similarly, content distributors could net more sales with content that requires no setup from users.

  3. Develop one system for multiple clients

    Learning how to code is more than a hot commodity—it’s a critical job skill that’s only growing in demand. If Envy can distill the core needs of online educators and internal training managers into one growth-ready product, everybody wins.

Research + Prototype

Content First

Design always starts with content—both the visual and architectural disciplines of design. Our exploration for what Ivy was capable of started with a rich editing experience inspired by new platforms like Medium.

Course Builder

Brand Exploration

The name of the platform was inspired by the Ivy League schools of New England, and the first place our Floridian brains went to was its fall foliage. Several concepts were explored in this area, incorporating an academic transitional serif with greens and burgundies.

Ivy brand work

Designing an Imaginary File System

One of the platform’s biggest strengths was one of the hardest to design for. The appeal of Ivy is the ease of learning programming with all the files and tools in the browser. But the question then becomes: how do we design something new, that still feels familiar? These were only a few of the explorations of the split-pane code view.

Early Course Player designs
Design + Build

Course Player

The Course Player is the end point that brings the content and the interactivity together. Courses always begin with a single column content layout, then it brings in a code editor as needed for interacting with a command line.

Course Player

Course Builder

The Course Builder is where content is curated and organized and test scripts are created for code challenges. Everything course authors and editors need is contained within this layer.

Course Builder

Customized Analytics

In order to make sure courses are performing as expected, the analytics layer gives insight into which questions are too easy and which ones might be too hard.

Course Builder
Deliver

Results

Centralized content, available everywhere

Having one central source of knowledge means there’s no printing cost, no confusion over what’s updated and what’s obsolete, and no delay in distributing new material and recalling old material. Everyone logging into Ivy always get the most up-to-date information at all times. Updated material is available instantly to consumers, and analytics helps clients see the results of that.

Zero-configuration education

Learning programming itself is hard enough, but there’s also gratuitous setup required before even starting. For corporations, it takes an entire team to maintenance and update machines for work. In-browser training, however, requires no setup whatsoever, and works consistently on every device. Users can even progress across multiple computers, tablets, and phones with no gaps in-between.

One education solution for a common problem

Because Ivy is license-able, companies save year-over-year on having custom development work done. What’s more, maintenance is built into the license agreement, as well as new features released over time—what one licensor gets, every licensor gets, with no added cost associated with new features.

Case Study

Explore Data Science

Envy used the breadth of space and the excitement of a video game to teach Python for statistical analysis.

Learn More
Case Study

EduTyping

Envy redesigned an online platform that teaches and improves typing skills to students of all ages.

Learn More