Die Buchungsseite einer dreißig Jahre alten Reiseagentur, neu gestaltet für Flüge, Hotels und Touren: von zwölf verglichenen Seiten bis zu Live-Seiten.
01Kontext
Taha Gasht ist eine Reiseagentur in Teheran, die seit drei Jahrzehnten Reisen verkauft: Inlands- und Auslandsflüge, Hotels im Iran und im Ausland, Gruppenreisen mit persischsprachiger Reiseleitung und Visa. Ihre Website ist das Buchungssystem für all das, mit einem Portal für Partneragenturen dahinter.
Sina arbeitete in Teilzeit daran, als Produktdesigner und Stratege. Die Figma-Datei nennt den Auftrag auf ihrem Titelblatt: die Änderungen an der Hauptseite von Taha Gasht. Die Arbeit umfasste die öffentliche Seite von der ersten Suche bis zum Konto der Reisenden und ein Konzept für das, was danach kommen könnte.
02Problem
Ein Inlandsflug ist in Minuten gekauft, nach Preis und Uhrzeit. Über eine Tour nach Japan denkt man wochenlang nach: die Termine, die Hotels, die Dokumente, die Reiseleitung und oft ein Anruf bei einer Beraterin oder einem Berater. Dieselbe Seite muss beidem gerecht werden.
Dieselben Flüge und Hotels gibt es auch auf anderen Buchungsseiten. Was eine Agentur hinzufügen kann, ist ihr Urteil: welcher Flug einen garantierten Platz hat, welches Hotel gut liegt, welche Tour ihr Geld wert ist. Das Redesign sollte dieses Urteil neben den Preis stellen.
Eine Preisliste sagt, was eine Reise kostet. Eine Agentur kann auch sagen, was man wählen sollte.
03Research
Vor dem ersten Entwurf nahm Sina am selben Tag die vollständigen Seiten von zwölf Buchungsseiten auf, neben der von Taha Gasht: fünf iranische Seiten, die dieselben Flüge verkaufen (Alibaba, Flytoday, MrBilit, Flightio und SafarMarket), und sieben internationale (Booking.com, Expedia, Kayak, Skyscanner, Google Flights, Cheapflights und Wego).
In dieselbe Datei kamen App-Kits für Flugbuchungen als Referenz für mobile Abläufe und später, für das Social-Konzept, die Seiten mit Reiseerlebnissen einer iranischen Buchungsseite und von Tripadvisor. Nichts davon wird hier gezeigt: Es ist die Arbeit anderer.
04Vorgehen
Das erste Board zeichnet die Wege für Flug und Hotel Modul für Modul auf: die Suchseite, die Ergebnisliste, die Seite eines einzelnen Flugs oder Hotels und die Landingpages, die Suchmaschinen finden. Auf der Flugseite trägt jedes Modul eine Markierung seiner Herkunft: die heutige Struktur von Taha Gasht oder eine neue Idee.
Manche neuen Ideen sind klein, etwa Buttons für den Vortag und den Folgetag oder ein Preiskalender, der Feiertage markiert. Andere verändern, was die Seite leisten kann:
Jedes Modul hat eine Herkunft: von der heutigen Seite übernommen oder eine neue Idee.
05Empfehlungen
Zwei Opportunity-Bäume fragen, was die Agentur empfehlen kann. Für Flüge gibt es vier Arten von Empfehlungen: die günstigsten; Charterflüge, weil der Platz im Charter garantiert ist; die kürzesten, auf Auslandsstrecken; und Flüge mit Sonderleistungen für begrenzte Zeit, die im Backoffice von Hand eingestellt werden.
Der Zweig mit den Sonderleistungen ist auch der Ort, an dem die Agentur mehr verkaufen kann: Zusatzgepäck, ein Upgrade in die Business Class, Rabatte auf Strecken, eine CIP-Lounge, ein kostenloses Hotel beim Zwischenstopp. Für Hotels verbinden die Empfehlungen garantierte Zimmer, die Nähe zum Zentrum und den Preis. Ein weiteres Board zeichnet die Tourseite auf dieselbe Weise auf, beginnend mit Japan.
Die Empfehlung der Agentur wurde zu einem Sortierreiter in der Ergebnisliste, neben günstigste und beste.
06Designsprache
Die Flugticket-Karte trägt den größten Teil der Seite. Sie wiederholt sich in jeder Ergebnisliste, öffnet sich zu Flug-, Preis- und Erstattungsdetails und gibt das Muster für Hotel- und Tourkarten vor. Deshalb wurde die Designsprache an ihr erarbeitet, in drei Runden: eine erste Iteration, eine dritte Version des Tickets und Endfassungen, die Schatten, Kartenhintergründe und Rahmen auf derselben grauen Seite vergleichen.
Die Schrift ist Yekan Bakh, durchgehend für Persisch gesetzt. Frühere Skizzen in der Datei erproben zwei Preiskalender, einen für Inlands- und einen für Auslandsflüge, und ein Ticket, das sich an Ort und Stelle öffnet.
07Lösung
Die Flugergebnisse beginnen mit einem Streifen von Daten und ihren günstigsten Preisen, damit ein günstigerer Tag schon vor dem Scrollen sichtbar ist. Über der Liste stehen drei Sortierreiter, günstigste, beste und die Empfehlung von Taha Gasht, und jeder zeigt seinen Preis und die gesamte Reisezeit.
Die Filter folgen dem, was auf diesen Strecken zählt: Charter- oder Linienticket, Zahl der Zwischenstopps, ob ein Zwischenstopp ein Visum verlangt, Kabine und Gepäck. Jede Karte zeigt die verbleibenden Plätze und öffnet ein Fenster mit den Flugdetails, dem Preis für Erwachsene, Kinder und Kleinkinder und den Erstattungsregeln, die auch Gebühren und Verkaufsbeschränkungen nennen. Ein Preisalarm sitzt in der Liste.
Die Suche kann einfache Strecke, Hin- und Rückflug und Gabelflüge, und die Flugversion der Startseite ergänzt eine Tabelle mit Last-Minute-Charterflügen.
Das Transitvisum hat einen eigenen Filter: Eine günstige Verbindung über Europa braucht ein Schengen-Visum.
Jede Teilstrecke, der Zwischenstopp und der Gesamtpreis
Der Preis für Erwachsene, Kinder und Kleinkinder
08Hotels
Hotelergebnisse erscheinen als Liste oder auf einer Karte, mit einem gemeinsamen Satz Filter für beide: Preisspanne, Sterne, Art der Unterkunft (Hotel, Boutiquehotel oder Hostel) und die Viertel der Stadt. Eine Karte zeigt den Preis pro Nacht, die Sterne und, wo es passt, die Empfehlung der Agentur.
Die Hotelseite teilt die Bewertung in Personal, Lage und Sauberkeit auf, listet Sehenswürdigkeiten in der Nähe mit der Zeit zu Fuß, mit dem Auto oder mit der U-Bahn und lässt Gäste eine Bewertung mit Fotos schreiben. Zimmer werden auf derselben Seite verglichen, mit einer Anfrage für Zusatzleistungen vor der Buchung.
Entfernungen stehen in Minuten und nach Verkehrsmittel, so wie Reisende ihren Tag planen.
09Touren
Bei Touren ist die Agentur am stärksten, und hier dauert ein Kauf am längsten. Die Tourenliste filtert danach, was Reisende von der Reise wollen: die Saison oder den Anlass, etwa Nowruz oder Weihnachten, das Wetter, das Ziel (Erholung oder Abenteuer) und die Art der Aktivität, von Natur und Geschichte bis zu Festen, Essen und Einkaufen.
Eine Tourseite, zuerst für Japan entworfen, beantwortet die Fragen, die Beraterinnen und Berater meist hören: die Pakete und ihre Termine, den Preis nach Hotel und Zimmer mit Kinderpreisen, einen Rechner für die ganze Gruppe, den Plan für jeden Tag, die Hotels, die enthaltenen Leistungen (eine persischsprachige Reiseleitung, das Visum, die Versicherung und die CIP-Lounge am Flughafen Teheran) und die nötigen Dokumente. Ein Rückrufformular, eine Telefonnummer und WhatsApp bleiben durchgehend nah.
Die Seite zeigt außerdem die Bilanz der Agentur, ihre Jahre im Geschäft, ihre Reisenden und deren Zufriedenheit, was das Tour-Board als Wettbewerbsvorteil geplant hatte.
Eine Tour wird weiterhin in der Beratung verkauft. Die Seite bereitet Reisende auf dieses Gespräch vor.
10Startseite
Die Startseite beginnt mit einer Suche und vier Reitern: Hotel, Flug, Flug plus Hotel und Tour. Darunter wechseln die Reihen mit der Saison und mit den Reisenden: zuletzt angesehen, eine Reihe für Reisen in den Süden, Last-Minute-Flüge und vorgeschlagene Hotels. Die Startseite gibt es außerdem in einer Version für jedes Produkt: Flüge, Hotels, Flug plus Hotel und Touren.
Weiter unten liefert die Seite Gründe für die Agentur: ihre Vorteile, wie man ein Ticket kauft, Bewertungen von Reisenden, ein Rückrufformular mit den Zeiten, zu denen geantwortet wird, und eine erste Einladung zum Reiseplaner: „Bau dein eigenes Abenteuer.“ Auf dem Smartphone stellen vier Stories im Vollbild den Travel Maker vor, einen Schritt pro Story.
Startseite
Story
11Konto
Der Checkout läuft in fünf Schritten, oben sichtbar: Ticket wählen, Passagiere eintragen, Angaben bestätigen, bezahlen und Ticket ausstellen. Gespeicherte Passagiere werden aus einer Liste gewählt, neue mit ihren Passdaten neben einer Flugübersicht hinzugefügt.
Nach dem Kauf hat das Konto acht Bereiche: Reisen, Passagiere, Wallet, Merkliste, Profil, Nachrichten, Support und Abmelden, die meisten mit ihren Dialogen und leeren Zuständen gezeichnet. Unter Reisen sieht man den Status jedes Tickets, öffnet das E-Ticket, verfolgt den Flug und startet eine Erstattung nach Strecke und Passagier. Die Wallet, Taha-Karte genannt, wird mit festen oder frei gewählten Beträgen aufgeladen und zahlt auf ein Bankkonto aus. Der Support arbeitet mit Tickets, jedes mit eigenem Antwortverlauf.
Die Anmeldung funktioniert mit Passwort oder mit einem Einmalcode, und ein Hilfebereich bündelt die Fragen, die Kaufanleitung und den Support.
12Nächster Schritt
Nachdem die Buchungsseite gezeichnet war, entwarf Sina ein Konzept, das Reisende auch zwischen zwei Reisen zurückholt. Der Travel Maker plant eine Reise in vier Schritten: den Plan selbst mit Route, Daten, Verkehrsmittel und Unterkunft; die Mitreisenden mit Namen und Telefonnummer; die Aktivitäten Tag für Tag; und wie die Reise veröffentlicht wird. Aktivitäten kommen nach Arten, etwa historische Orte, Essen, Einkaufen, Erholung oder lokale Veranstaltungen, jede mit einem Ort auf der Karte und Fotos oder Dokumenten, und es lassen sich neue Tage hinzufügen.
Die Social-Ebene lässt Reisende eine Tour mit Preis pro Person, Daten und Abflugort veröffentlichen, Erfahrungen teilen, bewertet nach Zufriedenheit, Preis-Leistung und ob sie den Ort empfehlen würden, und Reiseberichte schreiben, die auf eine Tour oder ein Hotel verlinken.
Mit dem Konzept kam ein Strategie-Board. Es setzt sieben Ziele, vom Umsatz und personalisierten Angeboten bis zu Kundentreue und Markenbekanntheit; acht Treiber, die Menschen zurückbringen würden, von Punkten und Abzeichen bis zu Empfehlungen an Freunde; und daneben die Risiken: wenig Beteiligung am Anfang, hohe Kosten und langsame Rendite, die Moderation von Inhalten, Datenschutz und negatives Feedback. Eine Systemkarte ordnet jedes Format (Blog, interaktive Karte, Beitrag, Reels und Reisebericht) dort ein, wo Reisende ihm begegnen: im Feed, unter Entdecken, auf der Startseite, in Kampagnen und in den Tourseiten.
Das Strategie-Board schreibt die Risiken neben die Ziele.
Der Plan: Route, Daten, Verkehrsmittel und Unterkunft
Mitreisende
Aktivitäten, Tag für Tag
Veröffentlichen
Eine Tour, vorgeschlagen in einem Beitrag
Eine bewertete Erfahrung
Ziele, Treiber und Risiken
Wo jedes Format den Reisenden begegnet
13Ergebnis
Das Redesign wurde gebaut und ist auf tahagasht.com live. Die Live-Seiten folgen den Karten. Die Flugergebnisse tragen das Charter- oder Linien-Label und Buttons für Vortag und Folgetag. Die Seite der Japan-Tour beginnt mit der Bilanz der Agentur, drei Jahrzehnten, 99 Prozent Zufriedenheit der Reisenden und mehr als 6500 Reisenden, und behält ihre Beratungsblöcke und die Reiter für Dokumente, Preise, die beste Reisezeit, Städte und Sehenswürdigkeiten.
Travel Maker und Social-Ebene sind nicht auf der Live-Seite. Sie bleiben ein gestalteter nächster Schritt.
14Entscheidungen
Die Boards und die Seiten machen diese Entscheidungen sichtbar.
Jede Buchungsseite kann nach Preis sortieren. Taha Gasht kann auch sagen, welchen Flug sie selbst wählen würde. Als Sortierreiter steht dieses Urteil dort, wo Reisende wählen, und weil jeder Reiter Preis und Zeit zeigt, ist die Abwägung klar.
Im Charter ist der Platz garantiert, deshalb empfiehlt ihn der Opportunity-Baum. Der Unterschied verändert, was Reisende kaufen, also steht er auf jeder Karte und in den Filtern.
Auf vollen Strecken sind Plätze schnell weg, und die Preise ändern sich. Wer die Passagierdaten speichert und die Wallet mit einem Puffer auflädt, bekommt den Flug gebucht, wenn sich der Preis bewegt, ohne die Seite im Auge zu behalten.
Eine Gruppenreise ist eine lange Entscheidung, mit Dokumenten und Visa. Die Tourseite beantwortet die üblichen Fragen, berechnet die Kosten für die ganze Gruppe und hält ein Rückrufformular und eine Telefonnummer nah, damit das Beratungsgespräch weiter vorn beginnt.
Der Wert eines Hotels hängt davon ab, wo es liegt. Ein gemeinsamer Satz Filter, dieselben Ergebnisse in beiden Ansichten und ein Hover, der sie verbindet, lassen Reisende die Ansicht wechseln, ohne den Faden zu verlieren.
15Meine Rolle
Sina arbeitete in Teilzeit als Produktdesigner und Stratege für Taha Gasht. Die Figma-Datei und die Boards sind Sinas Arbeit, bis auf das Vergleichsmaterial und einige Frames, die aus anderen Projekten eingefügt wurden.
Ausgelassen sind Aufnahmen aus dem Vergleich, App-Kits, Community-Vorlagen und ein gekauftes Icon-Set, ebenso Frames aus anderen Projekten und eine Customer-Journey-Map auf dem Opportunity-Board, die zu einem anderen Projekt gehört.
16Ergebnisse
Das Redesign ist live. Die Datei hält den Entwurf fest und enthält keine Zahlen zu Traffic oder Umsatz nach dem Start, deshalb gibt es hier keine Nutzungszahlen.
17Gelernt
Die Empfehlung von Taha Gasht ist die eigenständigste Idee in der Ergebnisliste, und die Datei sagt nirgends, wie ein Flug sie bekommt. Eine kurze Regel, mit dem Vertrieb abgestimmt, hätte den Reiter ehrlich gehalten und Reisenden einen Grund gegeben, ihm zu vertrauen.
Die Tourseite beantwortet die Fragen, die die Beratung hört, aber die Datei enthält keinen Test mit Reisenden. Ein paar Sitzungen mit Menschen, die eine Reise planen, hätten gezeigt, nach welchen Antworten sie zuerst suchen und für welche sie noch zum Telefon greifen.
Das Konzept umfasst Beiträge, Reels, Reiseberichte, eine Karte und einen Planer auf einmal. Mit einem Format zu beginnen, etwa Reiseberichten, die mit einer gebuchten Tour verlinkt sind, hätte gezeigt, ob Reisende überhaupt posten, bevor der Rest gebaut wird.