avengers box and app_zoomed out_bright.jpg
avengers pose.jpg

Hero Inventor Kit

Build Hero Gear. Code Your Own Super Powers.

With the littleBits Avengers Hero Inventor Kit, kids can build and customize high-tech hero gear using littleBits electronic building blocks. The self-guided Hero Inventor App takes kids on a journey to invent their own unique super hero through a series of training activities led by their favorite Marvel characters. Kids build STEAM skills and creative confidence as they learn to control their gear with a smart device, give gear new abilities with block coding, and use their creativity to invent new powers and a unique hero identity.

2018 | MSRP: $149 | Audience: Kids 8-12

Role: Experience Design Lead

Responsibilities: Design Direction, User Experience (across physical, digital, & content), Content Development, Prototyping, User Research, Journey Mapping, Brainstorming

Collaborators: Elaine Khuu, Chloe Varelidi, Nick Santos, Rochelle Lo, Rowan Wernham, Sky White, Jordi Borras, Antonio Hernandez, Wes Thomas

3 awards_transparent copy.png

The Challenge

1. Equal Representation 👯 

Partnering with Marvel presented an opportunity to reach a substantial new audience. As this audience skewed heavily male, the challenge for littleBits was to come up with a concept that was inviting to girls.

2. Continue Momentum 🛵

Following the successful launch of the Droid Inventor Kit in 2017, littleBits looked to continue the momentum by launching another product with Disney, this time with the Marvel franchise. 

3. Emphasize Learning ✏️

As littleBits began to lean heavily into the education business, we also looked to bolster the STEAM learning in our consumer kits.

Insights

Throughout the design process, we worked with kids and parents to get their input on all aspects of the product. We also learned some important lessons from designing the Droid Inventor Kit the previous year. 

Insight: Inventing superpowers was a powerful draw for kids.How might we use the modularity of littleBits to help kids invent unique superpower interactions?

Insight: Inventing superpowers was a powerful draw for kids.

How might we use the modularity of littleBits to help kids invent unique superpower interactions?

Insight: Girls connected with the concept when invited to customize and invent their own hero. How might we emphasize self-expression while staying true to the Marvel universe?

Insight: Girls connected with the concept when invited to customize and invent their own hero.

How might we emphasize self-expression while staying true to the Marvel universe?

Insight: Kids can get overwhelmed when there is too much information. How might we create a user flow that is incremental and repetitive, but still fun?

Insight: Kids can get overwhelmed when there is too much information.

How might we create a user flow that is incremental and repetitive, but still fun?

 

 App Experience

The Hero Inventor app acts as a digital invention advisor for kids. Kids go through a series of step-by-step instructions, creative play prompts, and open challenges to build their gauntlet, learn how it works, and ultimately invent their own hero gear.

 
avengers construction.jpg

The app is made up of 6 phases, each accompanied by a Marvel superhero. Training activities start simple, and incrementally become more complex as kids build skills and progress through their hero training.

 
handphone-v1-2.gif

Each character presents a series of inventions and activities that align with their superpowers.

 
 

Each character’s superpowers are tied to specific littleBits. By completing inventions and activities in the app, kids learn about the functionality of the Bits.

 
iron%2Bman%2Blight%2Bpowers%2Btight.jpg
app_matrix_how%2Bit%2Bworks_tight.jpg

Animated instructions help keep kids engaged and call out important details.

 
cover snap.gif
matrix button gif.gif

The littleBits BLE Bit connects to the app and allows kids to control and code their circuit from a smart device.

code new powers_no text copy.jpg
 
avengers coding.jpg

Kit Components

avengers gauntlet.jpg

The Kit comes with 9 Bits, 7 Hero Gear Parts, and two Sticker Sheets.

 
avengers+bits.jpg

Due to the wearable nature of these accessories, they were designed to be easy to assemble and durable during role play.

 
avengers+parts+transparent_small.jpg

The plastic parts are all either white or clear, providing a neutral base for customization and self expression.

 
avengers custom gauntlets.jpg
avengers%2Bcover%2Bstickers_white.jpg

Explorations

Defining the Experience

Superpower interactions drove the physical and digital outputs in the kit.

We had kids dream up superpowers they would like to have and draw out their ideas.

We had kids dream up superpowers they would like to have and draw out their ideas.

User testing concept test.

User testing concept test.

invent-like-a-superhero.jpg
brainstrom_avengers.jpg
00_Core Doc_ Malibu User Journey.001.jpeg
 

Extending Play

Insight: Kids don’t like to take their inventions apart. They want more out of the invention they just built before moving on to a new build. While “play prompts” are included at the end of each invention, kids often skip over them.

Our solution: Elevate “play prompts” to the journey menu and turn them into specific activities. Kids spend more time playing with what they just built while gaining a deeper understanding of the circuit’s capabilities.

journey-template_tight.png
app nav_black widow.jpg

Standardizing Build Instructions

We created a template to simplify how we deliver instructions with the app.

Instruction standardizaion sketch.jpg
build instructions_1000.gif
 

Designing a Customizable Wearable

We explored different options that focused on ease of assembly, durability, and usability.

Early sketch of the gauntlet

Early sketch of the gauntlet

Measuring kids’ arms

Measuring kids’ arms

Many, many prototypes

Many, many prototypes

gauntlet_prototype_panther.jpg
Testing out customizability with craft materials. The cover is designed with strategic slots and holes for attaching various materials.

Testing out customizability with craft materials. The cover is designed with strategic slots and holes for attaching various materials.

 

Creating a New Matrix Bit

Light patterns and superhero icon creation drove the design of the Round LED Matrix Bit.

Defining preset interactions

Defining preset interactions

Early Round LED Matrix prototype

Early Round LED Matrix prototype

Drawability test on round matrix

Drawability test on round matrix

Test template for kids to draw on

Test template for kids to draw on

Next
Next

Droid Inventor Kit