Available now

Deepen children’s programming skills through text-based coding

micro:bit - Python Editor

Skills
Product Design
Prototyping
Icon Design
Ui/Ux
Working with
Blimp Creative
Year
2021
Working closely with the micro:bit product team, we developed a new design language and interface. Our work ranged from defining new patterns and organising principles to micro-interactions and icons.

Our close partnership with stakeholders and the engineering team allowed us to rapidly create prototyping of new features.
Example of drag-and drop code component

Drag-and-drop code components

We developed a new innovative code block module with the education team that would aid learning by displaying a specific piece of code, explaining how it worked, allowing the user to adjust parameters easily, and then intuitively drag-and-drop the code into the main body, using subtle micro-interactions to help the user understand where the code syntax should be placed.

New icon set

We developed an entirely new set of icons, one set that refers to the device and attributes it had and a second set that would visualise complication coding concepts.
New 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 testing prototypes and iterating design, we developed a ‘tray’ system to accommodate the large array of controls, which can be added to the simulator when required. Keeping the main intercase clean and easy to understand.

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.

Imaghe of robot's head
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