Migros Allstars
Let's play marble
Migros is Switzerland's largest retail company, its largest supermarket chain and largest employer. It is also one of the forty largest retailers in the world. They regularly launch campaigns and promotions. For this one I worked in the role of creative and design director.
Migros asked us to create a digital add-on to a marble promotion. Customers were given sachets of marbles when they shopped and were invited to find online inspiration for marble games.
So we decided: Hey let's make something cool out of it!
And we developed a one-pager that in itself was a marble run that takes you through the nine different worlds of the Migros characters. Additionally, you can watch a nice tutorial video for a marble game in each world.
The website is still online, although in a rather slimmed-down form, since the promotion is already over. Anyway, to get a better impression of it, feel free to have a look here (otherwise choose the video with some screen captures at the start of this page):
Brainstorming went wild
We had the idea of a journey through the different worlds. But which is the best method? Linear? Nonlinear? With camera movement? Soon we realised that we have to commit on important things. But one thing was for sure: a movement from above the clouds to below the ground.
After playing through a few scenarios and testings with the development team, the result was to choose a linear scroll journey, as this would enable us to produce the highest quality product, the most user-friendly result as well as the most pleasing user experience.
Implementation
After setting up some Wireframes to have a rough idea of the page, we filled the worlds with lots of clever details to give each part its own uniqueness and yet connect them smartly with each other.
Together with an illustrator we developed the style. From simple idea collections to specifically elaborated worlds. By using the quite simple method of parallax scrolling in combination with 5 layers and some animations we were able to bring lots of depth and excitement to the journey.
Game Instructions
Each world resp. each character type was assigned to a specific marble game mechanic. For each world, a separately titled CTA referred to it. The game instructions open as a two-part overlay. On the one hand, a nicely designed 3D animation, which is supposed to make the game more exciting and easier to understand, and on the other hand, a detailed description.
My role: creative and design direction, concept, design
Client: Migros
Agency: MUTABOR
Illustrations: Benne Bockshecker, Felix Drössler
Game Instructions: FOREAL
Client: Migros
Agency: MUTABOR
Illustrations: Benne Bockshecker, Felix Drössler
Game Instructions: FOREAL
Categories:
Concept, Interaction, UI, UX, Animation, Illustration
Concept, Interaction, UI, UX, Animation, Illustration