Interactive Design Inspiration: The Wolverine Unleashed

Leave it to designers to help us dig deeper into the characters we love. Enter award-winning global digital creative agency Soap Creative. They’re at it again with The Wolverine Unleashed—a recent web project for Twentieth Century Fox Home Entertainment that supported the release of the latest Wolverine film in theaters.

The Wolverine Unleashed gives viewers access to a full-scale digital version of the superhero’s body, as played by Hugh Jackman. Fans are free to navigate the superhero’s body and “explore his mutant powers and psyche.” It’s an interactive experience that truly caters to the Wolverine fan, and pushes the limits of the superhero-lover’s experience.

The Wolverine Unleashed, interactive design inspiration

To find out more about this fascinating project, we asked Soap Creative Art Director Dave Weir to weigh in on the creative process and personal highlights.

What’s the most exciting part about working on the wolverine unleashed project?

From the moment Twentieth Century Fox Home Entertainment approached us with the initial brief, we were given the license to create something truly awesome. Having that kind of support and motivation from them early on gave us extra incentive to make Wolverine Unleashed a deep, personal and intimate experience unlike any website we had previously done before.

The Wolverine Unleashed, interactive design inspiration

Bringing a 1:1 scale version of Hugh Jackman (code named Huge Ackman by our developers) to life in a multi-layered experience was a massive challenge, but it was also the core concept for this unique website. The physical size of the assets needed was something we hadn’t dealt with in the past. Our developers had to create an optimized solution that made panning around a huge high-res image, all while running multiple animations at once, seamless on both desktop and tablet devices.

Also, bringing the Wolverine’s body to life was also an exciting aspect of this project. Our designer, animator and developer were constantly being thrown challenges based on device performances, so continual tweaks to animations and interface elements were being made right up until the site’s launch. It was a project which grew in real time with both the design and development team conceptualizing ideas and executing solutions in tandem to create an extremely cohesive product.

The Wolverine Unleashed, interactive design inspiration

Wow, that sounds intense! What specific tools or ideas influenced the creation of the UX/ interactive engagement? 

The client was very specific that this was to be a tablet-first experience and one that should bring out the most from those devices. So starting with that in mind, our designers and developers began conceptualizing ideas around how the UX and UI would best integrate with our 1:1 image.

In order to get the core browsing experience of such a large image correct, we had to work around some of the technical boundaries presented to us on the iPad and settled on an extremely powerful javascript library called pixi.js, a HTML5 rendering engine perfect for both tablet and desktop users alike.

Our interface elements were then designed to sit secondary to this experience and not get in the way of the exploration process by the user. Development techniques such as dynamically positioning information panels and displaying content based off a users current position were some examples of the UX strategies that our team thought very carefully about.

The Wolverine Unleashed, interactive design inspiration

We also looked to bring in the native touch-based gestures that users perform everyday on their tablets to the website experience. This includes pinch-and-zoom gestures to navigate between the three levels of the site and also using the iPads gyroscope to add extra depth to the UI elements when a user tilts their device while exploring. Those subtle touches in design and development were what really brought this experience to life.

Want more interactive design inspiration?

HIDC Online 2013, design inspirationDon’t miss the HOW Interactive Design Conference – ONLINE – December 3-5! If you missed the event in Chicago, it’s not too late to catch the very best presentations from top industry names. The best part: You can view the conference highlights from the comfort of your own home or office. Register now to reserve your spot!


2 thoughts on “Interactive Design Inspiration: The Wolverine Unleashed