O projekcie

Ponownie mieliśmy przyjemność współpracować z zespołem Rainbow Tours nad rozbudową jednego z projektów IT touroperatora. Wspólnie przygotowaliśmy aplikację webową, która pozwala sprzedawcom oraz pracownikom infolinii na zaprezentowanie wybranych ofert w spersonalizowanej formie i wygenerowanie jej specjalnie dla klienta biura podróży.

Jakie cele chciało osiągnąć Rainbow

Rainbow postanowiło wyjść naprzeciw oczekiwaniom klientów biura podróży i dać im możliwość łatwego oraz przystępnego otrzymywania spersonalizowanych ofert wymarzonych podróży. Dzięki temu projektowi, klienci Rainbow otrzymują dostosowane do swoich wymagań i oczekiwań propozycje wycieczek, niezależnie od tego czy preferują bardziej tradycyjne ich formy (wydruk z pliku PDF) czy wolą nowocześniejsze podejście (wyświetlenie dedykowanej oferty w przeglądarce po kliknięciu w wygenerowany dla klienta specjalny adres URL).

Dodatkowo klienci posiadają stały dostęp do porównania ofert, które specjalnie dla nich wygenerował pracownik biura podróży czy call center. Klient ma wgląd do interesujących go informacji na temat oferty w każdym miejscu i czasie - wystarczy, że otworzy dedykowany adres url, który otrzymał od pracownika Rainbow. Dodatkowo oferty są przypisane do obsługującego danego klienta sprzedawcy, co umożliwia klientom bezpośredni kontakt ze swoim opiekunem i poczucie stałego zainteresowania oraz opieki.

“Porównywarka ofert” jest też świetnym narzędziem dla sieci sprzedaży Rainbow. Przygotowywanie ofert w postaci spersonalizowanych dokumentów i linków, pozwala agentom oraz pracownikom infolinii lepiej docierać z komunikatem sprzedażowym do klientów.

Jakie były założenia techniczne projektu

W ramach realizacji projektu zespoły projektowe Rainbow i eEngine współpracowały ściśle ze sobą. Drużyna klienta miała zadbać o dostarczenie danych potrzebnych do generowania ofert turystycznych przez API systemu Rainbow. My z kolei zajęliśmy się:

  • dostosowaniem projektu graficznego do identyfikacji wizualnej R.pl;
  • przygotowaniem warstwy frontowej aplikacji;
  • przygotowaniem konteneryzacji (wdrożenie Dockera);
  • wdrożeniem mechanizmu do generowania ofert wyświetlanych w przeglądarce internetowej oraz w formacie PDF.

Mechanizm generowania pobiera dane dotyczące ofert z API udostępnionego przez Rainbow. Następnie, zgodnie z wybranymi przez użytkownika ustawieniami, generuje za ich pomocą plik PDF z ofertą. Sprzedawca może go zapisać lub wysłać bezpośrednio klientowi dedykowany adres url do oferty za pomocą generowanego systemowo maila. To wszystko przełożyło się na pożądany efekt: wygenerowana w ten sposób oferta otrzymuje unikatowy link url, a dodatkowo istnieje możliwość spersonalizowania oferty pod konkretnego klienta biura podróży.

Jakie stały przed nami wyzwania

Najbardziej wymagającym elementem przy realizacji projektu było podzielenie struktury aplikacji na komponenty, których ostateczny wygląd był definiowany przez dane dostarczane z API Rainbow.

Natomiast najtrudniejszą częścią przy realizacji mechanizmu generowania PDF było dynamiczne generowanie dokumentów, zgodnie z wybranymi ustawieniami przez użytkownika. Każda zmiana ustawienia powodowała nowy podział sekcji na stronie i definiowała jego finalny wygląd dla klienta biura podróży. Mechanizm generowania plików PDF opierał się na danych wyświetlanych na froncie aplikacji, więc po przygotowaniu odpowiedniej logiki generowania plików PDF każda zmiana struktury danych musiała być także dostosowana w tej części aplikacji. Każda zgłaszana modyfikacja struktury najpierw była realizowana przez zespół Rainbow, który następnie dostarczał nam nową strukturę danych. Następnie analizowaliśmy je pod kątem wdrożenia na froncie aplikacji.

Przystępując do realizacji projektu chcieliśmy zamknąć rozbudowaną ilość danych , stojącą za założeniami aplikacji, w jak najbardziej przystępnej szacie graficznej, zgodnej z najnowszymi standardami projektowania serwisów internetowych.

Jak wyglądała współpraca

Cały projekt realizowaliśmy przy intensywnym i zaangażowanym udziale zespołu IT Rainbow. W praktyce przekładało się to na:

  • spotkania warsztatowe, na których wypracowaliśmy koncepcję działania aplikacji oraz projekt graficzny. Żeby projekt mógł iść we właściwym tempie do przodu i zostać zrealizowanym w zakładanych terminach - nieodzownym były regularne spotkania projektowe;
  • komunikację w ramach projektu utrzymywaliśmy cały czas na bieżąco, m.in. wykorzystując dedykowany kanał na Slacku. Za pomocą tego narzędzia zespół Rainbow miał stały kontakt z naszą drużyną i vice versa. Dzięki temu zarówno my, jak i klient, mogliśmy szybciej reagować na pytania, problemy i wyjaśniać sobie nawzajem najważniejsze kwestie.

Rytm życia projektu wyznaczały cotygodniowe sprinty. Wybraliśmy zwinną metodykę wytwarzania oprogramowania, ponieważ chcieliśmy dać Rainbow możliwie duży wpływ na to, jak będzie wyglądała “Porównywarka ofert” w jej finalnej wersji. W każdy poniedziałek zespół klienta otrzymywał od project managera dokument z aktualnym statusem prac. W statusie opisywaliśmy dokładnie jakie zadania zdołaliśmy zrealizować, a których nie zdążyliśmy w danym sprincie i dlaczego. Dzięki statusom i regularnemu raportowaniu przebiegu prac, klient na bieżąco był informowany o postępach i problemach. Ścisła współpraca z zespołem Rainbow pozwoliła nam bardzo szybko wypracować odpowiednią strukturę danych przesyłanych przez API, aby jak najszybciej osiągnąć oczekiwane efekty zarówno na froncie aplikacji, jak i w mechanizmie generowania ofert w postaci plików PDF.

Technologie, które nas napędzały w trakcie wdrożenia

Projekt graficzny został poprzedzony fazą prototypowania makiet funkcjonalnych. Finalnie projekt graficznych ze wszystkimi niezbędnymi elementami powstał przy użyciu Adobe Photoshop i Adobe Illustrator.

Do realizacji frontowej części aplikacji użyliśmy React.js, Sass i Dockera. React.js jest odpowiednią technologia do pracy z API dostarczającym dane do aplikacji, oraz pozwala budować bardzo szybkie aplikacje. Sass sprawia że wdrażanie projektu graficznego w aplikacji staje się łatwiejsze, a dzięki Dockerowi nie musieliśmy się martwić o kompatybilność aplikacji ze środowiskiem serwerowym klienta.

Do realizacji mechanizmu generowania PDF wykorzystaliśmy framework Ruby on Rails. Użycie Ruby on Rails pozwoliło nam na skorzystanie z odpowiednich gemów, dzięki którym mogliśmy generować pliki PDF bezpośrednio z danych pobieranych z backendu (API klienta), co pozwoliło na bardzo szybkie generowanie spersonalizowanych plików PDF.

Efekt końcowy

Z rozwiązania korzystają sprzedawcy biura podróży, podzieleni na sprzedawców stacjonarnych (pracujących w placówkach Rainbow) i agentów zdalnych (pracujących na infolinii). Każda z ofert posiada zapisane dane kontaktowe agenta, który ją wygenerował, dzięki czemu klienci mają ułatwiony kontakt z obsługującymi ich pracownikami Rainbow.

Agenci stacjonarni generują wybrane przez klienta oferty podróży, które następnie w przyjazny sposób prezentują klientom w procesie sprzedaży. Mając możliwość personalizacji plików PDF mogą również wydrukować klientom kluczowe informacje dotyczące wybranych ofert wraz z najważniejszymi informacjami o podróży.

Agenci zdalni generują porównania ofert, które następnie personalizują poprzez wprowadzenie danych klientów. Link do tak przygotowanego porównania pracownicy Rainbow wysyłają za pomocą wiadomości e-mail do kupujących wycieczkę, aby Ci mogli się zapoznać w wygodny sposób z propozycjami biura podróży w dowolnym czasie i miejscu.

Z programistycznego punktu widzenia - odpowiednio dobrane komponenty i dobrze przemyślana logika działania aplikacji, już na etapie realizacji projektu graficznego pozwoliła w krótkim czasie stworzyć funkcjonalny produkt. W przeciągu pięciu tygodni od oddania ukończonej wersji aplikacji “Porównywarka ofert”, Rainbow może pochwalić się ponad 20 000 wygenerowanych ofert.

Dziękujemy Rainbow, że mogliśmy kolejny raz wspólnie wybrać się w tę programistyczną podróż i osiągnąć razem założone cele.

Nad projektem pracowali

Bartek

Rafał

Arek

Szymon