Nowy serwis korporacyjny dla firmy energetycznej
Rodzaj projektu
Nowy serwis korporacyjny
Branża
Energetyka
Technologie
Drupal
Tailwind CSS
ViteZakres prac
UX/UI, web development, support powdrożeniowy
Najważniejsze elementy projektu
- Migracja treści z Drupala 7 do 11 z uwzględnieniem rebrandingu marki z EWE na Elenger
- Przeniesienie logiki strony i kluczowych funkcji, w tym kalkulatora zużycia gazu
- Wdrożenie nowej szaty graficznej
- Interaktywna mapa prezentująca szczegółowe dane o sieci dystrybucyjnej w danym województwie
- Architektura informacji podzielona na 3 główne sekcje: Dla firmy, Dla domu, O Elenger
O kliencie
Elenger to największa prywatna firma energetyczna w regionie bałtycko-fińskim, działająca nieprzerwanie od 1864 roku. Oferuje kompleksowe rozwiązania z zakresu gazu ziemnego, LNG, biometanu oraz energii elektrycznej – w tym odnawialnej. Firma działa na sześciu rynkach europejskich. Jej misją jest dostarczanie efektywnych i przyjaznych dla klimatu źródeł energii, wspierających zrównoważony rozwój regionu.
Wyzwanie
Klientowi zależało na aktualizacji serwisu z niewspieranego już Drupala 7 na najnowszego – 11. Ze względu na ogromne różnice technologiczne między wersjami systemu, nie mogliśmy po prostu skopiować funkcji. Każdą z nich, np. kalkulator zużycia medium czy interaktywną mapę, musieliśmy napisać od zera.
Równie istotny był renaming marki z EWE na Elenger, a wraz z nim – potrzeba wdrożenia całkowicie nowego wyglądu serwisu. Całość prac mieliśmy zamknąć w 4 miesiące.
Cel projektu
Naszym głównym celem było stworzenie nowej, spójnej z nowym brandingiem strony firmowej Elenger. Chcieliśmy wyeliminować problemy z niespójnością treści i funkcji, które wynikały z utrzymywania dwóch osobnych wersji serwisu – jednej desktop, a drugiej mobile.
Oprócz tego, skupiliśmy się na administratorach serwisu. Zależało nam na poprawie komfortu zarządzania stroną, aby codzienne zadania, jak dodawanie nowych artykułów czy zmiany w treściach, stały się dla nich znacznie szybsze i prostsze.
Rozwiązanie
Zgodnie z założeniami projektu, wdrożenie oparliśmy na technologii, którą klient zna i ceni – Drupalu. Sięgnęliśmy po najnowszą na moment wdrożenia wersję 11, która gwarantuje stałe aktualizacje bezpieczeństwa i pełne wsparcie społeczności.
Ze względu na duże różnice technologiczne między Drupalem 7 a 11, konieczne było stworzenie niektórych rozwiązań od podstaw. Zamiast próbować adaptować przestarzały kod, napisaliśmy kluczowe funkcje na nowo, zgodnie z możliwościami nowej architektury i dbałością o obecne standardy.
Warstwę wizualną wdrożyliśmy w oparciu o dwa narzędzia – bibliotekę Tailwind i moduł Vite. Tailwind pozwala opisywać wygląd każdego elementu, np. przycisku, bezpośrednio w jego kodzie. Dlatego zamiast tworzyć strukturę w jednym pliku, a wygląd w drugim, mogliśmy robić wszystko w jednym miejscu, optymalizując czas i upraszczając strukturę kodu. Z kolei dzięki Vite wszystkie zmiany, które wprowadzaliśmy, od razu widzieliśmy w przeglądarce (bez odświeżania strony). Oba narzędzia znacząco przyspieszyły naszą pracę i zagwarantowały zmieszczenie się w napiętym harmonogramie.
Szczegóły rozwiązania
Od brandingu grupy do własnego stylu
Projekt strony zbiegł się w czasie z przejęciem marki EWE przez międzynarodową grupę Elenger, obecną w sześciu krajach europejskich. Wraz ze zmianą właściciela polska marka przyjęła identyfikację wizualną Elenger – kolory, typografię i ogólne zasady graficzne obowiązujące na wszystkich rynkach.
Znając te ramy, zaprojektowaliśmy nowy layout, który nawiązywał do estońskiej wersji strony, ale zdecydowanie ją rozszerzał. Zaproponowaliśmy własne rozwiązania modułowe, odważniejsze wykorzystanie charakterystycznego koralowego koloru oraz nowe podejście do wykorzystania key visual Elenger. Efektem jest strona, która mieści się w ramach identyfikacji wizualnej grupy, a jednocześnie oferuje znacznie więcej niż jej bazowa wersja.
Inteligentna migracja i automatyczny rebranding
Ręczne wprowadzanie zmian na wielu podstronach groziło pomyłkami i opóźnieniem projektu. Dlatego zastosowaliśmy zaawansowane skrypty, które automatycznie wykrywały w treściach frazy związane ze starą marką (EWE) i zamieniały je na nową (Elenger).
Mechanizm ten jednocześnie wyłapywał linki prowadzące do starej domeny i aktualizował je do nowej struktury. Dzięki temu zapobiegliśmy powstawaniu tzw. martwych odnośników i zachowaliśmy spójność SEO serwisu.
Architektura B2B-first
Strona elenger.pl domyślnie otwiera się na wersji dla firm – to świadoma decyzja wynikająca z charakteru marki i jej celów biznesowych. Głównym zadaniem strony jest generowanie leadów B2B, od małych przedsiębiorstw po duże zakłady produkcyjne. Architekturę nawigacji i hierarchię treści zaprojektowaliśmy tak, żeby odzwierciedlać ten priorytet od pierwszego kontaktu użytkownika ze stroną.
Mapa obszarów działalności Elengera
Zrezygnowaliśmy ze statycznych grafik na rzecz w pełni dynamicznego rozwiązania. Naszym celem było nie tylko dostosowanie mapy do identyfikacji wizualnej klienta, ale również odciążenie Biura Obsługi Klienta z pytań o to, czy dany rejon znajduje się w obszarze dostaw. Teraz wystarczy najechać na wybrany obszar na mapie, aby to sprawdzić.
Precyzyjny kalkulator zużycia gazu
Przenieśliśmy i unowocześniliśmy logikę kalkulatorów energetycznych, które pozwalają na dwukierunkową konwersję jednostek (z m³ na kWh i odwrotnie). Zadbaliśmy również o możliwość samodzielnej edycji współczynnika konwersji (ciepła spalania).
Po wdrożeniu tego rozwiązania użytkownik nie otrzymuje jedynie uśrednionego szacunku, ale może precyzyjnie wyliczyć wartość energii, podstawiając parametry rzeczywiste, zgodne np. z otrzymaną fakturą. Całość działa w czasie rzeczywistym, bez konieczności przeładowywania strony.
Krokowy formularz obsługowy
Zaprojektowaliśmy krokowy formularz obsługowy oparty na zasadzie progresywnego ujawniania treści. Użytkownik najpierw określa kim jest – klientem indywidualnym czy firmą – następnie czy jest już klientem Elenger, a dopiero potem wybiera temat zgłoszenia. Na każdym etapie widzi wyłącznie pola istotne dla jego konkretnej sytuacji.
Celem było odciążenie infolinii przez skierowanie użytkowników do właściwych ścieżek samoobsługi. Zamiast jednego ogólnego formularza kontaktowego, każdy typ zgłoszenia prowadzi do odpowiedniego zestawu pól i informacji.
Efekty pracy
Nowy serwis to: spójny wizerunek marki, technologiczne bezpieczeństwo i komfort pracy redaktorów
W zaledwie 4 miesiące stworzyliśmy serwis klasy enterprise, gotowy na lata rozwoju. Udowodniliśmy, że nawet przy napiętym harmonogramie nie trzeba iść na kompromisy w kwestii jakości kodu i designu. Co konkretnie udało nam się osiągnąć?
Wyeliminowaliśmy dług technologiczny dzięki przejściu z niewspieranej wersji Drupala 7 na 11.
Zastąpiliśmy dwie osobne wersje strony (mobile i desktop) jednym, w pełni responsywnym ekosystemem.
Umożliwiliśmy zespołowi marketingu samodzielne zarządzanie strukturą menu, formularzami i treściami bez konieczności angażowania programistów.
Zwiększyliśmy samodzielność klientów, którzy dzięki interaktywnym narzędziom mogą bez pomocy konsultanta sprawdzić zasięg usług i oszacować koszty.
Utrzymaliśmy widoczność w Google mimo zmiany nazwy i domeny.
Statystyki realizacji
12
10
4
+ 600
Planujesz migrację serwisu do najnowszej wersji Drupala?