Micro Code
For Microsoft's Global Hackathon 2022 my team developed MicroCode, a kid-friendly, icon-based, structured code editor and programming language that runs on micro:bit, an inexpensive physical computing device.
I was in charge of the code editor's interaction and visual direction, including icons, UI, and animations.
Learn more about the development of this project beyond the hackathon here. You can also try out the latest version of MicroCode directly in your web browser here.
preparation
Instead of writing block-based code with text, young learners create programs by connecting a series of picture-based icons. This makes it even easier for children who are beginners, pre-readers, or visually impaired to get started with coding.
How might we teach young learners computer science fundamentals through an icon-based coding editor?
icon design
The screen has a limited resolution and a fixed 16 color palette, so even a single pixel can make a huge difference. Within these constraints, I needed to ensure icons were didactic, playful, and (most importantly) grounded to a system mapped directly to the physical hardware.
📐 Didactic
Break down complicated coding principles in easy analogies that kids can grasp.
🦄 Playful
Icons should be inviting, inspiring, and fun for children to learn through play.
🎮 Grounded
Create a clear connection between the digital display and the physical hardware.
In one example, in my initial designs for the A button and B button were generic round buttons you might see in video game UI. However, we decided to make the shape triangular, mapping directly to how the micro:bit hardware shows them. Not every shield accessory has the same button shape, but every single micro:bit has the same triangular motif, so we chose to follow the same pattern.
In another example, the original LED light editor was sharp red squares in a grid. To further emphasize the relationship between the screen and hardware, I tweaked the shape of the tiles to be more like vertical rectangles, mimicking the shape of the LED lights on the micro:bit.
Learnings
The hackathon challenged us to work creatively and efficiently in a tight timeframe. One of my biggest learnings was figuring out how to work directly in VS code to ensure my engineering partners could focus on more important tasks while I implemented the icons and assets for them.
reception
In 2024, the research team led a study on the effectiveness of MicroCode in classrooms. (Meet MicroCode: a Live and Portable Programming Tool for the BBC micro:bit)
The research showed that icon approach worked well: “Children liked it as they could see the icons and the workflow: “The resolution of the screen was good. Easy to read and understand icons”, “I made a whole sentence at the top, super easy you just need to click on the icons to make the letter”.
The research also found that the UI had a positive aesthetic and sensory appeal:"I liked how MicroCode looked", "I had control over what I was doing with MicroCode".
Although some new features have been added since my involvement on the project, such as saving/loading and robotics integration, the visual foundation I led during the hackathon paved the way for new icons and features to easily fit into the design system as the project grows.
