Nowa strona i strategia komunikacji dla firmy z sektora usług automotive
Rodzaj projektu
Nowa strona internetowa
Branża
Motoryzacyjna
Technologie
Drupal
Tailwind CSS
Vue.jsZakres prac
Analiza przedwdrożeniowa, projektowanie graficzne, web development, support powdrożeniowy, strategia contentowa i copywriting
Najważniejsze elementy projektu
- Zmiana kierunku komunikacji i kluczowych przekazów marki Mooveno na stronie internetowej
- Architektura informacji wynikająca z nowej segmentacji oferty do 3 grup docelowych
- Nowoczesny layout wzbogacony o animacje
- Interaktywny cennik umożliwiający użytkownikom samodzielną kalkulację usług
- Technologia dobrana z myślą o skalowalności i wygodzie edycji treści
O kliencie
Mooveno to innowacyjna polska firma, która zmienia oblicze branży automotive. Obecnie łączy sześć obszarów związanych z codzienną obsługą pojazdów służbowych – od mycia i ładowania, przez parkowanie oraz tankowanie, aż po opłaty za autostrady i monitoring stanu technicznego aut. To podejście ogranicza formalności i wspiera firmy w zrównoważonym zarządzaniu flotą.
Tomasz Czerniejewski
Prezes Zarządu Mooveno Sp. z o.o.
Nasza współpraca przez cały okres projektu przebiegała wzorowo. Zespół był proaktywny, wychodził z inicjatywą proponowanych rozwiązań, szybko reagował na nasze potrzeby, a zadania były realizowane terminowo.
Naszą dotychczasową współpracę i efekt końcowy projektu oceniamy bardzo pozytywnie.
Problemy, z jakimi przyszła do nas firma
Mooveno zdecydowało się poszerzyć zakres działań, wychodząc naprzeciw potrzebom nowych segmentów rynku – już nie tylko dużych przedsiębiorstw, ale także małych i średnich firm. Dotychczasowy serwis był stworzony głównie z myślą o korporacjach. W rezultacie przestał odpowiadać na potrzeby nowych grup klientów.
Drugim ważnym problemem była komunikacja – zbyt skomplikowana zarówno w treści, jak i strukturze. Użytkownicy mieli trudność z szybkim rozpoznaniem, czym dokładnie zajmuje się Mooveno i jakie usługi oferuje.
To wszystko sprawiło, że strona zamiast wspierać rozwój firmy, stawała się największą barierą. Nowi odbiorcy nie rozumieli oferty, a obecnym brakowało jasnych informacji o korzyściach ze współpracy.
Cel projektu
Mooveno miało jasno sprecyzowane oczekiwania. Naszym celem było stworzenie strony, która będzie odpowiedzią na potrzeby każdego segmentu klientów. By to osiągnąć, musieliśmy zająć się trzema strategicznymi obszarami: komunikacją, projektowaniem graficznym i developmentem.
- Po pierwsze – uproszczenie języka, lepsze przedstawienie usług i jasna informacja, kto może skorzystać z oferty Mooveno.
- Po drugie – wygląd strony. Nowy serwis miał mieć jasną kolorystykę i sporą przestrzeń między elementami, dla zachowania lekkości i dobrej prezentacji oferty. Technologiczne akcenty miały natomiast podkreślić innowacyjność usług Mooveno, jako pierwszej firmy w Polsce, która oferuje kompleksowe usługi dla biznesów niezależnie od liczby aut.
- Po trzecie – technologia. Mooveno zależało na elastycznym i łatwym w edycji CMS-ie. Firma zakłada dalszy rozwój oferty, dlatego potrzebowała strony, którą może w przyszłości rozbudowywać już bez wsparcia developerów.
Rozwiązanie
Nowa strona Mooveno wymagała całościowego spojrzenia na markę: od komunikacji, przez UX, aż po rozwiązania technologiczne. Każdy etap naszej pracy dążył do stworzenia intuicyjnego serwisu, który wspiera sprzedaż.
Jak krok po kroku wyglądała realizacja?
- Rozpoczęliśmy od analizy przedwdrożeniowej – zidentyfikowaliśmy najważniejsze obszary do poprawy, poznaliśmy potrzeby klienta i ustaliliśmy oczekiwania. Na tej podstawie stworzyliśmy zakres działań.
- Od razu przystąpiliśmy do tworzenia strategii contentowej – przeanalizowaliśmy aktualny styl komunikacji marki, ścieżki użytkowników, główne segmenty oferty i podstrony usługowe. Na podstawie tych danych przygotowaliśmy konkretny plan komunikacji, uwzględniający zarówno cele biznesowe, jak i potrzeby poszczególnych grup odbiorców.
- Następnie zorganizowaliśmy warsztaty ze strategii komunikacji – zaproponowaliśmy kierunek narracji i kluczowe przekazy marki. Wspólnie z zespołem Mooveno wypracowaliśmy rozwiązania w tych obszarach. Podsumowaniem całego etapu komunikacji był dokument z najważniejszymi założeniami strategicznymi – punkt wyjścia do dalszych prac nad strukturą serwisu i treściami strony.
- Równolegle z copywritingiem projektowaliśmy podstrony – pracowaliśmy na podstawie wcześniej opracowanego planu treści oraz briefów, które klient wypełniał do wszystkich głównych podstron. Zespoły contentu i UX spotykały się regularnie, szukając najlepszego balansu między przekazem a wyglądem. Również developerzy, już na tym etapie, byli zaangażowani w proces – wspólnie konsultowaliśmy rozwiązania pod kątem wdrożenia. Efektem tych prac były gotowe makiety z osadzonymi treściami, które przekazywaliśmy klientowi do akceptacji. Dzięki temu znacząco usprawniliśmy komunikację, a cały proces był wolny od niepotrzebnych iteracji poprawek.
- Ostatnim krokiem było wdrożenie nowej strony – to zawsze najważniejszy punkt projektu. Po tygodniach intensywnych prac nowa strona ujrzała światło dzienne. :) Developerzy odwzorowali strukturę zgodnie z przygotowanymi makietami, uzupełnili ją treściami i zadbali o pełną funkcjonalność każdego elementu.
Zajrzyj niżej po więcej technicznych szczegółów.
Na jaki CMS postawiliśmy?
Liczne sekcje, rozbudowane treści, wiele wariantów podstron i dynamiczne elementy – strona Mooveno wymagała systemu, który sprosta takiej złożoności. Dlatego zdecydowaliśmy się na Drupala 11. Co ważne z perspektywy klienta, CMS pozwala samodzielnie zarządzać treściami: wybierać, wstawiać i przesuwać bloki, tworząc każdą podstroną z przygotowanych ,,klocków’’ według wizji edytora. Przy tym wszystkim Drupal ma ponadprzeciętną wydajność. Świetnie radzi sobie z rozbudowaną strukturą menu oraz wieloma poziomami nawigacji.
Szczegóły rozwiązania
Modularna budowa strony
Stronę Mooveno zaprojektowaliśmy na zasadzie paragrafów w Drupalu. Moduły można swobodnie konfigurować, przestawiać i łączyć w układy. Każdy z nich ostylowaliśmy i przetestowaliśmy tak, by działał poprawnie w różnych konfiguracjach. Dzięki temu redaktorzy mogą nie tylko dodawać kolejne bloki do już istniejących podstron, ale nawet samodzielnie tworzyć całe landing page’e. Wszystkie potrzebne elementy znajdą w bibliotece CMS-a, wraz z podglądem. Takie rozwiązanie znacznie skraca czas publikacji i ułatwia rozwój serwisu.
Z technicznego punktu widzenia warstwę wizualną oparliśmy o Tailwind CSS, który pozwolił zbudować spójny interfejs strony. Framework przyspieszył wdrożenie, bez przestojów nawet gdy klient zgłaszał nowe potrzeby lub modyfikacje.
Z kolei podejście Single Directory Components uporządkowało nam strukturę projektu. Każdy komponent (np. pojedynczy blok z grafiką i tekstem lub sekcja z formularzem) miał swój osobny katalog z kodem, stylem i testami. Dzięki temu zmiany w jednym nie wpływały na pozostałe.
Dynamiczny cennik oparty o Vue.js
W warstwie front-endowej wykorzystaliśmy Vue.js. Z jego pomocą wdrożyliśmy dynamiczne renderowanie modułu cennika – płynnie i bez przeładowań strony. Dzięki temu użytkownicy mogą na bieżąco przeliczyć koszty pakietów. Wystarczy, że wskażą liczbę pojazdów we flocie i wybiorą zakres usług. Administratorzy natomiast mają możliwość edycji, dodawania kolejnych usług oraz rabatów. To pozwala Mooveno na bieżąco zarządzać polityką cenową swojej firmy.
Segmentacja oferty
Stronę zaprojektowaliśmy zgodnie z podziałem na trzy grupy docelowe wskazane przez klienta:
- 1-5 aut (klienci indywidualni lub małe firmy),
- 6-50 aut (średniej wielkości firmy),
- 50+ aut (duże przedsiębiorstwa).
Takie podejście było kluczowe, ponieważ dostępność usług i poziomy rabatów różnią się w zależności od liczby aut. Dzięki podziałowi użytkownik od samego początku trafia na odpowiednią ścieżkę. Jedyne co musi zrobić, to wybrać jeden z trzech segmentów. Od tego momentu widzi tylko te usługi, które są dostępne dla jego przedziału flotowego.
Animacje i efekt stackowania
Wspólnie z klientem szukaliśmy najlepszego sposobu, żeby nadać nowej stronie nowoczesnego, technologicznego charakteru. W rezultacie postawiliśmy na animacje i mikrointerakcje. Stworzyliśmy m.in. efekty stackowania, czyli przesuwanie się bloków i nakładanie podczas scrollowania. Dodaliśmy też subtelne przejścia, delikatne przesunięcia i elementy pokazujące się w trakcie przewijania strony. Zależało nam nie tylko na wzmocnieniu warstwy wizualnej, ale też na tym, aby animacje wspierały zrozumienie oferty.
Pływająca stopka z CTA
Na stronie głównej dodaliśmy stopkę zachęcającą do wybrania segmentu. Gdy użytkownik przewija stronę i zbliża się do jej końca, pasek CTA dynamicznie się powiększa. Dzięki temu jeszcze bardziej kierujemy uwagę usera na kolejny krok, czyli określenie ścieżki dopasowanej do liczby firmowych aut.
Bezpieczne i powtarzalne wdrożenia
Zoptymalizowaliśmy całą architekturę projektu tak, by każdą zmianę można było wdrażać szybko i bez ryzyka błędów. W tym celu wykorzystaliśmy pipeline’y CI/CD i Dockera. To automatyczny proces aktualizacji, który po jednorazowej konfiguracji pozwala wdrażać kolejne zmiany dosłownie jednym kliknięciem (bez pomocy developerów).
Efekty pracy
Lekka, dynamiczna i pełna technologicznych akcentów – taka jest nowa strona Mooveno
Projekt Mooveno to przykład całościowej zmiany – nie tylko designu i UX/UI, ale też komunikacji. Praca nad tymi trzema obszarami zaowocowała serwisem, który trafia w potrzeby każdej wielkości firm, bez względu na to, czy dysponują jednym autem, czy całą flotą. Zobacz w skrócie efekty naszej pracy:
Uproszczona komunikacja na stronie internetowej. Użytkownik od razu po wejściu rozumie, czym zajmuje się Mooveno i wie, jakie korzyści może zyskać, wybierając usługi.
Stabilny CMS w najnowszej wersji: Drupal 11.
Segmentacja oferty na trzy grupy docelowe: firmy z 1-5 autami, 6-50 i 50+.
Interaktywny cennik, który pozwala natychmiastowo obliczyć koszt usług w zależności od liczby aut i wybranych opcji.
Wiele różnorodnych bloków treści z możliwością samodzielnego dodawania i budowania kolejnych podstron.
Mikroanimacje i pływające elementy wzbogacające user experience.
Automatyczne wdrożenia minimalizujące przestoje strony.
Statystyki realizacji
50
8
+ 60000
20
Potrzebujesz strony, która rośnie razem z firmą?