When I arrived at Anki, Cozmo “CodeLab” Version 1 had just been released – it was a way for a user to use simple Scratch-style blocks of code to program their Cozmo robot.
I was brought on to design CodeLab V2 – a greatly expanded tool that would program both simplified horizontally-arranged program blocks for beginners, and a more fully-featured vertically-arranged format for more advanced programs.
In this example, a child is using the vertically arranged version of CodeLab to program some of Cozmo’s more sophisticated features, like recognizing facial expressions and finding their way through a path:
Code Lab includes several example programs that users can explore to learn by example – or edit to make new creations.
The design shows the projects on tiles with an example image to get a sense of the sort of fun that might be had by playing the program with Cozmo.
The design of the new, more powerful vertical programming includes a set of categorized color-coded blocks on the left side of the screen, buttons to access help, save, share, magnify, and control the playing of the program on the Cozmo robot.
It was quite a lot of functionality to contain on one screen! (especially since the programs could grow by placing many blocks onto the workspace.
Simple controls and expandable folders of blocks helped to keep things from getting unwieldy.
Lots of sketching helped me think about how to get everything to fit peacefully upon the screen.
Specs with interaction details were used to tell the story to the team, and help communicate details to my UI Design coworker.
I used sketching to help understand the design problem better –
- How would a user new to CodeLab be introduced to a program for a First Time User Experience (FTUE)?
- How would the two types of programming (horizontal and vertical) exist together in CodeLab?
- How can a user take an example program and remix it into their own creation?
- How would a user share their project with others?
