Tourismus-Agentur Lübecker Bucht
Der digitale Gästebegleiter vor Ort
Entwicklung einer Progressive Web App

Wie hmmh die digitale Innovation an den Strand bringt

Jährlich besuchen 2,5 Millionen Touristen die zahlreichen Attraktionen entlang der Lübecker Bucht. Um jedem einzelnen Gast seinen ganz persönlichen Begleiter an die Hand zu geben, hat hmmh den Lübecker Bucht Guide in Form einer Progressive Web App - kurz PWA - entwickelt.

30 Kilometer Strand in einer App

Gästen während ihres Urlaubs einen innovativen und ganz persönlichen Reisebegleiter an die Hand zu geben, dessen Service sie unabhängig von Ort oder Zeit nutzen können – das war die Vision der Tourismus-Agentur Lübecker Bucht. In Kooperation mit der Timmendorfer Strand Niendorf Tourismus GmbH wollten sie einen Service entwickeln, welcher das Urlaubserlebnis verbessert und Touristen die Planung vor Ort in jeglicher Hinsicht erleichtert: Eine Übersicht aller aktuellen Events, eine persönliche Merkliste sowie eine interaktive Karte sollten für die Urlaubsgäste stets erreichbar sein und somit auch offline funktionieren. In Zusammenarbeit mit Saint Elmo’s Tourismusmarketing haben wir in lediglich drei Monaten eine Progressive Web App entwickelt, welche genau diese Kernfunktionen abbildet. So haben Urlaubsgäste ihren persönlichen Reisebegleiter von nun an immer auf dem Smartphone dabei, und das Ganze unabhängig von Netzabdeckung oder Betriebssystem.

Unzählige Flyer und Prospekte… dabei will ich doch nur ein Fischbrötchen essen!

Unsere Lösung

Gemeinsam mit unserer Partneragentur Saint Elmo‘s Tourismusmarketing konnten wir in einem heißen Pitch punkten und die Tourismus-Agentur Lübecker Bucht von unserer Lösung überzeugen. Danach benötigten wir nur sechs Sprints, was in diesem Fall 12 Wochen waren, um diese Pionierarbeit fertig zu stellen und die PWA zu launchen. Und das auf den Punkt, denn ohne einen einzigen Tag Verzögerung haben wir den Lübecker Bucht Guide veröffentlicht.

Tourismus-Flyer

Challenge - ein Touristen-Guide in nur drei Monaten

Dank der agilen Projektorganisation von hmmh wurden aus unseren Anforderungen in kürzester Zeit wertvolle Features.

Silke Wencki, Product Owner

10 Orte, 3 Monate Zeit, 2 PO’s und diverse Backendanbindungen. Diese Umstände machten das Projekt von Anfang an zu einer Herausforderung für Entwicklung, Design und Organisation. Die schwierigste Aufgabe dabei bestand darin, ein Produkt abzuliefern, welches die Vielzahl der Anforderungen vereint. So musste zum Beispiel ein System entwickelt werden, welches die Nutzung mehrerer Unternehmensidentitäten innerhalb eines Designs ermöglicht. Auch musste kurzfristig eine Middleware aufgesetzt werden, um die diversen Backendquellen zu bündeln und zu synchronisieren.

Nutzerzentrik - eine Anwendung für Menschen, nicht für den App Store

Seit dem ersten Projekttag wurde höchster Wert auf Nutzernähe gelegt, um den Touristen vor Ort das beste Erlebnis bieten zu können. Auf Basis einer ausgiebigen empirischen Nutzeranalyse wurde ein genaues Bild der Verhaltensweisen und Nutzung kreiert. Somit konnten sich die Entwickler stets an den Bedürfnissen der Nutzer orientieren. Trotz straffem Zeitplan mit Deadlines, haben wir nicht auf Nutzertests verzichtet, um eine ständige Validierung und Verbesserung der entwickelten Features zu gewährleisten.

Progressive Web App - schnell, unabhängig, innovativ

pwa showcase

Wie entwickelt man mit begrenzten Ressourcen eine plattformunabhängige App in nur drei Monaten? Aufgrund der zahlreichen Anforderungen wurde dieser Frage bereits während des Pitches nachgegangen. Dabei fiel die Wahl auf die Umsetzung als Progressive Web App. Nur so können wir die Vorteile einer klassischen App und eines Web Services in kürzester Zeit kombinieren. Das heißt der Lübecker Bucht Guide kann auf allen Geräten geöffnet, leicht gewartet und offline genutzt werden, während auf native Funktionen wie GPS-Zugriff und Vollbild-Nutzung nicht verzichtet werden muss.

Agile Arbeitsweise - effektives Arbeiten im Team

Um der hohen Komplexität der Anforderung mit minimaler Vorbereitung zu begegnen, bedurfte es einer flexiblen Projektorganisation. Durch agile Methoden konnte in kurzer Zeit eine voll funktionale Applikation geschaffen werden. Durch das Anwenden von Scrum konnte das Entwicklerteam selbstorganisiert und eng zusammenarbeiten. Die regelmäßigen Software-Inkremente haben es erlaubt den Kunden konstant in die Entwicklung einzubeziehen.

Beispiel agile Arbeitsweise

Verwendete Technologien

Service Worker Icon
Service Worker

garantierte Offlinefähigkeit

React Icon
React

komponentenbasierte Appstruktur

Node.js Icon
Node.js

Flexibilität durch serverseitiges Javascript

Webpack

automatisierte Komprimierung und Übersetzung

Material UI Framework

schnelle, plattformunabhängige Interface-Entwicklung

Die erste touristische Region mit einer Progressive Web App

Mithilfe von hmmh konnten wir als erste touristische Region konsequent auf die neue Technologie Progressive Web App setzen. Zudem konnten wir die Entwicklungsdauer dank der Verwendung der agilen Projektmethode Scrum radikal verkürzen.

Paul Stellmacher (Portrait)
Paul StellmacherStellvertretender Geschäftsführer, Tourismus-Agentur Lübecker Bucht

Aus dem Arbeitsalltag

200 Pull Requests

unser Qualitätssiegel

550 Post It’s

konzipiert wird immer noch analog

7 Kuchen

für maximale Motivation am Montagmorgen

8 Eintrittstickets zum Hansa Park

als Projektabschluss unbezahlbar

1 Agiles Team

für optimale Selbstorganisation

Lassen Sie sich beraten

Kontaktformular

Schicken Sie uns einfach Ihre Kontaktdaten und wir setzen uns mit Ihnen in Verbindung.

Kontaktformular

Kontakt

Ihre Ansprechpartner

Sie haben Interesse oder offene Fragen? Wir freuen uns, von Ihnen zu hören.

Kerstin Seidel
Unit Director

Marius Bruns
Unit Director