Mit 3D-Animation & gezielter UX wird Emons zur digital erfolgreichen Marke.
Ein Einblick in unser gemeinsames Projekt mit Emons.
Innerhalb von acht Monaten entwickelte sich das Projekt zu einer umfassenden digitalen Transformation mit zehn Beteiligten, über mehrere iterative Konzeptphasen hinweg. Der Fokus lag auf der Verbindung von Marken-Neuausrichtung, klarer Nutzerführung und einem interaktiven 3D-Erlebnis, das Komplexität reduziert und Orientierung schafft.
Von der Sitemap zur Bildsprache, von UX/UI zu 3D – So kann man sich sehen lassen.
Der neue Webauftritt von Emons geht weit über eine klassische Website hinaus. Er zeigt, wie sich komplexe Inhalte durch klare Struktur, gezielte Nutzerführung und interaktive 3D-Erlebnisse verständlich vermitteln lassen und wie entscheidend interdisziplinäre Zusammenarbeit dafür ist.
Herausforderung & Ziele
Der Status Quo von Emons & was wir daraus mitnehmen konnten.
1. Ein uninspirierter Start & unzureichende visuelle Führung
- Keine visuelle Hierarchie, der Blick wird nicht intuitiv geführt
- Wichtige Fokuspunkte wie das Frachtanfrageformular treten in den Hintergrund
Der Einstieg vermittelt weder eine klare Botschaft noch einen konkreten Mehrwert. Statt den Blick gezielt zu lenken, konkurrieren mehrere Elemente miteinander, was die Orientierung erschwert und den ersten Eindruck schwächt.
2. Die Grundstruktur steht, der Weg für Besucher:innen ist jedoch verwirrend
- Ziel: Den umfangreichen Content strukturiert unterbringen, ohne dass der Spaß am Scrollen verloren geht
Emons hatte bereits gute Ansätze zur Darstellung ihres Leistungsportfolios. Das Problem: Content. Das bestehende System erlaubte zwar neue Seiten, bot aber kaum gestalterische Möglichkeiten. Inhalte waren schwer lesbar und unübersichtlich.
3. Essenzielle Funktionen für die Nutzerführung
- Zu geringe Informationsdichte und unklare Nutzerführung
- Fehlende Filter- und Sortierfunktionen, nicht skalierbar für eine wachsende Anzahl an Standorten
Ein zentraler Fokus liegt auf lead-generierenden Seiten wie der Standortübersicht und den Standortunterseiten. Ziel: Besucher:innen direkt mit einer Niederlassung in ihrer Nähe verbinden.
4. Spannungsbogen, Storytelling & Interaktion
Der gesamten Website fehlen klare Struktur, Nutzerführung und vor allem Interaktion. Durch Interaktivität können Sektionen spielerisch überzeugen und Engagement steigern.
Lösungen & Ansätze
Vom Konzept zur immersiven Markenwelt. Unsere Lösung für Emons.
1. Strategie & Fundament
- Gemeinsames Markenverständnis
- Erste Entwürfe und Leitideen
- Definition der strategischen Ausrichtung
Der Start erfolgte mit einem gemeinsamen Workshop in der Emons-Zentrale in Köln. Ziel war es, ein tiefes Verständnis für Marke, Ziele und Potenziale zu schaffen und eine klare strategische sowie visuelle Richtung zu definieren.
2. Struktur & Markenentwicklung
- Klare Struktur und Nutzerführung
- Entwicklung von Wireframes und Konzepten
- Iterative Ausarbeitung des Brandings
Auf Basis der Erkenntnisse wurden Informationsarchitektur, Sitemap und Wireframes entwickelt. Parallel entstand eine neue visuelle Sprache, die als Fundament für das gesamte digitale Erlebnis dient.
3. UX/UI Design & Nutzerführung
- Präzise Nutzerführung und klare Hierarchien
- Reduktion von Komplexität durch Struktur
- Konsistentes UI-System und visuelle Logik
Im nächsten Schritt wurde das Interface ganzheitlich gedacht und gestaltet. Ziel war eine klare, intuitive Nutzerführung, die Inhalte verständlich strukturiert und eine konsistente, hochwertige User Experience schafft.
4. 3D Experience & Umsetzung
- Modulare Animation mit fließenden Übergängen
- Einsatz von Animatics zur iterativen Abstimmung
- Spatial Awareness für Orientierung im Raum
- Finales Rendering und technische Umsetzung
Die 3D-Animation wurde in modularen Etappen entwickelt und als nahtloses, interaktives Erlebnis umgesetzt. Durch gezielte Transitionen und Loops entsteht eine flüssige Scroll-Erfahrung mit hoher visueller Kontinuität.
Ergebnisse
Du hast noch Fragen?
Wir liefern die Antworten.
Kurz gesagt: Nein.
Allerdings gibt es viele verschiedene Methoden, um 3D-Animationen auf einer Website zu integrieren. Für Emons haben wir die 3D-Animationen als Videos ausgegeben und die entsprechenden Sequenzen und Loops in die Website eingebunden. Auf diese Weise müssen Besucher:innen keine zusätzliche Rechenleistung aufbringen, sondern lediglich das Video laden. Der Rest passiert ganz von allein.
Alternativ könnte man 3D-Animationen auch nativ in die Website integrieren. Das bringt jedoch andere Hürden mit sich, die unter anderem die Performance beeinflussen können. Mit der richtigen Vorbereitung lassen sich solche Beeinträchtigungen jedoch auf ein Minimum reduzieren.
Gemeinsam mit Emons haben wir einen wöchentlichen Termin festgelegt, in dem wir uns über die Fortschritte auf beiden Seiten abgestimmt haben.
Wir haben die Website parallel zur Content-Erstellung konzipiert, wodurch eine enge Abstimmung mit dem Team von Emons erforderlich war.
Generell halten wir Feedback-Schleifen bewusst kurz, indem wir aktiv über unser Projektmanagement-Tool Monday kommunizieren und dort alle Updates bündeln. Unsere Kunden können uns direkt in Monday Wünsche und Vorschläge mitteilen, auf die wir in der Regel noch am selben Tag reagieren.
Ja. Wir legen großen Wert auf die Skalierbarkeit unserer Webseiten, schließlich wollen wir genauso wenig Kopfschmerzen wie unsere Kunden. Deshalb planen wir unsere Projekte strategisch im Voraus, erstellen durchdachte Sitemaps und Linkstrukturen und konzipieren UX/UI sowie CMS so, dass jederzeit neue Seiten ergänzt und bestehende Inhalte flexibel angepasst werden können.
Auf Wunsch setzen wir die gesamte Website auch in einem vollständig modularen System um, das unsere Kunden eigenständig erweitern und bearbeiten können.
Kommt zu Blue World Studio. Aber im Ernst: Wir decken ein breites Spektrum ab, von Strategie, UX/UI, 3D & Motion über Frontend- und Backend-Development bis hin zu SEO und AI Search.
Ein Projekt mit 3D-Animationen, präziser Nutzerführung und ausgeprägter Interaktivität ist kein kleines Unterfangen. Es erfordert Zeit, Erfahrung und Geduld. Bei Blue World Studio seid ihr dafür in den richtigen Händen.
