Google & Made with Code

The Story

Code to the average teenage girl (or to the average human being, really) is perceived as a nebulous mix of numbers and letters typed in dimly lit basements by socially awkward boys wearing loosely fitting clothing and eating goopy BBQ chicken wings. In other words, code doesn’t have a whole lot to offer.

—

The problem with this perception is that it’s keeping too many girls in America from coding. What makes this perception even more problematic is that technology is touching nearly every part of our lives. Sure, technology is where the jobs and big salaries are, but, more importantly, technology is shaping modern culture. And right now, one gender is doing almost all of the shaping.

That’s why Google came to us and asked us to work with them on an ambitious mission: they wanted to inspire a million girls to experience the power of code.

Looking at Google’s research, it became apparent that in order to succeed, we needed to help girls see the larger potential and outcome of coding. We realized that coding is more interesting to girls when they view it as a creative act—enabling them to create whatever it is they want to see in the world. The message was simple. Coding isn’t separate from the things you’re passionate about. In fact, coding can make the things you’re passionate about more creative, more beautiful and more powerful.

Things You Love Are Made with Code

The campaign connected code to girls’ interests and passions and gave them a reason to get excited about Computer Science. Working with Google we found inspiring role models and peers doing incredible things with code and told their stories through a series of documentaries. We shot an anthem film to inspire parents, educators and professionals to see the potential and power of code. We also invited girls to roll up their sleeves and “code their first project” by designing a cross-platform web experience that showed girls firsthand just how fun and creative coding can be. And finally, we built a mobile-first website that would become the hub for the made with code universe.

Recap video.

It was a long, exciting journey that took us all over the country and introduced us to amazing women and girls doing inspirational, creative things with code. It also allowed us to collaborate with talented developers, designers, photographers, editors and filmmakers in places ranging from L.A. and Portland to New York and London. We feel honored to have been a part of such an important initiative for Google and are grateful for the experience.

The Launch Film

An invitation to the creative world of coding.

We wanted to create something that would make girls feel empowered to create and make. But we also knew from Google that a girl’s success or failure as a coder is largely dependent on how much support she gets at school, at home and from mentors. That’s why we also wanted to create something that grabbed the attention of parents, educators and professionals—and didn’t let go.

The 3D-Printed Bracelet

A first go at code.

We built a framework to allow for more complex projects involving 3D printing a custom bracelet, animation and coding a musical beat.

We connected the coding interface with Shapeways to print the bracelets.

Girls were able to code the size, color and a personalized message. The bracelet was then 3D printed and mailed to their home.

Image credit: manrepeller.com

1/6

Code doesn’t like the spotlight. It has a tendency to be tucked away behind the scenes—deep inside hard drives and servers. You can’t touch it or twist it or put it on your shelf. With the 3D-Printed Bracelet project, we wanted girls to experience the reward of making something with code right away and directly connect to the idea that the “things you love are Made with Code.” Via the Made with Code website, girls are able to code the color, size and message of their bracelet and then have it 3D-printed and sent to their home.

Teaching Girls to Code

One block at a time.

We redesigned Blockly and expanded its functionality to work across all devices for the very first time.

Mobile first site since girls use mobile devices most often.

Projects ranged from beginner to advanced and covered concepts like variables, values and if-then statements.

Bracelet project

Beats project

1/5

Although syntax is the purest form of code, it’s not the best starting point to learn the fundamentals of coding. Building on Google’s own visual programming language called Blockly, and working closely with Google’s Computer Science education experts, we concepted a series of creative coding projects that introduced girls to coding in a beautiful, fun and accessible way. Five projects were introduced at launch followed by eight more during the second phase for a total of thirteen projects.

More Projects

LED Dress, Beats, GIF, Accessorizer, Avatar, Yeti, Dance and Robot.

With the LED Dress project, girls everywhere were able to code and light up a dress with code.

With the Avatar project, girls were able to code their own little character.

With this project, girls get to code the best GIF ever to share with their friends.

Some of the illustrations girls are able to use in the GIF project.

With the beats project, girls get to code their own beat just like mentor Wondagurl.

The Accessorizer project introduces girls to coordinates and the X/Y axis where they can code their own selfie.

Girls can animate a Yeti and get him to bust some moves using code.

The Yeti announced on the Google homepage.

A snapshot of the Kaleidoscope project.

The Robot project is one of the more advanced coding project. Really fun figuring this one out.

A snapshot of the Dance Visualizer project.

A snapshot of the Music Mixer project.

1/12

From programming beats to customizing an LED Dress to animating GIFs, more projects in which girls are able to interact with coding were added. These projects were designed to mirror their creative interests and reward their coding prowess over time.

Mentors & Makers

Coding projects tell one part of the story. Coders tell the other.

Code + Dance

Code + Animation

Code + Saving Lives

Code + Community

Code + Music

Code + Wearables

Code + Gaming

Code + Helping People

Code + Electronics

Code + Fashion

Code + Robots

We set out to tell the stories of women and girls around the country who are doing creative and meaningful things with code. We found twelve “Mentors” in places like Raleigh, Atlanta, New York and East Palo Alto. More important than the diverse geography of these girls and women was the diversity in which they are creating with and using code. Each documentary is made to intersect with the interests of girls and to celebrate the use of code in fashion, music, philanthropy, film, gaming, medicine, robotics and dance.

The Big Hug

Hey, everybody! Get over here.

The landscape of coding organizations and resources is diverse and, unfortunately, somewhat isolated around the country. Folks in groups like Black Girls Code, Girls Who Code, Code.org and Girls Inc. all needed one place to gather, share ideas and recruit the next generation of coders. Through Made with Code and Google we were able to wrap our arms around all of these fantastic groups and create continuity and community with a first-ever national directory of coding organizations and events for girls, parent and teacher resources and coding grants.

“Made with Code is a crusade we’re on together to ensure women’s voices are represented in the increasingly digitally defined world we live in. We were elated to have worked with such capable collaborators—in every sense of the word—in Mira & team. It’s been a privilege to make this all happen together.”

Jeff Whipps

— VP, Google Brand