What it is

Suisse Mania is an interactive WebGL experience where collecting famous buildings, attractions and areas in Switzerland is the name of the game!

Play the game

Jump into Switzerland

The beautiful landscape, rich culture and amazing history of Switzerland is just a loading screen away - come along into the Suisse Mania balloon and enjoy the ride!

Background

Migros, one of Switzerland's larger retailers is the company behind Suisse Mania.

Suisse Mania revolves around collecting places of importance to Switzerland, for example the mountain Matterhorn, the CERN research facility and castles dating back to the 13th century.

Gotta catch 'em all

The offline collecting of items works like a Happy Meal at McDonalds. Shop for at least twenty swiss francs (CHF) in a Migros store and you’ll get a plastic model with the purchase. The more you buy - the more items you get.

Online it’s up to you to find all of the 50 objects hidden around Switzerland by playing around, exploring and learning in a custom made 3D world. Once you’ve caught them all you’ve got the chance to win some exciting prizes.

Mania Everywhere

The Mania campaign is massive in Switzerland. It involves road shows, models & stickers available in all 600+ Migros stores, hot air balloon rides, a custom board game, and this groundbreaking digital experience.

Over 100 accurate models

Suisse Mania includes 54 main objects and countless environmental objects such as trees, streetlights, roads and animals scattered throughout Switzerland.

Everything has a story

Every place has their own special story. In Suisse Mania we used professional voice actors to record the stories in four languages. Go ahead and listen to one of the clips below.

Support for any device

To gain maximum exposure we created three versions of the experience. Two 3D versions with varying level of detail and effects, as well as a fallback 2D experience for older browsers supporting everything down to IE9.

High Definition, 3D

Full hardware acceleration.
High resolution textures.
Multiple-layer shaders.

Standard Definition, 3D

Full hardware acceleration.
Half resolution textures.
Low polygon count.

Fallback, 2D

Huge (tiled) flat map image.
Equal functionality.
Pan & zoom controls.

Keeping it simple

It’s a game for kids, and by using icons and large buttons we made it accessible and easy to use on both computers and mobile devices.

The Production

We worked on Suisse Mania together with Hinderling Volkart and Goo Technologies for three months.

The world takes form...

First, we wanted the actual terrain of Switzerland as a base for us to model our world on. From an open source (measuring mountains is important stuff in Switzerland - there were a lot of open sources) we imported a real heightmap and topography and used that data to create a mesh in WebGL.

The designers then spent countless of hours researching the different aspects of the Swiss landscape; in a country covered by the Alps, large forests, wine districts and both old and new cities it was crucial to capture the unique feeling of each and every one of them.

...and evolves

Slowly the mesh was embroidered with a complex landscape; first out were roads, trees, glaciers and eventually rivers and lakes. The 3D masterminds over at Goo then continued to populate the world with objects; cities, bridges, vehicles and even animated animals roaming the fields of northern Switzerland. Eventually we had a picturesque, model train-style miniature Switzerland we could really be proud of.

During the final weeks we did touch ups and added effects and the map looked better than ever. The seamless experience in the 3D world and all its powerful capabilities caught everyone by surprise. It was by this time that we realized that together we had not only managed to create a solid looking campaign website, but also an amazing showcase for what WebGL holds for the future.

Amazing low poly animals

Goo Create & WebGL

This was our first larger project using the Goo Create engine to power the experience. We’ve previously been working mostly with Three.js, but with Goo we got a whole new workflow with easier prototyping and deployments. The guys at Goo really showed us the power of their tool with paint-it-on-terrain tools and fast optimization for mobile devices. We had a blast working together with these talented people and look forward to a lot more collaboration in the future.

Connecting with the real world

Not only was there a lot of work creating the 3D-miniature of Switzerland but the all around site itself was also something to really sink our teeth in. First of all, the contest itself required a lot of functionality. The real life collector’s items have codes printed on them that the user can enter on the site to “find” the virtual one and add it to their collection. Each user also has their own Collection page where they can view what items they’ve found and which they still have to look for. There’s also the usual info pages about the contest and more importantly the prizes.

On top of the regular campaign to find the 50 standard objects, there are also four joker objects at play. During a week at a time a special item is featured as the joker and collecting this item can only be done during that week. It had to be carefully timed to correspond to the communications out in the offline world.

Collecting all jokers is necessary to get the achievement Superstar (and who doesn’t want that?!).

All of these pages - Collection, contest info, News, etc - had to be available in all three of Switzerland’s most spoken languages and just because we speak neither German, French or Italian we also made an English version.

Accommodating for an onslaught of visitors

As per usual we turned to our trusty Google App Engine for the scalability it provides. It stood by us once again and when Migros sent out over a million newsletters to their subscribers the site performed flawlessly despite a couple of thousand simultaneous users.

The Team

Suisse Mania was brought to you by these three great companies. Hit us up with your next project!

Hinderling Volkart

Lead Agency, Client Contact, Concept, Design, Art Direction, 3D Support

Agigen

Project Management, Design Support, Web & Backend Development

Goo Technologies

3D and WebGL Development

Sound awesome?

Get in touch

E-mail
hello@agigen.se
Address
Kaptensgatan 6
114 57 Stockholm
Call
+46 (0)8 20 1337
Zippity-zip
114 57 Stockholm