Budapest in der Hosentasche: die Reise-App für Ultimate Budapest
Ultimate Budapest verkauft Erlebnisse in der ungarischen Hauptstadt: Bootstouren, Thermalbad-Pakete, Pub-Crawls, geführte Touren auf eigene Faust. Gemeinsam mit unserer Partneragentur Cubicfox (Budapest und München) haben wir daraus eine native App für iPhone und Android gemacht. Alle Inhalte kommen live aus demselben Headless-CMS wie die Website. Ein Headless-CMS ist ein Content-System, das Inhalte über Schnittstellen ausspielt, statt an eine einzelne Seite gebunden zu sein. Eine Quelle, zwei Kanäle.
1
Ausgangslage
Über die Website lief das Geschäft gut. Aufs Smartphone gab es bis dahin keinen direkten Weg, also genau dorthin, wo Reisende ihre Entscheidungen unterwegs treffen.
Eine App ist aber nicht die Website in klein. Eine Website-Navigation lässt sich nicht eins zu eins auf einen Daumen und ein kleines Display übertragen. Dazu kommt die Zielgruppe: Gäste in einer fremden Stadt, oft müde von der Anreise, die die App einmal öffnen und sofort klarkommen wollen. Kein Tutorial, keine Geduld für komplizierte Menüs.
Daraus wurden drei Vorgaben: beim ersten Öffnen etwas entdecken, ohne Anleitung zurechtkommen, mit gutem Gefühl buchen.
2
Lösung & Vorgehen
Wir sind in drei Schritten vorgegangen.
1. Workshop & Priorisierung
Am Anfang haben wir jede denkbare Funktion gesammelt. Danach kam eine Aufwand-Nutzen-Matrix: Jede Idee wurde bewertet und einsortiert, bevor eine Zeile Code entstand. So trennten sich die Pflichtfunktionen von den netten Extras. Mit Card Sorting, einer Methode, bei der Nutzer:innen Inhalte selbst in Gruppen ordnen, haben wir die Funktionen so sortiert, wie Reisende denken: nach Art des Erlebnisses, nicht nach Produktkategorie.Laravel als Basis für die maßgeschneiderte Webapplikation
2. Klickbarer Prototyp
Vor der Entwicklung stand ein vollständig klickbarer Prototyp, vom Startbildschirm bis zur abgeschlossenen Buchung. So ließen sich Abläufe testen und Schwachstellen früh beheben, solange das noch ein paar Klicks kostet und keine Entwicklerstunden.
3. Frontend mit React Native
Das Frontend entstand in React Native, einem Framework, mit dem sich aus einer Codebasis Apps für iOS und Android bauen lassen. Wichtig war die saubere Übereinstimmung mit den Designs auf beiden Systemen. Die härteste Vorgabe: kein Inhalt fest im Code verdrahtet. Tour-Namen, Beschreibungen, Preise, Bilder kommen live aus dem Headless-CMS, genau wie auf der Website.
Tech Stack
React Native für die App, Express.js im Backend, ein Headless-CMS als gemeinsame Inhaltsquelle für Website und App.
3
Das Ergebnis
Die App ist live, im App Store und bei Google Play. Was sie kann:
- Entdecken nach Erlebnis. Reisende stöbern und filtern nach Art des Erlebnisses statt nach Produktlogik. Dazu kommen geführte Touren auf eigene Faust und eine interaktive Karte für Gastronomie und Nightlife.
- Buchen ohne Umweg. Der komplette Buchungsablauf liegt in der App. Tickets landen als QR-Code direkt im digitalen Wallet, kein Absprung auf die Website, kein Bruch im Ablauf.
- Ein CMS, zwei Kanäle. Das Content-Team pflegt jeden Inhalt einmal. Derselbe Eintrag versorgt Website und App automatisch.
Was Sie daraus mitnehmen können?
- Denken Sie die App vom Nutzungskontext her, nicht von der Website. Wer eine bestehende Seite einfach verkleinert, baut am Menschen vorbei.
- Pflegen Sie Inhalte einmal, spielen Sie sie überall aus. Ein Headless-CMS erspart doppelte Arbeit und Sync-Fehler zwischen Website und App.
- Testen Sie den Ablauf, bevor er Code wird. Ein klickbarer Prototyp deckt Probleme auf, solange sie noch günstig zu beheben sind.
- Priorisieren Sie, bevor Sie bauen. Eine Aufwand-Nutzen-Matrix verhindert, dass nette Extras das Budget der Pflichtfunktionen auffressen.
4
