Imagineering Interaction Design

Disney is a brand built entirely upon experience. Everything Disney, from the mouse on the big screen to the mouse in the amusement park must be held to the highest, most magical standard (as pointed out by Jared Spoole in his praises of the Magic Band). So I was equal parts excited and intimidated when our team at TBWA/Chiat/Day was asked to work on a website for Disney’s Marvel Avengers.

PlaymationBanner
Section Header Top 2

The Task

BreakBottom

Business Needs

Funnel

Through stakeholder interviews, we understood that we were working on one piece of a larger marketing campaign to launch a new toy line for children ages 7 to 11.  

At the top of the sales funnel, there would be a significant television advertising effort to raise awareness of the product launch and drive users to Playmation.com to find out more.

The intention of Playmation.com (i.e. the project we were working on) was to really capture the child's interest and showcase the entire product line.  The end of the experience should drop the child off at an e-commerce site, signalling a device hand-off to the parents (AKA credit cards).

Disney’s Marvel and Playmation planned to launch a line of toys which combined the physical and digital space in a new type of hybrid play.  It involved a combination of smart figurines, wearable equipment and a mobile application for a fully immersive role playing experience.  The product, crafted by the Disney Consumer Products team, was designed to empower kids to become the Avengers that they idolized.  Our role as a creative agency was to create an equally immersive website which would then eventually translate to product sales.

As with any project, the first step was the discovery process. Our goal was to understand the user and stakeholder needs as well as identify project constraints.  In this particular case, we would need to balance the corporate needs of our business stakeholders with the boundless imagination of children.

Although the ultimate business goal was to drive sales; the Playmation.com experience wasn’t an e-commerce site, so our KPIs were on engagement and conversion rate (clickthroughs to the actual product site).

The User

As a seven year old kid, I wanted nothing more than to be the Red Mighty Morphin Power Ranger (Jason).  My Red Ranger Halloween costume had a much longer life than just October 31st; I continued to practice my fake karate with [on] other kids on the playground.  It didn’t matter that the mask was made out of a cheap, flimsy plastic; the moment I yelled, “it’s Morphin Time!” I became a real life Power Ranger.

This was the feeling that we wanted to capture in the website: the feeling of disappearing into our imaginations and becoming the heroes we loved and adored.  The talented television creative team at TBWA/Chiat/Day did an amazing job telling this story in their commercial.  The rousing music and action shots would be a direct CTA to kids’ inner hero: “The Avengers need your help!” with a simple URL to playmation.com.

Image converted using ifftoany

From here, we were tasked with keeping the momentum of the TV spot, continuing to empower the children and ultimately help equip them to save the world.  This became my mantra as I worked on the project:  I want to be Iron Man.  I want to be the Hulk.  I want to be an Avenger.

The strength of the team is each individual member. The strength of each member is the team.

- Phil Jackson

Before discussing our approach to the project, I would be remiss to mention the talented team members that I worked with.

The Agency

  • Art Director - Nate Ripp
  • Creative Director - James McKenna
  • UX Lead - Lester Dizon
  • UX Designer - Alan Shen (me)
  • Many others that helped run the project

The Client

  • Disney Consumer Products
  • Disney Matterhorn digital product group
  • Disney Legal
  • Disney's Marvel
  • Playmation
Section Header Top 3

Conversation Information Architecture

Before this project, I wouldn’t have expected the launch of a toy line’s information architecture to require any significant foresight.  My assumption was that toy lifecycles would dictate top priority, and honestly, kids are motivated to find the toys.

In this case, however, we had somewhat of a complex ecosystem of toys which complicated the understanding of how to actually play.  We needed to balance the steep learning curve with keeping up the emotional momentum of the television spot.

geardiagram

I like to think of information architecture as a conversation.  Conversations have a natural flow; typically things go from general to specific and from important to less important.  This helped to position things less around "features" that certain stakeholders wanted market and instead really helped align the team around the thought process of a child arriving at the site.  Here's what we came up with:

conversation

Through this conversation a natural order of operations formed.

First came the intent: "why are you here?".  Coming from the emotional television spot, we knew that kids would be excited to join the battle.  We would want to focus on strong CTAs by really setting the scene of a world under attack.

Next, there was the question: "Which Avenger do you want to be?"  This is important because we can get that initial emotional investment into selecting an Avenger before exposing the children to the "how-tos" and the unfortunately steep learning curve of the product line.

The reward for going through informational imagery and video series of "how-to" videos would then be the ability to pick a team of Avengers and villain figurines. By bookending the "work" of learning how to use the product with picking an Avenger and selecting a team, we were able to leverage the peak-end rule for the perception of an overall positive experience.

This conversation then helped us thematically: by framing the site like a mission briefing, we were able to instill a sense of heroism without missing a beat.  In this way, the website became a portal that drove more discovery into the heroes, villains and gadgets galore-- something that both the business and the end child should be all too happy to get behind.  You can see the end result here.

Section Header Top 1

Seamless Discovery

When it comes to immersive play, one of the things we most want to avoid is the discovery of seams.  The moment a page takes too long to load or an expected interaction doesn’t happen is the moment that immersion is broken and a child becomes aware of the act of pretending.  Pre-smartphone Alan had a much easier time staying in this imaginative state; he had tons of practice having not (yet) been ruined by always-available smartphone apps, realistic video games and Snapchat filters.  Because of this, we understood that it would take a lot more fidelity to make the experience real for our our target market.

Tactile Feedback

We knew that the concept of the site was to present a situation room--something akin to a high-tech dossier to really set the mood.  Thanks to sci-fi interfaces in the mass media (curse you, Minority Report) the expectation was a tactile experience.  In today’s world of mobile applications and wearables, the ability to make something feel tangible is often taken for granted.  But when it comes to a website, a lot of the sensory elements like haptics and sound are limited by browsers and user permissions.  In order to plan for the lowest common denominator, we would need to compose a tactile experience within a purely visual medium.
 
Therefore, each UI element was designed to respond almost fancifully to an interaction; each scroll swipe, click or tap would have an immediate and satisfying response.  Our hope was that the smallest micro-interaction would scratch the itch for tangible feedback and really sell these young heroes on their mission briefing.  The globe would pulse to emulate real time monitoring; the lines and edges would gleam as though the war room electrified on the cutting edge of technology.  Menus would expand and collapse the way the blast doors of S.H.I.E.L.D might make way for the Nick Fury.  It was the little polish here and there that we hoped would really sell the magic of becoming an Avenger and saving the world.

NavigationWeb

Progressive Disclosure through Spatial Awareness

We knew that with young children, especially those dual-screening between an iPad and a television, there was the potential to lose focus and subsequently interest in the product.  So we decided to leverage spatial awareness as much as possible to hide “seams”, reduce cognitive load and empower the freedom of discovery.

When designing the site, we were judicious in applying progressive disclosure.  To find out more high-level information about a shiny piece of gear or to see all of the heroes available for assembly, all the child had to do was tap or swipe.  If there was a CTA for learning more, it would scroll within the landing page to more information.  This way, accidental taps could be easily undone through scrolling or swiping back and there was less finality in navigational decision-making and therefore trained confidence.  Although the experience was short, we wanted to avoid any instances of punishing the user and forcing them to hit the back button.

GearWeb
Section Header Top 4

Results

Process-wise, this rapid prototyping process was pivotal not only in composing the direction, but also in helping to quickly align on creative vision. We were able to make recommendations which then facilitated an easy handoff to Disney’s Matterhorn development team.  To give an idea of how many UI exploration paths we went down, I had prototyped at least nine unique versions of the site within a matter of weeks.

Lessons Learned: Picking the Right Canvas

With the goal of multi-party alignment in mind, we searched for a process that helped to visualize creative vision quickly and accurately.  This became important because, over the course of the project, there wasn’t ever a moment where every single party was available for a combined conference call. It became clear that we needed a platform that conveyed concepts and ideas in a way that wouldn’t be lost in a literal game of telephone.

If a picture is worth a thousand words, then a high-fidelity prototype must be worth a million.  Imagine having to describe every micro-interaction and transition and expecting the “magic” to be visualized in the same way.  We needed to be able to compose the magic as close to completion as possible.

Therefore we leveraged the prototyping tool: Axure RP Pro.  In our minds, it was the best balance between the interactive prototyping tools like Invision or Principle and the high-fidelity static animation tools like Adobe After Effects.  Axure allowed ups to very quickly push out web-based prototypes so we could imitate browser-based interactions that fell within the realm of production code possibilities.  With this, I could easily get feedback, push out a new build within the hour, and share it back around, empowering us to iterate a few times a week and align on a multi-platform, responsive experience.

comic
DisneyPlaymationpress

Selected Works

Understanding SleepUser Research

Code-Responsible DesignRapid Prototyping

The Best UI is InvisibleMulti-Platform Design

Like what you see?

I'm always looking for people to connect with.

Feel free to email me at alanmshen@gmail.com

Note: Although I'm always happy to help, I tend to miss shotgun requests.
If you want to connect please let me know what your favorite Star Wars movie was and why.

Or, there's always LinkedIn

Copyright © 2017 - Alan M Shen