Success Story lechradweg.info: 

Eine PWA als digitaler Reiseassistent

Alles im Fluss: Eine Progressive Web App (PWA) unterstützt als “Rundum-Sorglos-Programm” Radfahrende entlang des neu konzipierten Lechradwegs – vor und während ihrer Reise.

Die Allgäu GmbH beauftragte infomax mit der Digitalisierung des Serviceangebots rund um den neuen Radweg.

  • Unsere Leistungen: Konzeption und Projektmanagement | UX-Design | Technische Beratung | Software-Entwicklung | imx.Platform | Frontend- und Portal-Entwicklung 
 | © Marc Oeder
Lechzopf, © Marc Oeder

Unser Auftrag:

Eine PWA als digitaler  Reise-Assistent für Radfahrende entlang des Lechs 

Im Rahmen der Neukonzeption eines grenzüberschreitenden Radwegs entlang des Lechs von Steeg in Tirol bis zur Mündung im bayerischen Marxheim erhielt infomax als Projektpartner der Allgäu GmbH den Auftrag zur Schaffung eines digitalen Reiseassistenten mit einem Fokus auf Planung und Vor-Ort-Service: Als "Rundum-sorglos-Paket" unterstützt er Radfahrende entlang des neuen Lechradwegs bereits in der Planungsphase und während ihrer Tour, indem er die jeweils passenden, kontext- und ortsbasierten Informationen liefert und sie dank Routingfähigkeit entlang des Lechradwegs navigiert.

Der digitale Reiseassistent wurde als echte Progressive Web App (PWA) realisiert, die die Vorteile einer Website mit denen einer nativen App vereint.

infomax begleitete das Projekt von der Konzeption in frühen Phasen über die Umsetzung bis zum Live-Testing vor Ort und der beständigen Weiterentwicklung.

Wir haben den Anspruch, einen smarten Tourenbegleiter für den Lechradweg zu entwickeln, der hinsichtlich Informationsgrad, Servicecharakter sowie Nutzungserlebnis zum Benchmark wird.

- infomax-Projektteam -

Projekt-Highlights

USPs

"Echte" Progressive Web App (PWA)

Das Lechradwegprojekt bot mit seinen Anforderungen eine Steilvorlage, es als Progressive Web App (PWA) zu realisieren. In einer PWA verschmelzen alle Vorteile einer Website und einer nativen App: Als Website umgesetzt, verfügt sie über Merkmale einer App – all in one: schnelle Ladezeiten, einfache Navigation, dazu Zugriff auf native Smartphone-Features wie GPS, Telefon, Kamera – und Offlinefähigkeit.

Die Voraussetzung: ein PWA-Manifest, das das Aussehen und Verhalten der App beim Installieren auf dem Smartphone definiert.

Offlinefähigkeit

  • Ein Tooltip informiert nach dem Öffnen der Website mit einem Mobilgerät, dass Inhalte heruntergeladen und offline genutzt werden können. Die Seite lässt sich auf dem Homescreen installieren.
  • Nach der Installation können die für den „Unterwegs-Modus“ relevanten Inhalte auch offline genutzt werden, ausgenommen sind vor allem Informationen, für die standortbezogene Echtzeit-Informationen benötigt werden oder die zu Performance-Beeinträchtigungen führen würden:
    • Umgebungsmodul/Karten auf Detailseiten
    • Routing-Buttons
    • AroundMe-Ansicht
    • interaktive Karten, aufrufbar sind statische Karten für den Gesamtverlauf und die Haupt- sowie barrierefreien Etappen
    • reduzierte Bildformate und -einbindung

 (Push-) Benachrichtigungen

Nutzen stiftende Benachrichtigungsfunktionen werten die PWA weiter auf:

  • Notifications zu Naturschutzgebieten: Beim Start des Routings durch eine Etappe oder eine geplante Route wird per Overlay ein allgemeiner Hinweis zu Verhaltensregeln im Naturschutzgebiet angezeigt, sollte auf der geplanten Route ein oder mehrere Stämme liegen, denen die Produktlinie “Naturschutzgebiet” zugewiesen ist.
  • In Planung: Unwetterwarnungen, aktuelle Informationen zu einem nahegelegenen POI (z.B. Öffnungszeiten), Streckensperrungen

Content Delivery API der imx.Platform

Die imx.ContentDelivery API (Link) ist ein mächtiges Werkzeug, das extrem performant kontextbasierte Datenabfragen ermöglicht. Basierend auf GraphQL liefert die cloud-native Anwendung auf jede spezielle Frage eine für den Kontext zielgerichtete Antwort – und das performant, resilient und skalierbar.

Im Lechradwegprojekt zeigt in einem ihrer ersten Anwendungsfälle ihr Potenzial. Dort stellt sie eine direkte Verbindung zwischen der Single-Page Anwendung lechradweg.info und der imx.Platform ohne die Notwendigkeit einer Middleware her. So werden beispielsweise alle Etappenlisten, POI-Listen oder auch Detailseiten direkt vom Browser bei der Content Delivery API angefragt und und erhalten genau nur die gerade benötigten Daten.

Mehr zur imx.ContentDelivery API auf unserem Blog gradextra.de.

Unsere Services

From brain to bike: Von der Konzeption über die Umsetzung bis zum Testing vor Ort

Konzeption: User Flows und Wireframes

Im Rahmen eines Konzeptionsworkshops identifizierten wir relevante Use Cases entlang der Customer Journey:

  • Entdecker-Modus: erste Informationen zum Lechradweg
  • Planer-Modus: Unterstützung bei der Planung der Etappen, Übernachtungen, eigenes Routing
  • Erlebnis-Modus: Vorschläge für Sehenswürdigkeiten und Gastronomie entlang der Route
  • Routing-Modus: Live-Routing während der Tour, Informationen zu POIs, Benachrichtigungen

Daraus leiteten wir User Flows ab, die relevante Einstiege identifizierten, benötigte Ansichten skizzierten und die relevanten Informationen in einer stringenten Navigation zusammenführten. Darauf folgten erste Visualisierungen mittels Wireframes.

UX-Design

Auf Basis des neu entwickelten Corporate Designs für den Lechradweg entstand ein Visual Design, das wir im Rahmen von Hallwaytests in einem sehr frühen Stadium prüften und optimierten.

Projektmanagement durch UX-Konzeption

Eine Besonderheit im Lechradweg-Projekt: Die UX-Konzeption blieb aufgrund des hohen konzeptionellen Projektanteils auch im Projektmanagement-Lead. In Weeklies mit dem Kunden und dem Projektteam (UX-Design, Frontend, Portal-Entwicklung, Software-Architektur) und mittels eines Sprint Plannings konnten wir ohne Informations- und Zeitverluste beraten und agil nachjustieren.

Frontend-, Portal- und Software-Entwicklung

  • Der digitale Reiseassistent wurde als Angular-App entwickelt.
  • Lokal wurde in Docker-Containern entwickelt, ein Server-Side Rendering gewährleistet die suchmaschinenoptimierte Bereitstellung von Contents.
  • Ein Effizienz-Boost war die gleichzeitige Bearbeitung durch Frontender und Entwickler: In kurzen Zyklen verwandelten die Teams statische UX-Designvorlagen in dynamische Module.
  • Die bereits vorhandene imx.Platform-Instanz der Allgäu GmbH dient als Content Repository für feste Seiten wie dem Impressum; alle weiteren Daten werden über die neue imx.Content Delivery API bereitgestellt. Auf ein CMS konnte so komplett verzichtet werden.
  • Als Kartenbasis wird MapLibre genutzt, die Tiles vom Maptoolkit über Rapid API eingebunden.
  • Spannende Herausforderungen galt es beim Routing zu lösen: Da sich das Routing nicht am Verlauf des Lechradwegs, sondern an der kürzesten Strecke orientierte, führten wir eine Gewichtung ein, um Radreisende möglichst lange an der Original-Strecke zu halten. 
    Nutzer*innen erhalten dank regelmäßiger Standort-Updates während des Routings aktuelle Informationen über die nächsten Wegpunkte und eine Angabe über die Entfernung zum Ziel.

 Testing unter realen Bedingungen vor Ort

Die Projektarbeit fand dabei nicht ausschließlich im Büro statt: Zum Testing radelten die Projektverantwortliche Lorena Meyer und Lead-Entwickler Benni Hofmann Etappen ab, um „ihr“ Produkt live und unter realen Bedingungen zu testen.

Nicht zuletzt die Erkenntnisse aus dem Testing vor Ort lieferten viele neue Ideen und Erweiterungsmöglichkeiten. Geplant sind weitere (Push) Notifications, visuelle Optimierungen und Content-Erweiterungen wie z.B. Lauschtouren.

 | ©

Mit dem Digitalen Reiseassistenten für den Lechradweg haben wir ein durchweg innovatives  Serviceangebot  für den Gast geschaffen. infomax war dabei von der  ersten Konzeptidee bis zur fertigen PWA  unser kompetenter Partner  - Ideengeber und umsetzender  Dienstleister zugleich.

- Anke Hainzinger, Allgäu GmbH -

Auf einen Blick

Fakten

  • Zusammenarbeit

    mit der Allgäu GmbH: seit 2013

  • Herausforderung

    Entwicklung eines digitalen Reiseassistenten mit Routingfunktion für Radfahrende auf dem neu konzipierten Lechradweg

  • Lösung

    Routingfähige Progressive Web-App als "Rundum-sorglos-Paket" für Gäste in der Planungsphase und vor Ort 

  • Methode

    agile Zusammenarbeit in interdisziplinären Projektteams, stetiger Austausch mit dem Kunden im Rahmen von Weeklies inkl. gemeinsamer Dokumentation und Spezifikation

  • USPs

    Progressive Web App |  imx.ContentDelivery API

  • Meilenstein

    Launch der PWA lechradweg.info im Juli 2022

  • Weiterentwicklung

    Ausbau von (Push-)Benachrichtigungen, Integration von "Lauschtouren"

  • Unsere Stärke

    One single face to the customer: Beratung und Projektmanagement ohne Brüche durch UX-Konzeption - vom ersten Konzeptionsworkshop bis zum Testing auf dem E-Bike vor Ort. 

Hintergrund

Konzeption eines Radwegs entlang des Lechs

Der Lech bietet entlang seines Verlaufs vom Ursprung in Vorarlberg durch das Tiroler Lechtal und die Allgäuer Alpen bis zur Mündung in die Donau in Marxheim bei Donauwörth bisher weitgehend ungenutztes Potenzial für naturnahe Erlebnisse
Im Rahmen eines grenzüberschreitenden Interreg-Projektes wurde daher ein Radweg entlang des Lechs - von Steeg in Tirol bis zur Mündung im bayerischen Marxheim - neu konzipiert, in den der auf österreichischer Seite bereits bestehende Lechtalradweg integriert wurde.

Ziele

  • Schaffung eines touristischen Angebots entlang des Lechs, das die einzigartige Natur und Kultur der Flusslandschaft vor dem Alpenpanorama erlebbar macht und mit der Technikgeschichte des UNESCO Welterbes verbindet
  • Integration und Inwertsetzung des UNESCO Welterbes des Augsburger Wassermanagementsystems (seit 2019)
  • Beitrag zur regionalen Entwicklung und Naturerfahrung, insbesondere durch den Einsatz neuer Medien
  • Ausdehnung der touristischen Saison
  • Setzen von Maßstäben im Bereich E-Mobilität, Digitalisierung und Barrierefreiheit

Lösung

Der neue Lechradweg führt über fünf Etappen 250 Kilometer flussaufwärts von Nord nach Süd, von der Mündung in die Donau bis zum Oberlauf im Tiroler Lechtal. Auf diese Weise genießen Radler*innen auf der stets leicht ansteigenden Route zum Ursprung die schönsten Panoramaaussichten.

Der neue Streckenabschnitt wurde beschildert und mit E-Bike-Ladestationen versehen. Ausgewählte Touren sind barrierefrei mit dem Handbike befahrbar.

Im Rahmen der Neukonzeption erhielt infomax als Projektpartner der Allgäu GmbH den Auftrag zur Schaffung eines digitalen Serviceassistenten, der Radfahrende in der Planungsphase und während der Tour dank Routingfähigkeit unterstützt.

Kontakt

Sie möchten mehr über dieses Projekt erfahren oder planen Ähnliches? Oder sind Sie interessiert an der imx.ContentDelivery API und unserer Datenmanagement-Lösung imx.Platform? Gern tauschen wir uns dazu mit Ihnen aus!

infomax websolutions GmbH
Aichfeld 2
83224 Grassau
Deutschland
Telefon: +49 8641-6993-0