The Clever UX Behind Hopscotch’s Programming iPhone App For Kids

The company is continuing its mission of making code accessible with the first programming language designed specifically for the phone.


In 2011, Jocelyn Leavitt, a former teacher, paired up with software engineer Samantha John to launch Hopscotch, a build-your-own-games iPad app that teaches kids how to code. The app introduces a new programming language that ditches the typical command line interface for a more visual one. Users can drag-and-drop blocks of code, essentially arranging them like building blocks.


In the two years since the company released its app in 2014, Hopscotch has been downloaded 4 million times and has over 6 million user-designed games on its sharing platform, but up to this point, it has only existed as an iPad app. This week, the company released an iPhone app. It’s the first time a programming language has been developed specifically for the phone.

Hopscotch has been eyeing mobile for years, says Leavitt, but the challenges always seemed to outweigh the benefits. Optimizing the new programming language the company created for the iPad wasn’t a matter of merely shrinking the program to fit a smaller screen. User behavior for the iPhone is different from the iPad–we often navigate our phones with one hand and are accustomed to specific apps–and coding, even in a block-based interface, takes up a lot of screen space. The company had to completely overhaul their original iPad app.

They started out by looking at what was already doing well and shaping user behavior on iPhones: texting, Instagram, and the emoji keyboard. Inspired by Instagram’s container-based system, they further developed their block-based interface so that every rule, object, action, and so on is a block (not everything is a block on the iPad app).

Asha Gupta, the company’s head of product, describes it like a filing system that you can open up to see each individual rule and then collapse it. “A fundamental part of programming is abstraction,” she says. “An overarching idea that we used in terms of how to depict these states and different ideas of abstraction was depicting them as containers that you can open and close. We’re wrapping up this long algorithm in a neat little package that a user unfamiliar with coding wrap their head around.”

In practice, that looks something like this: the user choses an “object,” or her avatar. Then you add a rule, which consists of a trigger (i.e. tap the screen) and an action caused by the trigger (i.e. every time I tap the screen I jump). Once the rule is made, you can collapse it and bring it out later–you never have to make it again. You can also put blocks together to make a new block. Combine the jump block you made earlier, for example, with a “move forward” block, and your avatar will perform a somersault.

The trigger actions available–tap, swipe, shake, etc.–were created specifically for the iPhone, which we commonly use with just one hand (this was the part inspired by the UI of texting). Gupta also needed to use every inch of the limited real estate on the iPhone, so she took a cue from the Emoji keyboard and gave the Hopscotch keyboard a horizontal scroll.


Gupta and the Hopscotch team developed the app over the course of several months, incorporating the feedback of a small batch of beta testers as they went. One of the major iterations they went through involved allowing users to seamlessly switch from coding the game to actually playing the game. For example, once you finish creating your somersault rule, a play button on the screen will change from red to green, the keyboard collapses, and the icon wiggles.

It’s important, says Gupta, that kids realize that they can actually play the game that they’re coding and see the results of their work. “A fundamental hypothesis of our company is programming is actually fun and a lot more people will enjoy it than they think they will,” she says. “It’s addictive, to be able to make something and immediately test it out, and then share it with someone.”

Teaching more people to code is a core tenant of the company, and by optimizing for iPhone they hope to make the program even more accessible. The iPhone market has grown tremendously since 2011, while the tablet market has declined. And as Leavitt put it, if we’re carrying around little computers in our pockets everywhere, we should be able to code on them.

The more overarching goal, however, is to update a programming language that hasn’t changed much since it was invented over 40 years ago, despite the fact that hardware has changed a great deal. Hopscotch’s language is relatively limited to creating games right now, but Leavitt notes that it’s open-ended, so it can become something else as technology advances.

Making programming easier to use not only open up the field to more people, it also diversifies the software available. Leavitt points to another program that is teaching girls in Mumbai to make Android apps using a block-based coding service. “These girls are making these apps that are relevant to their own lives,” like an app that helps organize the line to get water, or one that makes it easier to report a sexual assault. “You can’t imagine some Stanford graduate student white male in Palo Alto coming up with these apps, it’s just not relevant to them.”

Clarification: A previous version stated that the iPad app has been downloaded 4 million times in the five years since its launch. While the company was founded n 2011, the app launched in 2014, so those downloads are from the past 2 years. The article has been updated.

About the author

Meg Miller is an associate editor at Co.Design covering art, technology, and design.