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 strony truckcare.pl w wersji desktopowej oraz mobilnej.
Moim zadaniem było zaprojektowanie spójnego, profesjonalnego interfejsu zgodnego z brand bookiem EFL / Truck Care oraz przygotowanie widoków pod elastyczny szablon WordPress.
01
Kontekst i wyzwanie projektowe
Projekt łączył rebranding, uporządkowanie rozbudowanej struktury treści oraz przygotowanie widoków możliwych do wdrożenia w WordPressie.
Kontekst
Prace były częścią zmiany identyfikacji marki z DBK Rental na Truck Care. Nowa strona miała wykorzystać dotychczasowe treści, ale otrzymać odświeżony układ, spójny z marką Truck Care i ekosystemem EFL.
Ważnym założeniem było zachowanie kolorystyki EFL, fontu Geomanist, zasad brand booka oraz charakteru komunikacji dopasowanego do odbiorców B2B.
Struktura musiała być zaprojektowana w taki sposób, aby po wdrożeniu klient mógł łatwo rozwijać stronę, dodawać kolejne sekcje i wykorzystywać je w różnych miejscach.
Wyzwanie projektowe
Największym wyzwaniem było stworzenie strony, która jednocześnie:
- wzmacniała nowy wizerunek marki po rebrandingu,
- porządkowała dużą liczbę treści i podstron,
- zachowywała spójność z identyfikacją EFL / Truck Care,
- działała dobrze na desktopie i urządzeniach mobilnych,
- była przygotowana pod elastyczny szablon WordPress.
To nie była wyłącznie zmiana wizualna. 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
Zachowanie dotychczasowych materiałów oraz możliwość zmiany układu treści na poszczególnych podstronach.
02 Identyfikacja marki
Kolorystyka EFL, font Geomanist, zasady brand booka oraz spójność z ekosystemem EFL i Carefleet.
03 Nawigacja
Header z górnym paskiem, sticky menu, CTA, numerem infolinii oraz dwupoziomową strukturą menu.
04 Szablony podstron
Wspólny schemat dla kluczowych widoków: sekcja otwierająca, breadcrumbs, treści główne oraz stopka z danymi firmy i linkami.
05 Wdrożenie
Modułowe sekcje, wersja desktopowa i mobilna oraz przygotowanie projektu pod WordPress.
03
Zakres projektu
Zakres prac obejmował stronę główną, wybrane podstrony, elementy wspólne, 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 strony, spójności z brand bookiem oraz przygotowania widoków, które można było łatwo 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. Dzięki temu klient mógł rozwijać treści i zmieniać kolejność 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ł szybko przejść do kontaktu lub oferty.
Spójność z brand bookiem EFL / Truck Care
Warstwa wizualna powstała w oparciu o wytyczne marki. Kolory, typografia, zdjęcia i komunikacja miały zachować spójność z platformą EFL, a jednocześnie nadać stronie bardziej aktualny i przyjazny charakter.
Widoki desktop i mobile
Układy na mniejsze ekrany nie były tylko pomniejszoną wersją desktopu - zostały dostosowane do krótszego skanowania treści i łatwiejszej 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 komunikacji 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ść, nowoczesność i spójność komunikacji B2B.
Ikony
Uporządkowany zestaw ikon wspierał szybkie rozpoznawanie kategorii i porządkował treści na stronie.
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 strony 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 przez klienta.
Obszary robocze
strona główna, podstrony, widoki szczegółowe i elementy wspólne.
Desktop + mobile
przygotowanie układów 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 rozbudowanej stronie firmowej 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.
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.