FAN-tastisch!

Lufthansa Fanhansa fliegt mit den Namen der Fans lackiert über den Wolken

Lufthansa
Microsite zur EM 2016

Entwicklung einer interaktiven Microsite für die Lufthansa AG zur Fußball Europameisterschaft 2016 in direkter Zusammenarbeit mit namenhaften Werbeagenturen. LEUCHTKRAFT programmierte Front- und Backend basierend auf PHP, Javascript, HTML und CSS.

Wolken

Inhaltselemente

Fans konnten ihr eigenes Foto mit spassigen Elementen dekorieren

Gewinnspiel

Die Nutzer konnten ein Foto von sich hochladen und mit spassigen Elementen wie Bärten, Brillen oder einer Deutschland Perücke versehen. Fertige Bilder konnten geteilt werden, wurden aber auch in die Galerie integriert und bildeten aneinandergereiht das längste digitale Fanflugzeug.

Social Hub zeigt Posts von verschiedenen sozialen Plattformen

SocialHub

Weiterer Bestandteil war der integrierte SocialHub. Alle Beiträge auf den sozialen Kanälen der Lufthansa, die mit dem Hashtag #Fanhansa versehen waren, wurden ausgelesen und auf der Microsite ausgegeben. In diesem Teil wurden zusätzlich auch Posts von Kooperationspartnern und Usern ausgegeben.

Bildschirmfoto zeigt die hochgeladenen Fan-Bilder mit lustigen Outfits

Parallax

Eine ganz besondere User Experience gewährleistete der Parallax über die gesamte Microsite. Da z. B. einzelne Wolken auf einer anderen Ebene animiert waren, entstand der Effekt des Fliegens.

Responsive

Die Module wurden responsive optimal dargestellt und boten auch mobil eine gute Performance. Manche Module wurden für das Smartphone vereinfacht.

Fanflieger in 360°

Auf der Microsite gab es auch ein 360°-Modell der Fanhansa-Maschine. Auf dem Modell wurden Fannamen angezeigt. Diese Liste wurde um den eigenen Namen ergänzt, wenn man den Newsletter abonnierte. Hatte man mithilfe der Suchfunktion seinen Namen gefunden, konnte man diesen per automatischen Screenshot über das eingebundene Sharing in den Sozialen Netzwerken teilen. Um die Erreichbarkeit und Performance der Website auch bei hohen Zugriffszahlen zu gewährleisten, nutzten wir das CDN von Amazon.

Workflow

Die Entwicklungsumgebung wurde in drei Bereiche aufgesplittet. Diese drei Branches (DEV, Staging, Live) ermöglichten den beteiligten Agenturen die parallelle Zusammenarbeit und schafften damit den optimalen Workflow.