Wróć na stronę główną
BlogUser Experience

Case study - Novakid x Webflow

Skuteczna migracja na Webflow to za mało? Na dokładkę dodaliśmy pełną automatyzację multilanguage site!

Jak przeprowadzić migrację wielojęzycznej domeny na Webflow i nie zwariować? Jak całkowicie zautomatyzować proces wdrażania copy w rozbudowanym projekcie na kilkudziesięciu landing page’ach?

Jeśli, podobnie jak my kilka miesięcy temu, stoisz przed tym wyzwaniem, zajrzyj do tekstu poniżej. Co w nim znajdziesz?

  • Success story klienta, dla którego przeprowadziliśmy migrację domeny na Webflow,
  • Opis opracowanego przez nas procesu migracji i automatyzacji multilanguage site,
  • Instrukcję step-by-step, jak przejść przez proces samodzielnie.

Co skłoniło nas do podjęcia się migracji na system no-code?

Z klientem z branży edukacyjnej, dla którego przeprowadzaliśmy migrację, współpracujemy od kilku lat. Do tej pory nasza współpraca obejmowała projektowanie, wdrażanie i optymalizację landing page’y

Dotychczasowy system, na którym stawialiśmy i optymalizowaliśmy landingi, nie do końca spełniał nasze oczekiwania pod względem funkcjonalności i stawiał przed nami sporo ograniczeń. Byliśmy jednak pewni, że z naszych landing page’y jesteśmy w stanie „wycisnąć” zdecydowanie lepsze rezultaty. 

Z uwagi na złożoność projektu i wielojęzyczność domeny, musieliśmy jednak zaczekać na optymalny moment na wdrożenie tak poważnych zmian i racjonalnie zaplanować cały proces.

W listopadzie 2021 otrzymaliśmy od klienta informację o nadchodzącym rebrandingu marki, w tym strony internetowej i landingów. Był to idealny moment, aby przy okazji zmiany designu domeny przenieść ją na nowy, bardziej efektywny system.

Ograniczenia systemu przed migracją 

Słaby wskaźnik page speed

Przed migracją prędkość ładowania strony pozostawiała wiele do życzenia. Doskonale zdawaliśmy sobie sprawę z tego, że poprawa tego wskaźnika istotnie wpłynie na zwiększenie liczby konwersji na stronie.

Niska responsywność 

Problematyczne było także wprowadzanie zmian dla różnych rozdzielczości ekranów. Szczególnie kłopotliwe okazywały się wersje mobile, gdzie wdrażanie sporej ilości szczegółów było niezwykle pracochłonne. Dodatkowo borykaliśmy się z dużym prawdopodobieństwem wystąpienia błędów, przez konieczność ręcznego kopiowania tekstów w około dziesięciu językach i dostosowywania większości elementów.

Niedostateczna funkcjonalność

System mocno ograniczał również same projekty landingów. Nasz klient rozwija swoje usługi, korzystając z najnowocześniejszych rozwiązań w świecie edukacji, a my, bazując na starym systemie, nie byliśmy w stanie temu dorównać. Niemożliwe było, chociażby dodawanie animacji na stronie.

Żmudna praca z wieloma językami

W chwili migracji pracowaliśmy na landingach dla około 10 krajów. Ze względu na słabe przystosowanie systemu do naszych potrzeb, problematyczne było dostosowywanie stron do języków z tekstem wyrównywanym do prawej strony ekranu, jak choćby hebrajskiego czy arabskiego.

Uciążliwe było także dodawanie tłumaczeń dla poszczególnych wersji językowych. Z powodu konieczności dodawania innych tekstów w różnych rozdzielczościach, łatwo było o nich zapomnieć (na przykład o tym, że w wersji mobile jest inny tekst). Dlatego podczas kopiowania landingów, łatwo było o pomyłkę – przykładowo, francuska wersja językowa mogła znaleźć się na hiszpańskim landing page’u.  

Problem sprawiało nam również to, że copy na landingi było kopiowane ze “zbiorczego” Spreadsheeta, w którym wszystkie wersje językowe znajdowały się obok siebie. To potęgowało ryzyko niepoprawnego wprowadzenia tekstu (w złym języku lub miejscu).  

Dlaczego postawiliśmy na Webflow?

Przed ostateczną decyzją, na jaki system będziemy migrować domenę, przetestowaliśmy wiele rozwiązań, m.in. Unbounce, Landingi.com, czy GetResponse. 

Braliśmy pod uwagę także jedno z najbardziej oczywistych rozwiązań, czyli Wordpress, który naprawdę świetnie sprawdziłby się pod względem pracy z multilanguage sites. Mimo tej niewątpliwej zalety nadal nie był tym, czego potrzebowaliśmy. Zależało nam na znalezieniu rozwiązania możliwie najbardziej dopasowanego do designerów, a nie web developerów.

Ostatecznie zdecydowaliśmy się na Webflow, czyli narzędzie no-code do tworzenia stron internetowych. W naszej ocenie narzędzie zapewniało najszersze spektrum możliwości:

  • Praca no code – oznaczało to dla nas możliwość samodzielnej implementacji wszystkich zmian, bez konieczności angażowania zespołu developerów,
  • Wielość automatyzacji –  liczne integracje np. z Zapier, Make, etc.,
  • Możliwość ustawienia zróżnicowanych breakpointów, dzięki czemu mogliśmy stworzyć w pełni responsywną stronę na wszystkich urządzeniach,
  • Łatwość dodawania animacji — bardzo istotne w przypadku tego projektu,
  • Przystępność informacji o platformie — w formie bazy wiedzy na Webflow University i rozbudowanego forum.

Planowanie i przebieg migracji

Cały proces zaplanowaliśmy zgodnie z dobrymi praktykami CRO. Wprowadzanie zmian było przeprowadzane iteracyjnie: w pierwszej kolejności zaprojektowaliśmy i wdrożyliśmy warstwę graficzną współgrającą z nowym brandingiem, a dopiero w kolejnych krokach zajęliśmy się zmianą struktury i dalszą optymalizacją landingów. 

Skąd taka kolejność działań?

Dla naszego klienta najważniejsze jest utrzymanie odpowiedniego poziomu konwersji na landing page’ach. Jako że dotychczasowa struktura landing page’y przynosiła dobry poziom konwersji, zdecydowaliśmy się przy niej pozostać – migrując jedynie na nowy system i dostosowując ją do nowego brandingu. 

Krok 1. Przygotowanie projektów

Prace nad migracją zaczęliśmy od przygotowania projektów landing page’y. Czekało nas m.in. przygotowanie style guide’a dla szeregu breakpointów

Krok 2. Budowanie struktury landingów

Następnie, gdy projekty były już gotowe, rozpoczęliśmy budowanie struktury landingów bezpośrednio w Webflow. Etap ten był mocno rozbudowany czasowo, nie tylko ze względu na złożoność projektu (5 głównych landingów dla każdego z 10 języków oraz liczne landingi promocyjne), ale przede wszystkim na wyzwanie, przed którym stanęliśmy.

Wyzwanie: Webflow a multilanguage sites

Mimo wielu zalet i wartościowych funkcjonalności Webflow jeszcze nie wspiera działań na multilanguage sites. Zespół tworzący platformę ma w planach pochylenie się nad tym obszarem dopiero w drugiej połowie tego roku, a tak długi okres oczekiwania nie wchodził dla nas w grę. 

Opcje, które designerzy mają obecnie do wyboru są niezwykle ograniczone. Jeśli nie zdecydujemy się na zaprojektowanie własnego rozwiązania, pozostaje nam jedynie korzystanie z gotowej wtyczki Weglot. To automatyczny generator tłumaczeń z możliwością manualnego redagowania tłumaczonego tekstu. 

Dla nas jednak było to zbyt niedoskonałym rozwiązaniem – ręczne poprawianie tłumaczeń w Weglot byłoby niezwykle pracochłonne. Dodatkowo, kluczowe było dla nas uzyskanie możliwości zautomatyzowanego dodawania własnych tłumaczeń tekstów, pisanych przez native speakerów.

Inną opcją, którą rozważaliśmy, było wdrażanie poszczególnych landing page’y w folderach językowych, ale ostatecznie również nie wdrożyliśmy tej metody. Z uwagi na ogromną ilość danych, nie moglibyśmy zautomatyzować tego procesu, a treści i tak musiałyby być dodawane manualnie.

Brak gotowych rozwiązań? Stworzyliśmy więc własne!

Nie chcąc tracić czasu i mocy przerobowych na nieefektywne działania z gotowymi rozwiązaniami, zdecydowaliśmy się zaryzykować i stworzyć własny proces. Wykorzystaliśmy w tym celu CMS Collections, dostępne w bibliotece Webflow

CMS Collections w Webflow to dynamiczne repozytoria naszych treści, umożliwiające dostęp do wybranego typu contentu z dowolnego miejsca w projekcie. Sprawdzają się bardzo dobrze np. w formie wpisów blogowych – zaciągając automatycznie tekst na stworzony przez nas szablon.

 

Pierwszym etapem pracy na Webflow było przygotowanie podstrony draftowej Styleguide, która miała nam służyć jako punkt odniesienia i baza wymiarów fontów, grafik i kolorów zgodnych z nowym brandingiem, etc. dla poszczególnych breakpointów.

Gdy Styleguide był już gotowy, mogliśmy zająć się postawieniem pierwszej template pierwszego landing page. Po przygotowaniu template stworzyliśmy dedykowaną kolekcję CMS, która odpowiadała polom tekstowym zaprojektowanym w Figmie. Każde pole tekstowe miało swój odpowiednik w kolekcji.

Jako trzeci krok zaplanowaliśmy stworzenie osobnych Collections dla każdego z landing page’y. Jako że Webflow pozwala na dodanie jedynie 60 elementów w każdej z kolekcji, tutaj również zastosowaliśmy własne, customowe rozwiązanie. Ograniczenie systemu obeszliśmy stosując połączenie multireference, pozwalające na łączenie między poszczególnymi kolekcjami. 

Dlaczego takie rozwiązanie miało sens?

Z powodu powtarzalnych sekcji w poszczególnych landingach. Mogliśmy przygotować połączone kolekcje dla sekcji takich jak FAQ, stopka, cennik, czy testimoniale.

Czas na pełną automatyzację

Po przygotowaniu template landing page’y, a także Collections, przyszła pora na na zrealizowanie naszego głównego celu: wdrożenie pełnej automatyzacji przy pobieraniu i dodawaniu treści na landing pages. Zależało nam także na tym, aby tłumacze-native speakerzy mogli swobodnie dodawać treści do jednego, wspólnego spreadsheeta.

Przygotowanie spreadsheeta - bazy do automatyzacji

Przygotowaliśmy zatem spreadsheet, z którego copy byłoby następnie przydzielane do poszczególnych kolekcji w CMS Webflow. Na każde jedno pole tekstowe w landing page’u przypadało jedno pole w kolekcji. W naszej nomenklaturze „spreadsheetowej” pola tekstowe zostały nazwane elementami.

Każdemu z elementów nadaliśmy unikalną nazwę, np.hero_header lub cta_paragraph. Następnie, to samo nazewnictwo zastosowaliśmy we wszystkich Webflow Collections, dedykowanym poszczególnym landingom.

Automatyczne połączenie Spreadsheeta z Webflow

Do integracji obu elementów wykorzystaliśmy Make (dawniej Integromat), czyli platformę wspierającą tworzenie automatycznego workflow w projektach. Za pomocą Make połączyliśmy Spreadsheeta z Airtable i stworzyliśmy customowy, aktualizowany codziennie workflow.

Kolejnym etapem było zintegrowanie automatycznej aktualizacji treści w poszczególnych kolekcjach w Webflow za pomocą PowerImporter. Efektem integracji była całkowita automatyzacja dodawania i aktualizacji elementów copy w landingach oraz niemal całkowite  wyeliminowanie ryzyka wystąpienia błędów w tym procesie. Wszystkie teksty dodawane do Spreadsheeta są aktualizowane raz dziennie, a w razie potrzeby szybkich zmian, mamy również możliwość manualnych modyfikacji.

Wdrożenie tagów śledzących

Ostatnim elementem, o który zadbaliśmy podczas migracji było podłączenie analityki. Chcieliśmy w jednym projekcie zintegrować dane ze wszystkich krajów oraz kont Google Analytics, Google Tag Manager, Pixeli Facebooka i innych tagów.  Nasz klient opiera się na dwóch rozwiązaniach analitycznych – globalnym oraz dedykowanym konkretnym krajom. Dlatego dodanie kodów śledzących w głównych ustawieniach projektu nie wystarczało – musieliśmy zająć się również analityką danych z poszczególnych krajów.

W tym celu dodaliśmy w Webflow osobną kolekcję Analytics, w której przygotowaliśmy pola tekstowe dla wszystkich niezbędnych kodów np. Pole dedykowane GA. Następnie wdrożyliśmy je do ustawień każdego z template landing page, stosując również pola dynamiczne w taki sposób, aby były dostarczane jako zmienne z odpowiednich kolekcji.

Jeśli stoisz właśnie przed wyzwaniem automatyzacji w podobnie rozbudowanym projekcie, skorzystaj z naszej instrukcji, w której krok po kroku opisaliśmy:

  • jak połączyć Airtable ze Spreadsheet za pomocą Make,
  • jak użyć PowerImportera do połączenia Airtable z Webflow,
  • Jak od A do Z ustawić automatyczny workflow.

Written by
Text Link
No items found.