MAN Truck & Bus

Internationaler Website Relaunch und Digitaler Styleguide

Zusammenfassung
Für MAN Truck & Bus wurde die internationale Website man.eu grundlegend neu strukturiert und konsolidiert. Die zuvor getrennten Sparten Truck, Bus und Van wurden in einer Business-Website pro Land zusammengeführt. Ziel war es, das Portfolio enger zu verzahnen und zugleich Raum für marktspezifische Inhalte zu schaffen. Der Rollout erfolgte in 22 Sprachen und 27 Ländern.
Jahr
2019 – 2020
Branche
Automobil
Tätigkeit
/
Art Direction
/
UI-Design
/
Design System
Dauer
62 Wochen – 998 Std.
Im Auftrag
Ray Sono
Ausgangslage und Umsetzung
Herausforderungen

Die bestehende Website-Landschaft war historisch gewachsen und fragmentiert. Truck, Bus und Van wurden separat präsentiert, wodurch Synergien im Portfolio kaum sichtbar wurden. Ziel war die Zusammenführung in einer konsistenten Business-Website-Struktur pro Land.

Gleichzeitig musste eine neue Informationsarchitektur entstehen, die unterschiedliche Zielgruppen wie Flottenbetreiber*innen, Fahrer*innen oder kommunale Entscheider*innen klar adressiert und nutzer*innenzentrierte Einstiege ermöglicht.

Parallel zum Relaunch wurden neue MAN Truck Modelle eingeführt. Inhalte, Bildwelten und Bewegtbildformate mussten neu gedacht werden. Zudem galt es, ein einheitliches digitales Erscheinungsbild über sämtliche digitalen Touchpoints hinweg sicherzustellen.

Lösung

Die Plattform man.eu wurde im CMS FirstSpirit neu aufgebaut und international ausgerollt. Die Sparten Truck, Bus und Van wurden strukturell zusammengeführt und über klar definierte Einstiege für unterschiedliche Zielgruppen neu organisiert.

Gestalterisch entstand eine weiterentwickelte digitale Formsprache mit großformatigen Bildwelten, Animationen und verstärktem Einsatz von Bewegtbild. Inhalte wurden konsolidiert und präzisiert, um emotionale Produktinszenierung und sachliche Information in einer konsistenten Gestaltung zu vereinen.

Der größte Produkt-Launch seit 20 Jahren wurde digital begleitet. Ein Web-Special mit Countdown, Livestream und interaktiver Produktpräsentation bildete den zentralen Kampagnenhub, ergänzt durch Social-Media-Formate. 70.000 Zuschauer*innen verfolgten den Livestream am Premierenabend, 113.000 in der ersten Woche.

Als digitale Leadagentur verantworteten wir die konsistente Weiterentwicklung des digitalen Erscheinungsbildes über sämtliche Touchpoints. Die Website man.eu definiert mit ihrer Designbibliothek die visuelle Richtung für weitere Anwendungen. Der in Frontify aufgebaute Styleguide ist Teil des MAN Brandportals und dient als verbindliche Referenz, ergänzt durch eine technische Patternlibrary zur direkten Umsetzbarkeit für interne Teams, Händler*innen und Partner.

Referenzfilm Relaunch der Website man.eu
Meine Tätigkeit

Verantwortlich für die gestalterische Ausarbeitung und digitale Markenberatung im Rahmen der langjährigen Leadagentur-Betreuung:

  • Gestaltung der Website in enger Abstimmung mit Konzeption und Entwicklung
  • Visuelle Weiterentwicklung der Informationsarchitektur
  • Entwicklung der digitalen Formsprache und Interaktionsprinzipien
  • Mitgestaltung der digitalen Launch-Kampagne
  • Aktive Mitwirkung an Bild- und Videokonzepten
  • Illustration der Assistenzsysteme für Truck, Bus und Van
  • Konzeption und Struktur des digitalen Styleguides
  • Entwicklung und Betreuung der MAN-Designbibliothek
  • Bereitstellung von Gestaltungsvorlagen für Händler*innen und Partner
  • Digitale Markenberatung beim Kunden

Die Zusammenarbeit erfolgte in einem festen, langjährig eingespielten Team aus Konzeption, Design, Frontend- und Backend-Entwicklung, Redaktion sowie Account- und Projektleitung.

Exemplarische Designs
MAN Truck & Bus Website man.eu
Seitenbeispiele
Übersicht Truck-Modelle
Produkt Einstiegsseite
Übersicht Truck-Assitenzssysteme
man.eu Website Übersicht Truck-Modelle
man.eu Website Produkt Einstiegsseite
man.eu Website Übersicht Assistenzsysteme
MAN Truck & Bus Microsite New Truck Generation
Seitenbeispiele
Countdown Produktlaunch
Startseite Microsite
Modell Detailseite
MAN Produkteinführung Microsite Launch Countdown
MAN Produkteinführung Microsite Startseite
MAN Produkteinführung Microsite Produkdetail Seite
MAN Brandportal Digitaler Styleguide
Seitenbeispiele
Zielgruppen
Partner- und Händlervorlagen
Übersicht Design-Elemente
MAN Brandportal Digitaler Styleguide Abbildung 1
MAN Brandportal Digitaler Styleguide Abbildung 2
MAN Brandportal Digitaler Styleguide Abbildung 2
Highlight
Illustrationsstil für Assistenzsysteme

Für die Darstellung der Assistenzsysteme auf der neuen Website wurde ein eigenständiger Illustrationsstil entwickelt, der auf einer isometrischen Perspektive beruht. Dieser Ansatz ermöglicht eine klare und technisch präzise Visualisierung komplexer Funktionen und erleichterte zugleich die animatorische Umsetzung. Sämtliche Assistenzsysteme der Sparten Truck, Bus und Van wurden in diesem Stil umgesetzt, exemplarisch der Abstandsregeltempomat, der aktive Spurassistent sowie das Notbremsassistenzsystem.

Fahrzeuge und Szenerien wurden in hohem Detailgrad ausgearbeitet. Alle Illustrationen basieren auf einer fest definierten Farbpalette, die sich nahtlos in das MAN Erscheinungsbild integriert. So entstand ein konsistentes visuelles Vokabular für technische Inhalte, das sowohl statisch auf der Website als auch in animierten Sequenzen eingesetzt werden kann.

MAN Illustration Assistenzsysteme Darstellung WireframeMAN Illustration Assistenzsysteme Beispiel 2MAN Illustration Assistenzsysteme Beispiel 1

MAN Truck & Bus

eTGE Produktspecial

Zusammenfassung
Für die Produkteinführung des vollelektrischen MAN eTGE entstand ein interaktives Produktspecial als nahtlose Scrollytelling Experience. Im Zentrum steht eine animierte 3D-Fahrzeuginszenierung, die Produktfeatures, Einsatzbereiche, Services, Roadmap und FAQs dramaturgisch miteinander verbindet und gezielt zur Leadgenerierung führt.
Jahr
2018
Branche
Automobil
Tätigkeit
/
Creative Direction
/
Art Direction
/
UX
Dauer
24 Wochen – 160 Std.
Im Auftrag
Ray Sono
MAN eTGE Microsite Layout
Ausgangslage und Umsetzung
Herausforderungen

Mit dem eTGE brachte MAN ein vollelektrisches Van-Modell auf den Markt, das sowohl technologische Innovation als auch strategische Relevanz für urbane Mobilität verkörpert. Ziel war es, Elektromobilität verständlich zu erklären, Vorbehalte gegenüber Reichweite und Ladeinfrastruktur abzubauen und zugleich konkrete Produktvorteile überzeugend darzustellen.

Neben klassischen Produktinformationen sollten auch Einsatzbereiche, Services wie MAN Transport Solutions oder MAN Mobile24 sowie eine Roadmap zum Serienstart integriert werden. Gleichzeitig verfolgte das Special ein klares Performance-Ziel: die Generierung qualifizierter Leads über Kontakt- und Informationsangebote.

Die Herausforderung bestand darin, diese vielschichtigen Inhalte nicht modular, sondern als zusammenhängende digitale Erlebniswelt zu inszenieren.

Lösung

Konzipiert wurde eine interaktive Microsite, die vollständig als Scrollytelling Experience gedacht ist. Im Zentrum steht eine gerenderte 3D-Darstellung des Fahrzeugs, die als Videosequenz hinterlegt ist. Durch das Scrollen bewegen sich Nutzer*innen visuell entlang der Timeline des Films. Gezielte Haltepunkte strukturieren die Dramaturgie und öffnen kontextbezogene Inhalte.

Produktfeatures werden über interaktive Hotspots direkt am Fahrzeug zugänglich gemacht, etwa zur Ladetechnik, zur Lithium-Ionen-Batterie oder zum Elektromotor. Ergänzend wird der Elektroantrieb dem Dieselantrieb gegenübergestellt und anhand konkreter Einsatzszenarien wie innerstädtischem Lieferverkehr oder Handwerksbetrieben erläutert. Eine Roadmap visualisiert die Meilensteine von Produktionsstart bis Auslieferung.

Weitere Abschnitte informieren über Serviceangebote, konkrete Einsatzbereiche, häufig gestellte Fragen sowie Kontakt- und Informationsmöglichkeiten. Die Leadgenerierung ist dabei integraler Bestandteil der Experience und wird über klar platzierte Kontakt- und Registrierungsoptionen unterstützt.

Visuell wurde eine eigenständige Bildsprache für die Einsatzbereiche entwickelt, die Realbild mit einer abstrahierten Linienführung kombiniert und so das Thema Elektromobilität gestalterisch aufgreift. Animation, Interaktion und Narration greifen nahtlos ineinander und schaffen ein hochwertiges, digitales Produkterlebnis.

Bildschirmaufnahme der MAN eTGE Microsite
Meine Tätigkeit

Verantwortlich für Konzeption und visuelle Gestaltung des interaktiven Produktspecials:

  • Entwicklung der inhaltlichen Dramaturgie als durchgängige Scrollytelling Experience
  • Visuelle Konzeption und Gestaltung des gesamten User Interface
  • Definition der Interaktionslogiken und der dramaturgischen Haltepunkte im Scrollverlauf
  • Enge Abstimmung mit der 3D-Agentur zur Entwicklung des Storyboards und der Fahrzeuginszenierung
  • Entwicklung der Bildsprache für die Einsatzbereiche
  • Kontinuierliche Abstimmung mit der technischen Entwicklung zur präzisen Umsetzung der video-basierten Scrollmechanik
Über den Kunden

MAN Truck & Bus ist ein international tätiger Hersteller von Nutzfahrzeugen mit den Sparten Truck, Bus und Van. Das Unternehmen entwickelt und vertreibt Fahrzeuge sowie digitale Services für den gewerblichen Einsatz in Transport, Logistik und Personenbeförderung.

Digitale Plattformen und Produktspecials unterstützen die internationale Produkt- und Markenkommunikation und ermöglichen eine konsistente Darstellung von Portfolio, Innovationen und Services über verschiedene Märkte hinweg.