See beneath The Wolverine's skin in new tablet-optimised interactive website

Find out how Soap Creative designed the website to coincide with The Wolverine's digital HD release

Digital agency Soap Creative has worked with Twentieth Century Fox Home Entertainment to create The Wolverine Unleashed – an interactive website that lets fans of The Wolverine uncover the mutant's powers.

Designed with tablets in mind, The Wolverine Unleashed features interactive elements that users can tap on to delve beneath Wolverine's skin and find out more about particular aspects of his character, both physically and psychologically.

We spoke with Dave Weir, Art Director at Soap Creative, to find out more about the website.

Use the slideshow controls above and right to find out how The Wolverine Unleashed was created.

AA: Tell us about the brief for the project

DW: "Twentieth Century Fox Home Entertainment approached us because of our award-winning work on the digital experience Pi’s Epic Journey for the movie Life of Pi, as well as the very successful Wolverine Experience Kiosks we created to promote the theatrical release. They gave us a very rough idea of what they were looking for, and then let us expand on it in our own way, essentially giving us a blank canvas to make something awesome."

AA: That rough idea has now become an interactive tablet-optimised website. Can you tell us a bit about it?

DW: "iPad and iPad Mini users will be able to navigate around a full scale digital version of Wolverine's body, interacting with him at three levels. On the surface level, the user can roam around the body and locate hotspots. The mid-level appears as a medical scan of Wolverine’s body, introducing the user to one of the seven sections of the site. At the deepest level, we go further inside Wolverine to detail the root causes, motives, and motivations behind each and every aspect of his character.

"Creatively, we wanted to get the user as close as possible to Hugh Jackman and The Wolverine. This was to be a deep, personal, intimate experience unlike any website we had ever done before. We started with a huge, up-close-and-personal 1:1 scale image of The Wolverine and from there it was up to us to determine how deep we could go.  We decided that it would have more impact if the site allowed the viewer to glimpse inside Wolverine physically, but also learn more about him psychologically."

Advertisement. Article continues below

AA: How important was it to make this a tablet-optimised experience?

DW: "Fox was very specific that this was to be a tablet-first build, specifically made to bring out the most from the iPad and iPad Mini devices.

"From Soap’s standpoint, we wanted to create an interactive experience where anyone can familiarise themselves with not just Wolverine’s surface features, but the deeper causes behind those features - both physiologically and psychologically.

"While that kind of intuitive experience is still possible on the desktop, it’s much more effective through a gestural interface. The project itself grew and developed in real time. Rather than design dictating development or vice versa, the two sides were conceptualised and executed simultaneously to create an extremely cohesive product."

AA: What techniques were used to create the animated skeleton and organs? 

DW: "The entire skeleton and organs of the Wolverine's body were all composited together from various sources of imagery, illustration, 3D models and self-made animations.

"We first had to construct the skeletal bone structure to perfectly match the posed image of Hugh Jackman that we were provided and ensure it was anatomically correct in both size and scale. This was done through a combination of stock photography and lots and lots of anatomical reference footage.

"Once the 2D skeleton and famous Wolverine claws were created, this was then colour treated to match the aesthetic of the site's interface elements.

"The organs and their related animations were all created from what started as 2D illustrations or photographs. As we were working towards a tablet-first optimised site, all our animations needed to be perfectly loopable and be of a relatively short duration in order to save on file size and maintain fast performance on tablet devices.

"As video cannot auto-play on some tablet devices, we were able to export our animations as image sequences and then animate these with code in order to have a consistent experience for all users and devices.

"Once the illustrations and visuals of the different organs were designed and treated, they were then taken into Adobe After Effects to be animated. A combination of static images, vector illustrations, particle systems and 3D models were all created and combined to create the final animations.

"Associated sound effects were also triggered when interacting with the organs, which added a realistic touch to the user experience. The Wolverine's heartbeat for example can be heard when exploring that area of the body."

AA: Were there any challenges during the project? How did you over come them?

DW: "The iPad, while very powerful, has very few specific limitations that we had to find our way around. In particular, navigating around a huge hi-res image, while running multiple animations at once, proved to be especially challenging.

"Our development team worked around the iPad's technical boundaries and eventually settled on a very powerful, extremely useful JavaScript library called pixel.js. Our designer also had to find new and creative ways to make beautiful, hyper-detailed illustrations and animations the smallest file size possible."

Advertisement. Article continues below