Designing accessible coding apps for young makers

Designed for how kinders learn
Duration
10 week project
The team
1 Lead UX Designer
1 UX Designer
8 Engineers

Reimagine the coding experience for children

Firefly was inspired by my experience as a young woman in tech and redesigning a DIY electronics kit for a startup.

Firefly is a proof of concept for a new generation of coding apps designed to be accessible to children of all backgrounds.

My role as the lead product designer
I developed the project proposal and led the product development to create a prototype for a new type of coding app designed for children 4-6 years old. My primary role was to create a shared vision for the design elements that were key to creating a coding app designed for our youngest creators.
Vertical coding blocks link together in a single column with 1 command per block. The results is a text heavy, linear pattern that is rigid, and goes against the left to right reading pattern children are learning at this age.

Drab colors, retro styling and references to shearing sheep?

This coding experience reduces programming to a linear set of lines of code that lose meaning and strip away creativity. Dark colors, military references, and retro pixelated visuals create an exclusive gamer aesthetic. After completing the code for a single game, many children spend the rest of their time playing the game repeatedly.
2019 San Diego Festival of Science Engineering

The inspiration

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.

Stakeholder interviews

We pair interviewed engineers over zoom

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.

A Millennial Dad walking his daughter to the local preschool

Ava, our kinder coder

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.

Project scope

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.

Design Deliverables for Stakeholder Meeting
Key Objectives
  • Simple, quick access to app in 3-5 steps for parents and children
  • Fun, visual, simple, interactive tutorial in 5-7 steps
  • Touch interactive experiences
  • Identify core concepts and coding tools to maximize flexibility
  • Play space to tinker with ideas that build and connect
The prototype
  • Create, read, update, and delete accounts
  • Family accounts to manage children accounts
  • Tutorial onboarding, open and close tutorial
  • Create, read, update, and delete a file
  • Create, read, update, delete coding blocks
  • Connect and disconnect coding blocks
  • Start, run, and stop connected coding block programs
Initial Designs
  • Direct Competition
  • Scratch
  • Flexbox Froggy
  • CodeSpark Academy
  • Indirect Competition
  • Arduino
  • Littlebits
  • CodeSpark Academy

Designing for parents and kids

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.

Parents
  • Tech related jobs
  • Juggling many responsibilities
  • Sweat the details for their kids future
  • Comfortable leveraging tech solutions
  • Concerned about safety and security
  • Value educational learning from trusted sources
Children
  • 4-6 yrs old in preschool or kindergarten
  • Learning to read
  • Watching videos on an iPad
  • Love messy chaos
  • Love playing and testing boundaries
  • Love explosions of color and sounds

Build trust with clear parental onboarding

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.

Design reviews were a great place to revisit our decisions

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.

The animated background is fun but distracting! 
The new background lets the colorful fireflies stand out!

Whimsical onboarding set the tone

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.

Initially we placed components on cards and I revised this design after feedback to achieve a cleaner, simple feel.
An early prototype of our firefly personalization

Tap into imagination with imaginary worlds

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.

Worlds are portals to different adventures. Simple labels and big pictures to represent the worlds for easy selection. In later iterations we plan to play with responsive interactions such as a narrator giving an audio description for a single tap and a confirmation/double tap to open a world.
The firefly is a visual cue for what the program contains and showcases the growing world of different types of fireflies that have been created.  We did notice with some testing that adding new fireflies was very exciting. We added the sleeping state to identify firefly files that had not been started and to add the temptation to wake them up with some coding!

Creating a visual system for our coding canvas

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.

The canvas had to be simple and flexible.

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.

Iterating block shapes brainstorm

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.

Little hands make big ideas with Firefly!

The future of Firefly

It was an incredible experience working with the Firefly team. The energy, respect and enthusiasm our team brought to the development of Firefly is inspiring. Team members learned new skills to make Firefly possible. We didn't always agree but we always hashed out the ideas as a team. Each time, this collaborative process moved the project forward.

Future plans for Firefly include designing an interactive onboarding tutorial, additional coding blocks, usability testing and preference testing across platforms to refine product market fit. Larger scale developments include integrating security and billing microservices, building a community portal, and researching case studies developed in cooperation with educational institutions to assess the learning benefits. The next ambitious phase of product development will include additional worlds, multi-player versions, and scaling up the content as children expand their skills. Our imagination is our only limit!
Previous case study
Budget Blocks