Firefly is a proof of concept for a new generation of coding apps designed to be accessible to children of all backgrounds.
Project Bloks, a tangible programming system designed by a group of interaction designers and programmers in the Google Creative Lab for preschoolers, was an inspiration for creating a new visual system for children who did not have access to hardware or expensive kits.
My idea was to design “blocks” holding chunks of functional code that can be manipulated and combined to program animated smartware. These "smart blocks" are more flexibly connected compared to earlier block coding programs.
To get approval to move forward, we had to plan the project scope and get buy in from engineers on the feasibility of the design. We interviewed six engineers remotely to discuss the product design and technical requirements for the development including the development stack, feature list and platforms.
Our stakeholder interviews revealed an unexpected customer, Millennial Dads. We initially thought mothers would be our primary customers. Consistently, our stakeholders mentioned either their hopes for their own children to learn to code or that they were the point of reference for family to recommend technology for their family. I followed up on this with further research.
What I found was that Millennial Dads are taking more active roles in childcare. They are focused on making decisions to prepare their children for success in life. Additionally, dads were willing to take risks on new technology and spend more money if they felt it would give their children an advantage in life. “Learning to program ensures their future!”
I created a persona, Ava, compiled from observing students in preschool and elementary school. Ava just turned four. She is a kangaroo in training. She has opinions about the world and shares them with anyone within earshot. She experiments and tests boundaries. She is getting ready for elementary school and is excited to have a new audience.
I teamed up with my UX partner to prepare the project proposal. We conducted stakeholder interviews, preliminary product and user research, and sketched initial designs to present and get feedback from our manager. During the proposal process, I would check in with our manager. He spent most of his time asking questions. If I didn’t have an answer, it became a task to research.
Because of the competing goals between children and parents, we decided to make clear distinctions on product spaces designed for adults, the primary customers, and kids, the primary users, of our app. This shared understanding made design decisions later down the road much more clear.
The two key features we focused on for parents for the app, was the ability to manage family accounts and the initial onboarding where parents “hand off” the iPad with Firefly to their children.
We were lucky to have several team members with children the same age as our target audience. We were able to ask questions and run quick demos as well as get insights as to what patterns already worked well signing up for apps. We knew that there would be a need for a parent/adult account to manage the children accounts. We created customer accounts that would sign up and created a clear path to hand off the game to the children. The parents begin the fun with simple profile creation which allows children to customize their firefly.
Initially, a lively patterned background was suggested by a talented developer with an art background. When you are leaning into tapping creative thinking, swatting down ideas without consideration can deflate the momentum. My strategy was to do some design work by sampling all of the possibilities and sharing the results with the team. Showing several variations allowed the team to see the reasoning behind the decision and they appreciated that I showed them the explorations.
Customizing characters with fun accessories creates excitement and ownership within the first couple of seconds. Changing the color was a good mechanism to introduce the idea of changing colors and the sliding bar color selector. We knew we didn't have time to develop a full blown tutorial so this onboarding step was important.
Firefly taps into children's desire to explore by providing different worlds. We drafted some ideas for access to additional worlds for future feature releases. Creating additional worlds expands the in app experience and also organizes coding files by location. A key element was the experience of being immersed into a word. The same developer who surprised the team with the lively background came up with the idea to make the saved games or files the fireflies. This showcased a growing world of fireflies, each a unique creation.
We felt it was important to use language that evoked the sense of art and play. We called our dashboard the canvas. There were questions to address with the dashboard of where the coding blocks could be accessed and how would children play with these blocks. How would they save a program? How could we do this visually without a text heavy experience? My UX partner and I divided and conquered. She focused on the dashboard while I focused on the coding blocks. We discussed our ideas and would send screenshots of progress to keep in tune with each other's design direction. We also zoomed multiple times a day to iterate ideas live and get feedback.
After this iteration, we realized we needed a big open space for development and a bigger firefly for feedback on coding progress.
I describe our goal as creating a the digital experience of playing with a pile of blocks on a floor to build, take apart and build something new. We added indicators for blocks in use and locked blocks that were features to be released. We created a starting state and worked out how the fireflies would open their eyes once the first blocks were successfully connected.
A design showing the new starting state of the game before the first block was dragged to the canvas.
Future development mock up showing how blocks can connect both horizontally and vertically
We increased the visibility of the save and exit canvas button.
We added a tutorial button shaped like a book and a trash can to remove blocks.
The blocks needed to be flexible to allow multiple combinations and connect. I started with simple shapes and quickly iterated variations. The key was to start simple rather than backwards design a complex shape. Because we were working with digital forms, we had the freedom to play with rounded, squishy shapes. The idea was that there would be a life-like give to the shapes. For now we focused on the initial shape.
The feeling of playing with legos in a virtual playground is the key to changing the experience of learning to code. Our team discussed the tangible characteristics of building with legos and translated this into a virtual block.
The blocks needed to be flexible to allow multiple combinations of connections with responsive feedback.
Visual cues as well as audible feedback was key. We discussed how to communicate the sensation of clicking the blocks together with a visual language that would make testing and experimenting part of the fun of building.
We designed a universal shape with a horizontal connection for the first phase of development and focused on creating the visual icon language.