Siteseeing Digital Design company logo
App-Entwicklung Hamburg

UX / UI Design

H2.LIVE App + Website — 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: 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 Inferface 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:

  • interaktive Animation

    UX / UI Design und Programmierung

    Hamburg Green Hydrogen Hub

    Projekt ansehen
  • webdesign-for-previiew-front-3

    UX / UI Design, Brand und Corporate Design

    Previiew – The Seven Finest Photographs

    Projekt ansehen
  • Tabrett – Brand-, Corporate und Web-Design

    Website, Brand und Corporate Design

    Dein neues Tabrett zum Schneiden, Servieren und Zelebrieren

    Projekt ansehen
  • Aeditive – Brand-, Corporate- und Web-Design

    UX / UI Design, Brand und Corporate Design

    Aeditive – 3D-Druck und Automatisierung für die Baubranche von morgen

    Projekt ansehen
  • Website Agentur

    UX / UI Design und Programmierung

    Leica – Konzentration auf das Wesentliche

    Projekt ansehen
  • Hochschule-fuer-Musik-Webrelaunch

    UX / UI Design und Programmierung

    Hochschule für Musik Karlsruhe
    Klassik trifft auf Moderne

    Projekt ansehen
  • Im Dialog mit dem Kunden – Der Blog der Hamburger Hochbahn

    UX / UI Design und Programmierung

    Hamburger Hochbahn Blog – Informationen, Hintergründe und Geschichten

    Projekt ansehen
  • Oschätzchen Online-Shop Entwicklung

    UX / UI Design

    Oschätzchen – Online-Shop für Hamburgs kulinarisches Paradies

    Projekt ansehen
  • nordbahn Website Relaunch

    UX / UI Design, Programmierung

    Webrelaunch der nordbahn

    Projekt ansehen