Fraikin – droga do zjednoczenia.

Unifikacja międzynarodowego serwisu internetowego

W tym case study dowiesz się z jakimi trudnościami spotykasz się, redefiniując i tworząc stronę internetową międzynarodowej organizacji. Jakie procesy zachodzą na każdym etapie współpracy, jakie czyhają zagrożenia i dlaczego ważna jest komunikacja oraz elastyczność. To opowieść pełna zwrotów akcji jak na iteracyjność przystało. Jeśli jesteś firmą z podobnym profilem lub zasięgiem, znajdziesz tu wiele cennych informacji i kierunków, jakimi możesz podążać wraz z agencją kreatywną odpowiedzialną za Twój serwis.

Zaczynamy!

Naszym Klientem była Firma Fraikin, zajmująca się dostarczaniem wielu rozwiązań transportowych przedsiębiorcom z różnych branż. Główną gałęzią w ofercie firmy jest krótko- i długoterminowy wynajem pojazdów. Nasz Klient ma stabilną pozycję na rynku europejskim i światowym, a jego oddziały znajdują się w 15 krajach.

Tym, czego brakowało Klientowi, była spójność komunikacji wizualnej i ofertowej w przestrzeni internetowej, brak jednej bazy danych i narzędzi pozwalających zarządzaniem wieloma stronami w jednym miejscu. Dodatkowo, Klientowi zależało na uporządkowaniu struktury oraz stworzeniu wzorców, odpowiadających poziomowi rozwoju danego oddziału. Każda z szesnastu jednostek (stan na 2018 rok) posiadała inną ofertę, dysponowała inną flotą pojazdów oraz innym zakresem obsługi serwisowej.

Na bazie rozmów, oczekiwań i planów skrystalizowały się następujące cele:

• Ustalenie celów biznesowych dla poszczególnych typów stron,
• Pozyskiwanie lead’ów,
• Automatyzacja,
• Integracja systemów,
• Standaryzacja.

Dla nas jako agencji, głównym celem była kompleksowa obsługa międzynarodowego projektu, a co za tym idzie, stworzenie standardów i procedur zarówno wewnątrz naszej organizacji, jak i w kontaktach z Klientem. Powstał dedykowany zespół zajmujący się koordynacją zadań, projektowaniem i wdrażaniem.

W pierwszej kolejności dział marketingu naszego Klienta, postanowił scalić ideę celów biznesowych ze standaryzacją serwisu. Polegało to na przeanalizowaniu obecnych usług w każdym z oddziałów, scharakteryzowaniu ich i pogrupowaniu według podobieństwa cech charakterystycznych. To o czym wiedzieliśmy już na starcie, to fakt, że nie da się przygotować jednej strony dla całej organizacji. Na bazie przemyśleń, a zarazem przy pomocy wyżej opisanej klasyfikacji, powstał pomysł stworzenia trzech wersji serwisu: BASIC, STANDARD i ADVANCED odpowiadających różnym poziomom rozwoju marki w danym kraju.

Każdy z podtypów miał za zadanie osiągać nieco inne cele. Np. Basic to strona typowo informacyjna, a głównym leadem miał stać się formularz kontaktowy, gdyż obsługa Klienta nadal pozostawała w rękach pracowników oddziałów. Z kolei Advanced oparty został o jak największą automatyzację – szczegółowa personalizacja wyszukiwarki pojazdów, połączona z procesem rezerwacji online. Podstawową różnicą był zakres menu głównego oraz funkcjonalności obejmujące dedykowaną stronę. Udało nam się ustandaryzować projekt (tylko trzy typy stron zamiast piętnastu), jak i zachować zakres indywidualnych cech (mniejsze lub obszerniejsze menu).

„Design is not just what it looks and feels like.
Design is how it works.”

-Steve Jobs

W myśl powyższej maksymy, tym co jest najważniejsze dla projektu jest jego funkcjonalność. Aby powstał kompleksowy i łatwy w obsłudze produkt (w tym przypadku serwis internetowy), należy przejść pełen proces projektowy, nie wybierając drogi na skróty. Wymaga to zaangażowania po stronie Klienta jak i agencji. My połączyliśmy zlecony audyt SEO[1], wiedzę z działu marketingu naszego Klienta z naszym doświadczeniem w budowaniu stron internetowych i na tej podstawie stworzyliśmy makiety (wireframes) serwisu. Ten etap prac pozwala wychwycić błędy już na prototypach, co wpływa na redukcję kosztów (błędy na późniejszym etapie wdrożenia są po prostu droższe, czasem wymagają rozpoczynania jakiegoś procesu od początku). Dodatkowo wireframes’y pokazują w jaki sposób będzie działał serwis, jaką przyjmie strukturę treści i gdzie będą znajdowały się poszczególne elementy. To etap na sprawdzenie, czy nasze założenia są właściwe, które segmenty można poprawić, a jakie należy usunąć bądź dodać.

[1] SEO – (ang. search engine optimization; zwana także pozycjonowaniem) procesy zmierzające do osiągnięcia przez dany serwis internetowy jak najwyższej pozycji w wynikach organicznych wyszukiwarek internetowych dla wybranych słów i fraz kluczowych. (Źródło: https://pl.wikipedia.org/wiki/Optymalizacja_dla_wyszukiwarek_internetowych)

„Dobry design to cichy ambasador Twojej marki”

Paul Rand

Po etapie prototypowania przyszedł czas na projekt graficzny. Tu jednak skupiliśmy się na ewolucji a nie rewolucji – wzorem graficznym dla wszystkich typów serwisów była strona polskiego oddziału Fraikin – należało dostosować nowe układy do istniejącej już stylistyki. Mogłoby się wydawać, że takie działanie jest prostsze dla grafika, jednak już na wstępie nakłada dużo ograniczeń. Musieliśmy zapoznać się z gridem stosowanym do tej pory i na nim opierać nowe założenia. Powstało 28 ekranów dla wersji Basic, 29 dla wersji Standard oraz 33 ekrany dla wersji Advanced. Wprowadziliśmy kolejny etap standaryzacji polegający na unifikacji – ujednoliceniu cech konstrukcyjnych (wspólny layout wszystkich typów stron, ten sam grid i kolorystyka, rodzaj i sposób umieszczania zdjęć itp.).

Należy w tym miejscu nadmienić, że proces akceptacji projektu przechodził wieloetapowo, począwszy od oceny głównego ośrodka we Francji, poprzez poszczególne kraje. Z tego powodu wyniknęły ciekawe rozwiązania, które początkowo mogły zostać uznane za problemy. O ile bowiem główny oddział firmy zgadzał się z przedstawionym modelem (trójpodział serwisu), o tyle niektóre kraje wyraziły swoje obawy w związku z tak dalece idącą unifikacją. Pochyliliśmy się nad ich uwagami, a wynikiem tych działań było stworzenie dodatkowych podstron dla poszczególnych krajów. W efekcie powstało dodatkowo: 9 ekranów dla Niemiec, 7 dla Hiszpanii, 3 dla Wielkiej Brytanii a ponadto strona francuska stała się pewną hybrydą wersji Basic i Standard.

Aby pozostawić Klientowi jakiś zakres dowolnej edycji podstron, od strony panelu administracyjnego zaprojektowaliśmy rozwiązania modułowe, tak by podstrony były budowane sekcja po sekcji a nie jako pojedynczy layout całej podstrony. Niestety takie podejście wymaga samodyscypliny po stronie Klienta i pilnowania standaryzacji przez pracowników. Na czym polega to zagrożenie? Gdy projekt zawiera np. sześć sekcji na podstronie, a poszczególne kraje zaczną wyrzucać ze wzorca te moduły i pozostawią na przykład tylko dwie sekcje (z początku i końca strony), w efekcie mogą one źle się prezentować.

Zawsze staramy się uczulić naszych Klientów, że duży serwis internetowy jest porównywalny z żywym organizmem. Oddając większe spektrum edycji w ręce Klienta, nie jesteśmy w stanie przewidzieć wszystkich jego ruchów i wynikających z tych zachowań błędów. Dlatego dobrym a zarazem bezpiecznym rozwiązaniem jest powierzenie obsługi serwisu działom IT lub agencji, która dalszą obsługę ma również w ofercie.

Wracając do naszej opowieści, tuż po tym jak uporaliśmy się z poprzednimi wyzwaniami, nadeszła kolejna niespodzianka w postaci rebrandingu marki! Nucąc „always look on the bright side of life” zabraliśmy się za przeprojektowanie skórki i ponowne kodowanie części podstron. Te odgórne zmiany przyczyniły się do wydłużenia czasu realizacji projektu, gdyż wiązały się z nowym nakładem pracy, zmianą grafik w zgodzie z nowym CI (Corporate identity) oraz zmianami po stronie kodowania.

Ponieważ projekt dotyczył wielu krajów, oczywiście wdrażanie odbywało się według ustalonego wcześniej harmonogramu i kamieni milowych. Po pierwszych publikacjach mogliśmy rozpocząć testowanie i audyty. Pojawiły się pierwsze problemy: szybkość strony głównej miała wysoki wskaźnik na urządzeniach mobilnych (84/100), ale na desktopie już nie (45/100). Pojawił się problem z obrazami i pamięcią podręczną.

Rozwiązania jakie m.in. zastosowaliśmy:

• Kompresja obrazów,
• Włączenia cachowania w przeglądarce,
• Minifikowanie javascripts,
• Łączenie ikon w CSS.

Jednak najważniejszym aspektem wdrożenia było stworzenie wspólnego środowiska dla wszystkich krajów. Pomógł nam w tym WordPress Multisite – system, w którym możliwe jest zarządzanie wieloma witrynami, korzystając z jednego panelu administracyjnego.  Do tej pory każdy oddział miał osobny serwer, bazę danych i postawiony był na różnych systemach – zależnie od danego kraju. Decydując się na umieszczenie serwisu w jednym systemie, nasz Klient niezależnie od lokalizacji mógł korzystać z tych samych szablonów, wtyczek a wreszcie bazy danych. Dodatkowo możliwości Multisite pozwalały na umieszczanie treści dostosowanych do danego kraju przy pomocy jednego panelu. Zmiany te nie wpływały na inne lokalizacje. Dzięki integracji systemów w jedno narzędzie, spełniliśmy założony na początku cel. Ponieważ serwis stał się nowym, nieznanym środowiskiem dla pracowników odpowiedzialnych za witryny po stronie Klienta, dla każdego z krajów przygotowaliśmy instrukcje wideo do poruszania się po panelu administracyjnym.

Ostatnim wyzwaniem była dla nas kwestia bezpieczeństwa. Już po stracie strony audyt wskazał na prawie 300 ataków dziennie. Przeprowadziliśmy aktualizacje wszystkich systemów oraz upgrade security. Uczuliliśmy naszego Klienta na to, że obszar zabezpieczeń powinien być nadzorowany systematycznie, powinien reagować na aktualizacje systemu i wszelkie niepożądane działania. Takim obszarem zadań najczęściej zajmuje się dział IT w danej organizacji lub zleca się te prace firmie zewnętrznej.

Finałem tej podróży stał się sprawnie działający system, odpowiadający na potrzeby naszego Klienta. My natomiast z tej współpracy wynieśliśmy sporo doświadczenia w postaci wiedzy, kontaktów interpersonalnych, sposobów zarządzania czy tzw. „gaszenia pożarów” 😉 Pomimo ogromu pracy i energii włożonej w ten ponad roczny projekt, czerpiemy moc satysfakcji ze zrealizowanego celu.

Do zobaczenia przy kolejnych projektach!