Protected: American Girl ‘Create Your Own’ Private Case Study

In-Store, Online and Mobile Custom Doll Commerce Experience

MJD & American Girl

For a long time, dolls available to young girls have been, at best, a hint of the reflection of how they identify with themselves. Most often, dolls are an unrealistic or unachievable representation. American Girl set out to empower young girls by creating custom dolls and garments that showcase and celebrate individuality. MJD partnered with them in bringing to life a playful creation platform that inspires and delivers over 1.3 million doll options to capture girls’ imaginations.

WE LOVE A GOOD CHALLENGE

This project’s mission was simple: Create a uniquely modern commerce experience that increases the already impressive diversity of American Girl dolls and garments by giving girls a fun, easy-to-use tool to completely customize them. It turns out that getting to simple can be rather complex. As we began to unpeel layers of the project a myriad of challenges needed to be solved: How do you represent the doll or garment before customization starts? What user interface resonates best with girls? How do we talk to American Girl’s existing content management, user account and e-Commerce systems? How do you send the manufacturer a recipe for dolls when there are 1.3 million design options?

The Starting Point

Our first challenge turned out to be a tough one: What’s the best way to show a girl an image of a doll or garment that visually informs them that they can customize it?

We tried dozens of options and did user testing with girls and their moms to see what resonated. The responses ranged from “that gray doll is super creepy” to a nearly universal delight with showing multiple, completed dolls and garments as inspirational starting points. We built the user interface as a carousel of dolls and garments, showing girls the vast selection at their fingertips.

A Modern Interface for Today’s Modern Girl

The next challenge proved to be a turning point for the product, and we believe it will impact interface design for digital children’s products in general given its success. We started our concept design journey by looking at award winning digital experiences for kids, and girls in particular. That led us to a familiar place with lots of pastels, big buttons, and a tried-and-true user interface to be used for customization tools. But, maybe, it was a little too familiar.

Even though people were liking the design work, our instincts were screaming at us that we were on the wrong path. We had a hypothesis that today’s girls have had screens in their hands their whole lives, checking out mom and dad’s applications, looking at beautiful, modern user interfaces. Perhaps it was time to give girls the interface that their digital sophistication deserves.

We redesigned the entire methodology of how we would show the doll and the toolset to customize her. We would zoom in on the part currently being worked on. Tools not in use would hide themselves, making it clear what task is currently at hand. The interface itself would be clean and understandable via iconography and short labels. Everything on the screen would be animated with beautiful, life-like physics. We would give girls the opportunity to add their own personality to their custom design, including giving their doll a name, a pet, and adding their favorite places and things. This allowed us to begin to enable digital play with a physical doll.

The interface, personality, and the ability to begin digital/physical storytelling around the custom dolls all create a unique commerce experience. We believe that the old e-Commerce model of a grid of products on a screen are numbered. You have to add an unforgettable experience to commerce, and when it keeps American Girl’s brand promise to empower girls, both customers and the company are thrilled with the results. User testing, sales, and reviews are showing us that we chose the right path.

That Girl has Style!

The other half of “Create Your Own” is all about creating custom garments and fashions for our very stylish audience. We used a similar user interface but added in tools to place, stretch, and shrink graphics; as well as add custom type, patterns, backgrounds, and details.

We also gave girls the ability to create a profile where they could save their dolls and fashions, interact with the personality and stories around them, and share and purchase online or in the store.

The Platform

As the user interface was being designed, tested, and refined, engineering was working on their own set of challenges. At MJD we’re big believers in using our client’s existing technology stack to build new digital products and experiences. While the web application itself is a modern Single Page React Application, the underlying data that the application pulls in comes from a variety of sources including IBM’s Websphere Commerce System and a Content Management System. In the end we ended building one of the most complex React web apps on the market today that integrates with a variety of 3rd party technologies to launch a modern, and fun, commerce experience. 

Additionally, our platform needed a way to send the doll manufacturer a “recipe” for 1.3 million possible dolls and an infinite number of clothing customizations. Our engineers came up with a system that would create doll options and clothing choices while being easy to share on social networks, text messages, and emails.

 

THE MODEL

Our field research, shop-alongs, and user testing illuminated a great number of the features that we knew would resonate with girls. We also knew how we were going to technically build a platform that would work with existing systems within the framework of a modern, high-performance web application. What we didn’t yet know was our potential return on investment – so we made a model.

We calculated the revenue that would be generated with in-store touch screen kiosks given the number of kiosk minutes per day over a year, using success and abandon rates with the application. Then we layered online sales onto our model. That got us the revenue we needed, but we realized that we were hamstringing ourselves. Our budget only allowed us to build for desktop web, ignoring mobile. But our numbers told us a different story. Analytics and research indicated that as many as one-third of our customers would use a mobile device to access the web application. A great source of additional sales and delighted customers was being left out. American Girl agreed, and we began building the responsive web application, tightly integrated across in-store, web, and mobile, that you see today.

Given early sales results, our models look conservative and quite accurate.

THE STORE

A fun part of this project was working with American Girl and FRCH Design Worldwide on American Girl’s Store of the Future project in New York City. Along with other digital experiences, we worked with FRCH on incorporating ‘Create Your Own’ into the physical space of the store. That was then expanded to bringing ‘Create Your Own’ to American Girl’s Chicago, Los Angeles and Atlanta flagship stores.

Working inside the physical walls of the store allowed us to work on things such as planning the physical/digital mix in the space design, integrating with legacy store systems, creating remote management systems for kiosk hardware and software, and the ability to print custom clothing in real time at the store.

Launch!

Staring down an aggressive deadline, MJD put together a team of 18 Strategists, Project Managers, UXers, Designers and Engineers to build one of the largest React web applications ever attempted.

After a few months that included many a late night, weekends and a deep passion to bring girls everywhere an experience of empowerment, we delivered. First week sales were quadruple American Girl’s goal. Social networks buzzed with positive reviews. And perhaps best of all, our launch party included our daughters, using the application that we built, squealing with delight as they built their very own custom dolls to bring home. That part really made us proud to be an MJDer.

Take a look at the finished product! American Girl ‘Create Your Own’

“For years, girls have asked for even more ways to customize their American Girl dolls and other products to better reflect their individuality and style. We’re thrilled to answer that call with this unparalleled design experience.”

Katy Dickson, President of American Girl.

“This is the best project we 
have ever launched.”

American Girl Team

“This is sooooo great!!!!!!! 
I’ve been designing all day and can’t decide which one I like best.”

'Create Your Own' Customer

“Big thank you for bringing this project to life! Thank you for all the “blood, sweat and tears” I know your teams poured into this.”

American Girl Team

“I wish this would’ve existed 
10 years ago! Straight long red hair, green eyes, and freckles was all 
I ever wanted when I was little. 
This is lovely!”

'Create Your Own' Customer

“I was (and still am) very impressed with how your team has managed our expectations and demands.”

American Girl Team

“SHUT UP AND TAKE 
MY MONEY!”

'Create Your Own' Customer

“Just wanted to say a big thank you for bringing this project to life! Thank you for all the “blood, sweat and tears” I know your teams poured into this…it’s incredible to see it expanded in this new way!”

American Girl Team

“Wish this would’ve existed 10 years ago! Straight long red hair, green eyes, and freckles was all I ever wanted when I was little. This is lovely! I’m just jealous isn’t wasn’t an option during my time!”

'Create Your Own' Customer

“We saw strong results our first week in market, and are all VERY proud of the work this team has put in. Thank you for the partnership, and continued efforts!”

American Girl Team

Protected: American Girl ‘Create Your Own’ Private Case Study

‘ictionary
Meaningful Connections

At MJD we are striving to give meaning to the digital connections between people. We aim to elicit emotion when someone uses a digital product, experience or platform that we’ve designed and built. It could be something simple like a beautifully designed user interface that makes working with a smartphone exceptionally easy. It could be something hard like creating a Store of the Future where little girls can fall in love with a doll and be inspired to create their own strong path in this big world.

Digital Innovation Agency

Digital innovation is disrupting entire industries, transforming consumer behavior and influencing the way people interact with brands and products. In our 24/7 world, companies are leveraging digital technologies to create tremendous value, efficiencies and new revenue models while their customers expect ever more personalized and engaging experiences.