Siteseeing Webentwicklung und App-Entwicklung Hamburg
App-Entwicklung Hamburg

App- und Webentwicklung

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
Wasserstofftankstelle in Hamburg
Recherche und Analyse für die App
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.

App User Interface Design
H2.LIVE App Screens
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.

Website Longpager

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
Eine attraktive und zugleich gut lesbare Schrift war aufgrund der Anforderung kleinerer Informationen als auch längeren Texten erforderlich. Durch ihre schmale Form und den relativ großen Abständen ist die Schrift auch in kleiner Größe wunderbar lesbar. Das ermöglicht die Reduktion auf wenig verschiedenen Schriftgrößen für mehr Klarheit.
Webfonts
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.
Icon Design für H2.LIVE
Card Pattern
Wiederkehrende Muster helfen bei der Orientierung.
Webdeisgn card pattern
Das 8 Pixel System
Konsistente Abstände schaffen Klarheit zwischen Designer und Entwickler 😎.
8 Pixel System
Google Maps Style
Unwichtige Elemente wurden ausgeblendet. Der Nutzer erfässt die wesentlichen Elemente schneller.
Google map style
Info Design
Die Vermittlung verschiedener Status auf engstem Raum erforderte eine ganz klare und vereinfachte Darstellung, die auf Anhieb zu verstehen ist.
Info Design

Weitere Projekte: