H2 MOBILITY

Wir zeigen der Welt, dass Wasserstoffmobilität funktioniert

Die Mission von H2 MOBILITY ist es, der Welt zu zeigen, dass Wasserstoff als emissionsfreie Lösung im Verkehr funktioniert. Dafür baut und betreibt H2 MOBILITY Wasserstofftankstellen in ganz Deutschland und baut Geschäftsbeziehungen mit strategischen Kunden auf.

Wir von Siteseeing sind überzeugte Wasserstofffahrer und unterstützen die Mission von H2 MOBILITY. Als Teil des App- und Webteams sind wir für Konzeption sowie UX- und UI-Design zuständig.

Herausforderung

Die Infrastruktur für Wasserstofftankstellen befindet sich noch im Aufbau. Es fehlt an einer flächendeckenden Versorgung, und bestehende Tankstellen sind häufig wartungsanfällig. Wasserstofffahrer benötigen verlässliche Informationen darüber, wo sie tanken können und ob die Tankstellen betriebsbereit sind. Auch Politik und Wirtschaft zeigen großes Interesse an der Entwicklung und möchten diese genau verfolgen.

Lösung

In Zusammenarbeit mit dem Team von H2 MOBILITY haben wir die H2.LIVE App und Website entwickelt, um eine verlässliche Lösung für Wasserstofffahrer zu bieten. Die Plattform liefert umfassende Echtzeitinformationen zu allen öffentlichen Wasserstofftankstellen in Deutschland – live, zuverlässig und stets aktuell. Nutzer können Tankstellen direkt in ihre Routenplanung einbeziehen, Zapfsäulen über die App aktivieren und bequem bezahlen. Darüber hinaus informiert H2.LIVE über Neuigkeiten und Entwicklungen in der Wasserstoffmobilität.

Ergebnis

Die H2.LIVE Plattform hat sich als erste Anlaufstelle für Wasserstofffahrer und Interessenten etabliert. Sie erleichtert den Alltag der Nutzer und stärkt das Vertrauen in die Wasserstofftechnologie, indem sie verlässliche Informationen und einen direkten Zugang zur Infrastruktur bietet.

iOS App: Apple Store

Android App: Google Play Store

Website: h2.live

Die Nutzerbedürfnisse zu identifizieren, war die Basis für den gesamten Designprozess.
H2 Mobility UX Workshop
Siteseeing ist als festes UX / UI Designteam bei H2 MOBILITY integriert und u.a. für Konzeption und Design der H2.LIVE App verantwortlich. Ob Workshops, Prototyping oder App-Design – wir schätzen die analytische Herangehensweise des Teams. Das von Siteseeing entwickelte Design System ermöglicht uns ein schnelles und effizientes ausrollen von neuen Features oder Produkten.
Robert Schönduwe
Head of Digital Product, H2 MOBILITY

Die H2.LIVE App

Die H2.LIVE App bietet Echtzeitinformationen zum Status aller öffentlichen Wasserstofftankstellen in Deutschland. Sie ermöglicht die Integration von Wasserstofftankstellen in die Routenplanung, das Aktivieren von Zapfsäulen per App und die Abwicklung der Bezahlung. Zusätzlich informiert die App über Neuigkeiten und Entwicklungen in der Wasserstoffmobilität.

H2 Mobility responsive Design Smartphone

App Screens

H2 Mobility App Screen
Wissen wo H2 Tanken geht
H2 Mobility App Screen
Routenplanung für H2-Fahrer
H2 Mobility App Screen
Wasserstoff Verfügbarkeit live
H2 Mobility App Screen
Wasserstoff mit der virtuellen Tankkarte bezahlen
H2 Mobility App Screen
Wasserstoffstationen
im Ländervergleich
H2 Mobility App Screen
Mein H2.Live
H2 Mobility App Screen
H2 News
H2 Mobility App Screen
Betankungsdruck
auswählen
H2 Mobility Wasserstoff Auto an Tankstelle
H2 Mobility Website Design

Das H2.LIVE Designsystem

Sachlich, clean, zeitgemäß – das Designsystem beschleunigt den Designprozess und schafft Brücken zwischen Teams, die in enger Zusammenarbeit neue Produkte zum Leben erwecken.


H2 Mobility Designsystem

Typografie

Eine attraktive und zugleich gut lesbare Schrift war aufgrund der Anforderung kleinerer Informationen als auch längeren Texten erforderlich. Durch ihre schmale Form und die relativ großen Abstände ist die Schrift auch in kleiner Größe wunderbar lesbar. Das ermöglicht die Reduktion auf wenig verschiedene Schriftgrößen für mehr Klarheit.

H2 Mobility Corporate Design Schriftwahl

Wortbildmarke

Die Wortbildmarke aus Elementsymbol für Wasserstoff gepaart mit dem Zapfhahn vermittelt klar und in reduziertester Form das Wasserstofftanken. Das ermöglicht zum einen die Darstellung als App-Icon, zum anderen wird es plakativ zum Beispiel an Wasserstoff-Tankstellen eingesetzt werden.

H2 Mobility Bildmarke

Das 8 Pixel System

Konsistente Abstände schaffen Klarheit zwischen Designer und Entwickler.

H2 Mobility Design System Abstände & Ecken

Google Maps Style

Unwichtige Elemente wurden ausgeblendet. Der Nutzer erfasst die wesentlichen Elemente schneller.

H2 Mobility Map

Info Design

Die Vermittlung verschiedener Status auf engstem Raum erforderte eine ganz klare und vereinfachte Darstellung, die auf Anhieb zu verstehen ist.

H2 Mobility Infodesign

Weitere Referenzen