Truck Care
Redesign strony internetowej po rebrandingu marki
Truck Care to marka oferująca wynajem pojazdów użytkowych oraz rozwiązania dla firm zarządzających flotą. Projekt powstał po zmianie identyfikacji z DBK Rental na Truck Care i obejmował przygotowanie nowej warstwy graficznej serwisu truckcare.pl w wersji desktopowej oraz mobilnej.
Moim zadaniem było zaprojektowanie spójnego interfejsu zgodnego z brand bookiem EFL / Truck Care oraz przygotowanie widoków, które można było wdrożyć jako elastyczny szablon WordPress.
01
Kontekst i wyzwanie projektowe
Projekt łączył zmianę identyfikacji marki, uporządkowanie rozbudowanej struktury treści i przygotowanie serwisu do wdrożenia w WordPressie.
Kontekst
Prace były częścią zmiany identyfikacji z DBK Rental na Truck Care. Nowy serwis miał wykorzystać dotychczasowe treści, ale pokazać je w odświeżonym układzie, spójnym z marką Truck Care i ekosystemem EFL.
Ważnym założeniem było zachowanie kolorystyki EFL, fontu Geomanist, zasad brand booka oraz komunikacji dopasowanej do odbiorców B2B.
Struktura strony musiała być przygotowana tak, aby po wdrożeniu klient mógł rozwijać serwis, dodawać kolejne sekcje i wykorzystywać je w różnych miejscach bez utraty spójności.
Wyzwanie projektowe
Największym wyzwaniem było stworzenie serwisu, który jednocześnie:
- wzmacniał nowy wizerunek marki po rebrandingu,
- porządkował dużą liczbę treści i podstron,
- zachowywał spójność z identyfikacją EFL / Truck Care,
- działał dobrze na desktopie i urządzeniach mobilnych,
- był przygotowany pod elastyczny szablon WordPress.
Nie była to tylko zmiana wyglądu. Trzeba było zaprojektować powtarzalny system sekcji, nawigację, układy podstron i elementy wspólne w sposób, który sprawdzi się w realnym środowisku CMS.
02
Założenia projektowe
Projekt musiał uwzględniać wymagania marki, strukturę istniejących treści oraz sposób późniejszego wdrożenia w WordPressie.
01 Treści i struktura
Dotychczasowe materiały miały zostać zachowane, ale ich układ mógł zostać uporządkowany i dopasowany do nowej wersji serwisu.
02 Identyfikacja marki
Warstwa wizualna musiała korzystać z kolorystyki EFL, fontu Geomanist, zasad brand booka oraz stylistyki spójnej z ekosystemem EFL i Carefleet.
03 Nawigacja
Serwis wymagał headera z górnym paskiem, sticky menu, CTA, numerem infolinii oraz dwupoziomową strukturą menu.
04 Szablony podstron
Kluczowe widoki miały opierać się na wspólnym schemacie: sekcji otwierającej, breadcrumbs, treści głównej oraz stopce z danymi firmy i linkami.
05 Wdrożenie
Projekt miał być przygotowany w wersji desktopowej i mobilnej oraz oparty na modułowych sekcjach możliwych do wdrożenia w WordPressie.
03
Zakres projektu
Zakres prac obejmował stronę główną, wybrane podstrony, elementy wspólne serwisu, materiały UI oraz przygotowanie widoków pod wdrożenie.
Elementy wspólne
- Header
- Sticky menu
- Stopka
- Breadcrumbs
- CTA
- Formularze
Główne widoki
- Strona główna
- Wynajem pojazdów
- Flota
- Sieć serwisowa
- Zarządzanie flotą
- Aktualności
- Kontakt
Materiały UI
- Ikony ogólne
- Ikony pojazdów
- Zdjęcia wizerunkowe
- Zdjęcia pojazdów
- Widoki desktop
- Widoki mobile
Wdrożenie
- WordPress
- Modułowe sekcje
- Elastyczny układ
- Powtarzalne komponenty
- Przygotowanie pod wdrożenie
04
Decyzje projektowe
Najważniejsze decyzje dotyczyły struktury serwisu, spójności z brand bookiem oraz przygotowania widoków, które można było rozwijać po wdrożeniu.
Elastyczny system sekcji
Strona została zaprojektowana jako zestaw powtarzalnych modułów, które można było wykorzystywać w różnych miejscach serwisu. Dzięki temu klient mógł rozwijać treści i zmieniać kolejność wybranych bloków bez utraty spójności wizualnej.
Czytelna nawigacja dla rozbudowanej oferty
Header z dwupoziomową nawigacją musiał pomieścić kilka głównych obszarów: ofertę, flotę, informacje o firmie, bazę wiedzy, lokalizacje, zapytanie ofertowe i infolinię.
Rozdzieliłam elementy informacyjne od akcji sprzedażowych, żeby użytkownik mógł zarówno przeglądać ofertę, jak i szybko przejść do kontaktu lub zapytania ofertowego.
Spójność z brand bookiem EFL / Truck Care
Warstwa wizualna powstała w oparciu o wytyczne marki. Kolory, typografia, zdjęcia i sposób komunikacji miały zachować spójność z platformą EFL, a jednocześnie nadać stronie bardziej aktualny i przyjazny charakter.
Widoki desktop i mobile
Widoki mobilne nie były wyłącznie pomniejszoną wersją desktopu. Układy zostały dostosowane do mniejszego ekranu, krótszego skanowania treści i wygodniejszej obsługi dotykiem.
05
Praca z brand bookiem
Warstwa wizualna została oparta na brand booku EFL / Truck Care. Wytyczne marki wpłynęły na kolorystykę, typografię, ikony oraz sposób prezentowania oferty B2B.
Kolorystyka EFL / Truck Care
Kolory wspierały spójność z ekosystemem EFL i budowały profesjonalny, wiarygodny charakter marki.
Typografia Geomanist
Geomanist zapewniał czytelność, nowoczesny charakter i spójność komunikacji w całym serwisie.
Ikony
Zestaw ikon wspierał szybkie rozpoznawanie kategorii i porządkował treści na stronie, szczególnie w obszarach dotyczących floty, korzyści i usług.
06
Widoki projektu
Projekt obejmował stronę główną, wybrane podstrony, aktualności, widok pojedynczego wpisu oraz wersję mobilną. Poszczególne ekrany zostały przygotowane tak, aby tworzyły spójny system dla różnych typów treści i urządzeń.
07
Rezultat
Efektem pracy był kompletny projekt graficzny serwisu Truck Care w wersji desktopowej i mobilnej.
Przygotowałam 33 obszary robocze, obejmujące stronę główną, kluczowe podstrony, aktualności, widok pojedynczego wpisu, elementy wspólne, ikony oraz opracowanie zdjęć.
Całość została przygotowana z myślą o wdrożeniu w WordPressie i dalszym rozwijaniu serwisu przez klienta.
Obszary robocze
Strona główna, podstrony, widoki szczegółowe i elementy wspólne.
Desktop + mobile
Układy przygotowane dla różnych szerokości ekranu i sposobów korzystania ze strony.
WordPress
Modułowy układ zaprojektowany z myślą o elastycznym wdrożeniu i późniejszej edycji treści.
08
Czego nauczył mnie ten projekt
Ten projekt pokazał mi, jak ważne jest myślenie o stronie jako o systemie, a nie pojedynczym układzie. Przy rozbudowanym serwisie firmowym trzeba uwzględnić nawigację, powtarzalne sekcje, podstrony, wersję mobilną, CMS i późniejsze zarządzanie treściami przez klienta.
Nauczyłam się też, że dobry redesign po rebrandingu to nie tylko zmiana kolorów i zdjęć. To uporządkowanie komunikacji, dopasowanie projektu do wymagań marki i stworzenie struktury, która działa zarówno dla użytkownika, jak i dla zespołu wdrażającego.
System zamiast pojedynczego ekranu
Przy większej stronie trzeba myśleć o powtarzalnych modułach, które można łączyć i wykorzystywać w różnych miejscach serwisu.
Brand book jako rama dla decyzji
Wytyczne marki pomagają utrzymać spójność, ale trzeba je przełożyć na konkretne decyzje UI i komunikacyjne.
Projekt pod realne wdrożenie
Układ musi działać nie tylko w Figmie, ale też w CMS-ie i późniejszej edycji treści przez klienta.