UX / UI Design und Programmierung

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: Google Play Store

Website: h2.live

Wasserstoff-Auto
UX Workshop

Die Nutzerbedürfnisse zu identifizieren, war die Basis für den gesamten Designprozess.

Die App für Emissions-freifahrer

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.

Webdesign mobile Ansicht
App Design

Im Zentrum der App steht die mit Überblick über sämtliche Wasserstoff-Tankstellen

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 LIVE Website screenshot

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 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.

Design System Schriften

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.

Design System Icon H2 LIVE

Card Pattern

Wiederkehrende Muster helfen bei der Orientierung.

Design System Card design

Das 8 Pixel System

Konsistente Abstände schaffen Klarheit zwischen Designer und Entwickler.

Design System Abstände & Ecken

Google Maps Style

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

Map widget

Info Design

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

Weitere Referenzen

HGHH Illustration

Web Design

Hamburg Green Hydrogen Hub

Wasserstoff als Teil der Energiewende

Brand Design für Aeditive

Brand Building + Website

Aeditive

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

Neugierig geworden? Kontaktiert uns, um gemeinsam euer Potential auszuschöpfen

Kontakt Agentur Siteseeing
Peter Zepp
UX Designer und Gründer
040 18 88 04 30
peter@siteseeing.de
Termin buchen