Siteseeing Digital Design
h2-live-tst

H2.LIVE

Wir zeigen der Welt, dass Wasserstoffmobilität funktioniert

Branche:

  • Elektromobilität

Aufgaben:

  • UX / UI Design
  • Konzept
  • Prototyping
  • Nutzertests
  • Design System Entwicklung
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.

iOS App: Apple Store
Android App laden: Google Play Store
Website: h2.live
h2live_app_screens
arbeitsprozess_h2
Die Nutzerbedürfnisse zu identifizieren war die Basis für den gesamten Designprozess.

Die App für Emissionsfreifahrer

Echtzeitinformationen über den aktuellen Status aller öffentlichen Wasserstofftankstellen in Deutschland – Live. Zuverlässig. Immer aktuell. Die H2.LIVE-App zeigt, wo sich die nächste Station befindet und wann sie geöffnet ist. Außerdem informiert sie über das aktuelle Geschehen in der Wasserstoffmobilität.

h2live_app_screen
h2live_app_screen_2
Im Zentrum der App steht die interaktive Karte mit Überblick über sämtliche Wasserstofftankstellen

Die Website
Wasserstoffmobilität auf einem Blick

Wo kann ich Wasserstoff tanken, welches Wasserstoffauto kann ich fahren und wie entwickelt sich die Wasserstoff-Branche? Die H2.LIVE-Website bietet hilfreiche Informationen rund um das Thema Wasserstoffmobilität.

h2_mirai

Das Map-Widget
Gegenwart und Zukunft

Die interaktive H2.LIVE-Karte zeigt den aktuellen Stand der Wasserstofftankstellen in Europa. H2-Tankstellen, die gerade gebaut werden, können dazu geschaltet werden.

Die Karte wurde als Map-Widget entwickelt und kann in andere Websites eingebunden werden.

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.

Typografie
Weniger Schriftschnitte, weniger Schriftgrößen = mehr Klarheit.
h2live-typografie
Icon Design
Skalierbar von mini bis ganz groß.
h2live-logo
Card Pattern
Wiederkehrende Muster helfen bei der Orientierung.
h2live-cardpattern
Das 8 Pixel System
Konsistente Abstände schaffen Klarheit zwischen Designer und Entwickler 😎.
h2live-spacing
Google Maps Style
Unwichtige Elemente wurden ausgeblendet. Der Nutzer erfässt die wesentlichen Elemente schneller.
h2live-mapstyle
Info Design
Informationen klar und schnell vermitteln.
h2live-info

Weitere Projekte: