The sky is the limit

Per Anhalter durch die Wilo-World
Logo des German Brand Awards Winners 2022

Interaktiver 360° Wilo Erlebnis-Parcours

Von der Vogelperspektive bis hinunter zum kleinsten Detail

KUNDE:

WILO SE, Dortmund

 

KOMPETENZFELDER:

Konzeption, Beratung, Storyboard, Useflow-Entwicklung, UX-/UI-Design, Screendesign, Software-Entwicklung, Web Development, Frontend Entwicklung, Backend Entwicklung, Integration, Implementierung

ANFORDERUNGEN:

Kreation eines interaktiven 360° "Reiseführers" durch die Einsatzbereiche, Referenzobjekte und Produkte von Wilo. Schaffung einer webbasierten Pflegemöglichkeit zur potenziellen Ausspielung der Wilo-World in bis zu 65 Märkte und in mehr als 40 Sprachversionen.

ERGEBNIS:

Wilo World

Dieter hilft Dir gerne.
Geschäftsführer – berät, managed & leitet

Du hast irgendwelche Fragen zu diesem Projekt?

Dann nimm Kontakt auf!

Erleben und begreifen in einer neuen Form

Die Wilo-World als virtueller Blockbuster

Was verbindet einen Pumpenhersteller mit Themen wie Nachhaltigkeit, Systemrelevanz oder Digitalisierung? Warum sind seine Lösungen so imminent wichtig für viele, wenn es um Klimaneutralität, Wasserversorgung oder auch um die Bewältigung gesellschaftlicher Herausforderungen in Zeiten einer Pandemie geht? Antworten auf diese und viele andere Fragen, bietet die Wilo-World, die ein Weberlebnis der ganz besonderen Art schaffen soll. Als interaktiver „Reiseführer“ nimmt sie uns mit an Orte herausragender Ingenieurskunst und vermittelt uns ein Gefühl davon, was moderne Pumpsysteme heute zu leisten imstande sind.

Ausgehend vom Kundenwunsch, haben wir die Wilo World konzipiert, in einem Storyboard die relevanten Stationen skizziert, die Grundlagen für ein eindrucksvolles Nutzererlebnis geschaffen und das Ganze anschließend auch noch in eine Software „gekleidet“, über die ein weiteres Ausrollen der Wilo-World, wie auch eine Erweiterung des Angebots realisiert werden kann.

Die Wilo-World ist eine neue Form der Leistungspräsentation für Unternehmen. Sie funktioniert im Kontext einer klassischen Messe ebenso, wie auch rein digital als vom Nutzer selbst zu steuernde, unterhaltsame „Hochglanzbroschüre“ mit Absprüngen zu weiterführenden Informationen und Kontakten. Der Fokus liegt dabei klar auf der visuellen Darstellung, mit der auch komplexere Inhalte gut verständlich für den Nutzer transportiert werden können.

Auszug aus dem Design Guide für die Desktop-Komponenten der Wilo-World.

Ein Content Service Tool für die Wilo-World

Wie koordiniert man Inhalte innerhalb und außerhalb einer 360° Grad Umgebung?

BRIEFING:

Kundenwunsch war die Entwicklung einer Lösung, mit der sich Inhalte aus unterschiedlichen Systemen so erfassen und pflegen lassen, dass sie den Eindruck einer in sich geschlossenen Darstellung ergeben, die wahlweise in beliebig viele Märkte und Sprachen ausgerollt werden kann.

UMSETZUNG:

Mit dem Content Service Tool (CST) haben wir eine Umgebung geschaffen, die gleichermaßen dazu in der Lage ist, die Inhalte und Funktionen einer 360° Umgebung, wie auch die Inhalte partieller HTML-Elemente so zu erfassen, dass die einzelnen Szenen der Wilo-World sowohl im Frontend als auch im Backend als einzelne HTML-Seite wahrgenommen werden. Die Anlage und Steuerung von Landmarks erfolgt dabei ebenfalls im CST und unabhängig von der dahinter liegenden Map. Alle Elemente sind pflegbar und können für beliebig viele Märkte und Sprachen bereitgestellt werden.

RESULTAT:

Die Pflege der Inhalte ist so intuitiv gestaltet, dass Wilo – ohne vorangegangene Schulung – bereits maßgeblich an der initialen Pflege der Inhalte für Deutsch und Englisch beteiligt war. Das Einspielen neuer Renderings der Map erfolgt komplett autark, ohne dass Anpassungen innerhalb des CSTs vorgenommen werden müssen. Genauso verhält es sich mit den Inhalten aus den anderen an der Darstellung beteiligten Systemen. Die komplette Entwicklung des CST war in nicht einmal drei Monaten abgeschlossen.

"Rotating buildings" als Eyecatcher

Außergewöhnliche Objekte, eindrucksvolle Anforderungen

Wie bewahrt man innerhalb einer eindrucksvollen Gesamtkulisse den Blick für das Detail? Indem man dem Detail eine Bühne bereitet, in dem es zu glänzen vermag. So haben wir es mit den ausgewählten Referenzobjekten der Wilo-World gehalten, die wir als 3D-Objekte virtuell aus der 360° Kulisse "herausschneiden" und in die scrollbare Inhaltsseite überführen, um sie mit interaktiven Info-Elementen zu versehen. Jedes Objekt erzählt dabei seine ganz eigene Geschichte und bahnt den Weg für weitere Referenzen.

Form follows fiction

Einer tollen Idee Gestalt verleihen

BRIEFING:

Die konzeptionelle und gestalterische Verbindung von zentralen Corporate Themen der Wilo mit den eher lokal getriebenen Themen, wie Produkte, Einsatzbereiche und Services, stellte die zentrale Anforderung für die Entwicklung der Wilo World dar. Dabei sollte von Beginn an auch Wert darauf gelegt werden, dass sich die Gestaltungselemente später leicht für eine vertikale (größere Tiefe der Inhalte), wie auch horizontale Erweiterung (neue Märkte) eignen.

UMSETZUNG:

Auf Grundlage von Adobe XD haben wir ein zunächst Storyboard und einen möglichen Clickflow entwickelt. Exemplarisch haben wir dann die inhaltliche Abbildung in einem Prototypen für eine erste Themenwelt entwickelt. Auf dieser Grundlage haben wir uns an die Entwicklung eines Styleguides gemacht, der nicht nur notwendige Elemente und UX/UI Vorgaben eindeutig definierte, sondern zudem auch Informationen über mögliche Kombinationen von Elementen zu einem Seitentyp enthielt. So konnte die Realisierung der weiteren Ausgestaltung der Wilo-World komplett und zügig auf dieser Basis erfolgen.

RESULTAT:

Die Wilo-World ist weit mehr als nur eine digitale „Hochglanzbroschüre“ geworden – schon allein, weil sie dem Nutzer die Möglichkeit einräumt, sich in ihr vollkommen frei und ganz nach eigenem Interesse zu bewegen. Die Möglichkeit dazu bietet ihm eine Nutzerführung, die an jedem Ort der Map Orientierung bietet und unaufdringlich auf weiterführende Informationen aufmerksam macht. Produkte lassen sich in ihrem unmittelbaren Wirkungsumfeld erleben und die Darstellung von Einsatzbereichen betont die dahinter stehenden Leistungen und den strategischen Zusammenhang.

Ein detaillierter Styleguide hat dafür Sorge getragen, dass die darauf aufbauende Logik der Nutzerführung und Darstellung intuitiv erfasst und eingeordnet werden kann. Spezifische Elemente der Gestaltung, wie beispielsweise die neu entwickelte „Wellenform“, verleihen der Wilo-World eine sehr individuelle Note. Gleichzeitig adressieren sie unterbewusst aber auch das wichtige strategische Thema „Watermanagement“. Dieses und andere Themen finden ihr organisatorisches „Zuhause“ im Wilopark, der in seinen Dimensionen und seiner Fortschrittlichkeit über die Wilo-World jetzt auch tatsächlich rund um den Globus erlebbar wird.

Das sagt unser Partner zu unserem gemeinsamen Projekt:

Tobias Gross, Head of Digital Marketing bei WILO SE

„Die neue Wilo World stellt einen Meilenstein in der Präsentation unserer Produkte und Leistungen dar. Sie ist im Rahmen der diesjährigen ISH vom Fachpublikum fantastisch angenommen worden und auch intern, in Dortmund und in den Länderteams, extrem gut angekommen. Gemeinsam mit unseren Partnern ORÖ und den Raumerfindern, haben wir in sehr kurzer Zeit ein extrem erfolgreiches Projekt online gestellt. Ich bedanke mich bei allen Beteiligten für ihr enormes Engagement!

Illustration zweier iMacs mit je einem Screenshot der Desktop-Version der Wilo-World.

Kontakt aufnehmen

Was können wir für Dich tun?

X