Die deutsche Einzelhandelskette tegut startete im Sommer 2013 eine von Viva-Marketing konzipierte Sammelaktion mit lustigen Flip-Karten für Kids.

Die Herausforderung für uns war, die aufwändig gestalteten Flip-Charaktere auf emotional ansprechende Art im Web zugänglich zu machen, die Markenwelt zu transportieren und Explorativität und das Involvement der Zielgruppe zu fördern. Flankierend war ein Event-Buchungssystem für gesponserte Events gefordert. Entstanden ist das Flip Universum - parallaxing redefined!

Content als Basis

Für die tegut-flips Aktion war bereits Printmaterial designt worden und es gab 48 gut ausgestaltete Charaktere, die faltbaren Flips-Karten. Wir sammelten sämtliches Material und verschafften uns erstmal einen Überblick. Danach kategorisierten und priorisierten wir. Daraus konnten wir das Basiskonzept ableiten. Im Fokus des Konzepts steht die Flips-Welt, die alle Charakter in einen spannenden digitalen Kontext setzt, aber auch nicht mit der Aktion konkurrenziert. Die Flips bilden sechs Familien, die das Produktsortiment des Detailhändlers repräsentierten. Wir entschieden uns, die Flips in ihrer jeweiligen eigenen Themenwelt zu präsentierten um deren Charakter zu verstärken. Alle sechs Welten zusammen bildeten den Flip-Planeten.

Prototyping

Parallax-Sites gibt es im Web ja mehr als genug und oft wird die Auswahl der Parallax-Technik nicht von Inhalt Strategie gesteuert, sondern folgt der "because we can" Philosophie. In unserem Fall ist die Parallax Technik auf eine kreative, innovative Art umgesetzt und dient der primären Projektaufgabe, nämlich der, das Flips - Universum von der statischen Grafik zur erlebbaren Themenwelt zu transformieren. Da die iPad Kompatibilität ein wichtiges Kriterum war, wollten wir dem jungen Zielpublikum auch auf iPads ein Erlebnis bereiten. Die Flips Welt liessen wir aus verschiedenen Ebenen entstehen, die durch geschickte Anordnung und parallax-Technik einen 3D Effekt entstehen lassen. Auf dem iPad bestimmte der Neigungswinkel des Gerätes die 3D Verschiebung, was einen tollen und innovativen Parallax-Effekt auf iPads zur Folge hat. Um diesen vorgängig zu visualisieren, erstellten wir einen animierten Motion-Prototypen. Für das Event-Buchungssystem, dass die Aktion flankierte, kreierten wir eine Reihe von Wireframes.


Design & Development

Das visuelle Design sollte möglichst einfach erfassbar sein, aber trotzdem das Verspielte und Kindliche haben und den Charakter der Grafiken in den Vordergrund stellen.

Die Illustrationen der Charaktere und der Motion Prototype, den wir zuvor zum Testen der Parallax-Technik erstellt hatten, dienten uns als Ausgangslage fürs Visual Design.

Fun.

Das Testen und Optimieren der Lösung war zwar intensiv, aber durchaus ein grosser Spass. Das Projekt war ein grosser Erfolg und der Onlineauftritt der tegut-flips Aktion wurde in der internationalen Web-Szene als erfrischend kreatives und innovatives Parallax-Projekt gelobt.

development_protoype

Gefällt dir diese Casestory?