Deepen children’s programming skills through text-based coding

micro:bit — Python Editor

Skills
  • Product design
  • Prototyping
  • Ux/Ui development
Collaborator
  • Blimp Studio
Screenshot of Python Editor on iPad

micro:bit are a digital education charity with the aims to inspire children's creativity through digital means. Learning Python, can enhance your programming skills. Together we developed a new online platform to help achieve this goal.

I was brought in to developed a new design language and interface. Defining new patterns and organising principles to micro-interactions and icons. Working in close partnership with stakeholders, engineering team and education experts to problem solve and rapidly create prototyping for testing and evaluation of new features.

Close-up of Drag-and-drop code components
Drag-and-drop code components

Working with the education team, we developed a new innovative code block module. One that would display a specific piece of code, explain how it worked, simple parameter definition, then allow the user to drag and drop the code element into the main body giving feedback it, using subtle micro-interactions to help the user understand where the code syntax should be placed.

Consistency new icon set

We developed an entirely new set of icons, one that would provide visual cues that enhance user comprehension and navigation of the many code modules available and the program's usability.

Custom icon set for Python Editor
No micro:bit, no problem

One of the most significant challenges we faced was creating a new built-in micro:bit simulator that needed to be simple but also allowed advanced users to create complex control systems with multiple functions.

After research, we created a series of prototypes, tested them, and then iterated the design based on what we learned. The solution was a 'tray' system that could accommodate the large array of controls and be added to the simulator when required. This kept the main interface clean and straightforward, allowing users to test their code efficiently and effectively.

We delivered a fully documented design system and worked collaboratively with the development team to provide the new Python Editor in record time and on budget.

Webby Award nominee 2024.

The Micro:bit Python editor is perhaps the best editor I’ve seen: the drag-and-drop code feature is amazing. Outstanding work!

@Kevin McAleer Robot Maker

Starting something new? I can help make your ideas real.