Start › Realizacje › Silnik rezerwacyjny lotów
Silnik rezerwacyjny lotów · Strony i aplikacje · Projektowanie UX/UI
Siedem kroków od wyszukania lotu do płatności - zaprojektowane tak, by pasażer nie miał wątpliwości.
Redesign silnika rezerwacyjnego polskiej linii lotniczej: od wyszukiwania, przez wybór taryfy, mapę miejsc i płatność, aż po ekran potwierdzenia rezerwacji.
Silnik rezerwacyjny (IBE, internet booking engine) to serce sprzedaży linii lotniczej. Tu pasażer wybiera lot, taryfę, miejsce i usługi dodatkowe, a na końcu płaci. Przez 2,5 roku Wojtek, product designer współpracujący z 302 Studio, projektował tę ścieżkę jako część trwającego redesignu: w dwutygodniowych sprintach, razem z product ownerem, projektantami i developerami.
2,5 roku
pracy przy produkcie
7
kroków ścieżki rezerwacji
5
taryf w jednej hierarchii
1
wspólny system komponentów
Wyzwanie
Gęsty lejek, w którym wszystko wyglądało tak samo
Lata drobnych zmian sprawiły, że siedmiokrokowy lejek rezerwacji stał się gęsty i niespójny. Taryfy, zasady bagażowe i warunki zmiany biletu miały na każdym ekranie tę samą wagę wizualną. Pasażer nie wiedział, co jest rekomendowane, a co opcjonalne. Wątpliwości pojawiały się w najgorszym momencie: tuż przed konwersją, przy wyborze taryfy i miejsca.
Rozwiązanie
Jeden język wizualny na całej ścieżce
Wspólny system komponentów uporządkował całą ścieżkę: stały pasek postępu i podsumowanie ceny, karty taryf z ustaloną hierarchią (cena, bagaż, miejsce, zwrot), mapa miejsc z czytelnym kodowaniem kolorów oraz ekran płatności z widocznymi elementami budującymi zaufanie. Reguły biznesowe znalazły się w komponentach, dzięki czemu każdy krok pozostawał spójny wraz z rozwojem produktu.
Proces
Najpierw branża, potem piksele
Praca zaczęła się od wejścia w kontekst trwającego redesignu: istniejących plików Figmy, wcześniejszych decyzji projektowych i reguł biznesowych. Sporo czasu poszło na zrozumienie, dlaczego silnik wygląda tak, a nie inaczej.
Branża lotnicza okazała się osobną dyscypliną. Rodziny taryf, limity bagażu, warunki zmiany biletu, programy milowe i teksty prawne musiały być poprawne w najmniejszym detalu. Razem z product ownerem powstała mapa tego, które informacje są obowiązkowe, które opcjonalne i w których miejscach pasażer najczęściej się waha.
Dalsza praca szła w dwutygodniowych sprintach: w każdym cyklu jeden fragment lejka (wyniki wyszukiwania, karty taryf, mapa miejsc, usługi dodatkowe, płatność) przechodził review z product ownerem i pozostałymi projektantami, zanim trafił do developerów.
Ponieważ wiele reguł powtarzało się między krokami, projekt mocno oparł się na bibliotece komponentów: zmiana w karcie taryfy czy oznaczeniu statusu propagowała się od razu wszędzie. Bliska współpraca z developerami pozwalała wychwycić przypadki brzegowe, na przykład w stanie dostępności albo rozbiciu ceny, zanim trafiły do produkcji.
Wybór taryfy
Cena, bagaż, miejsce, zwrot - w tej kolejności
Etap wyboru taryfy skupiał najwięcej wątpliwości. Pasażer musiał porównać Economy Saver, Standard, Semi Flex, Flex i Business, a każda taryfa miała własne zasady bagażowe, wyboru miejsc i zwrotów. Sporo do przeanalizowania w kilka sekund.
Każda karta taryfy dostała ten sam rytm: najpierw cena, potem bagaż, wybór miejsca oraz warunki zmiany i zwrotu, zawsze w tej samej kolejności, z etykietą „Rekomendowane” przy taryfie wybieranej najczęściej. Identyczne kolumny sprawiają, że wyróżniają się tylko różnice między taryfami, więc wybór staje się łatwiejszy, a nie głośniejszy.
Mapa miejsc
Mapa miejsc, która nie pozwala się pomylić
Mapa miejsc musiała pokazywać jednocześnie wiele informacji: typy miejsc, ceny, dostępność, zasady dla rzędów awaryjnych oraz dwóch pasażerów na dwóch lotach, bez zmieniania się w łamigłówkę.
Legenda oparta na kolorach od razu oddziela miejsca standardowe, preferowane i te z dodatkową przestrzenią na nogi. Miejsca niedostępne są wyraźnie wyłączone, a bieżąca suma trzyma cenę w ryzach przy każdej zmianie wyboru. Wybór miejsca w rzędzie awaryjnym uruchamia krótki popup z regułami uprawnień, co ograniczyło liczbę błędnych wyborów, które wcześniej się prześlizgiwały.
Efekty
Co się zmieniło
- Jaśniejsza hierarchia taryf skróciła czas wahania przy wyborze.
- Popup przy rzędach awaryjnych ograniczył liczbę niedozwolonych wyborów miejsc.
- Wspólny system komponentów przyspieszył wdrażanie kolejnych funkcji.
- Gęste dane lotnicze pozostały czytelne na każdym etapie lejka.
Zakres
- UX design
- UI design
- Prototypowanie
- Styleguide
- Ścieżka rezerwacji
- Mapa miejsc
- UX płatności
- Zbieranie insightów
- Faza discovery
Rola w projekcie
- Wdrożenie się w trwający redesign: pliki, decyzje, reguły biznesowe
- Nauka branży lotniczej: taryfy, bagaż, programy milowe, wymogi prawne
- Projektowanie i iterowanie kroków 7-etapowego lejka
- Budowa i utrzymanie wspólnych komponentów
- Współpraca z product ownerem: informacje obowiązkowe vs opcjonalne
- Współpraca z dwoma projektantami, wzajemne review co sprint
- Stały kontakt z developerami, przypadki brzegowe
- Ekrany z dużą ilością danych: tabele taryf, mapy miejsc, podsumowania
Projekt
- Wojtek, product designer
- Rola: Product Designer
- Zaangażowanie: 2,5 roku
- Rynek: Polska
- Branża: lotnictwo
- Narzędzia: Figma, Miro, Notion
Kto projektował
Wojtek, product designer
Wojtek jest product designerem współpracującym z 302 Studio. Przy silniku rezerwacyjnym pracował przez 2,5 roku jako część zespołu produktowego linii lotniczej: od fazy discovery i zbierania insightów, przez projektowanie siedmiu kroków ścieżki rezerwacji, po styleguide i bibliotekę komponentów, z której korzystali developerzy.
Specjalizuje się w produktach z dużą ilością danych: tabelach taryf, mapach miejsc, podsumowaniach i ścieżkach zakupowych, w których każdy szczegół musi być poprawny. Pracuje w Figmie, Miro i Notion. W 302 Studio odpowiada za projekty UX/UI stron i aplikacji.
Rozmowa
Masz produkt z gęstymi danymi i długą ścieżką zakupu?
Porządkujemy takie ścieżki: od audytu UX, przez prototypy, po system komponentów gotowy do wdrożenia.
0 zł
wycena i pierwsza rozmowa
1 dzień
zwykle tyle czekasz na odpowiedź
410+
zrealizowanych projektów
4
obszary pod jednym dachem
Porozmawiajmy konkretnie!
↗︎
