Jak zaprojektowaliśmy nową stronę internetową dla marki HIT po rebrandingu marki

Śledź nas w mediach społecznościowych:

HIT to marka, której nie trzeba nikomu przedstawiać – kultowe ciastka od lat goszczą w polskich domach.

 

W ostatnim czasie marka przeszła istotne zmiany związane z rebrandingiem. Zostaliśmy zaproszeni przez firmę Bahlsen do współpracy nad stworzeniem nowej wersji strony internetowej, która odzwierciedla odświeżony wizerunek i charakter marki HIT.

Sprawdź online

Jak wyglądały etapy prac w projekcie?

Realizacja projektu miała na celu odświeżenie wizerunku marki HIT w przestrzeni digital oraz dopasowanie strony do współczesnych standardów użytkowych i wizualnych.

Pierwszym etapem naszych działań była analiza istniejącej strony oraz materiałów marketingowych marki, które definiowały jej nowy charakter. Zrozumienie, jakie zmiany przechodzi marka i w jaki sposób będzie teraz o sobie opowiadać, było kluczowe przy dalszych pracach i stało się punktem wyjścia do tworzenia makiet.

W przypadku serwisów internetowych dla branży FMCG często zdarza się, że strony produktów są atrakcyjne wizualnie, ale mało intuicyjne i trudne w obsłudze. W naszych projektach kładziemy duży nacisk na przemyślaną nawigację, dlatego rozpoczęliśmy prace od przygotowania solidnych makiet całego serwisu – stanowiły one bazę do dalszych etapów projektu.

Kolejnym już krokiem było opracowanie projektu graficznego, który odzwierciedla sposób, w jaki marka mówi o sobie w nowym wydaniu.

  • 87/100

    Prędkość strony według Google w wersji mobile

  • 99/100

    Prędkość strony według Google w wersji desktop

  • 8

    Liczba produktów przedstawionych w serwisie

Co było kluczowe w trakcie prac?

  • Rozwiązania dopasowane do branży FMCG

    Strona została zaprojektowana tak, aby użytkownicy mogli łatwo odnaleźć informacje o produktach, w tym skład i wartości odżywcze.
  • Spójność z identyfikacją wizualną marki

    Strona odzwierciedla nowego ducha marki HIT, a projekt graficzny jest spójny z jej identyfikacją wizualną, kolorystyką, typografią i ikonografią.
  • Przejrzysta prezentacja produktów

    Produkty zostały pogrupowane w kategorie, a użytkownicy mogą wygodnie filtrować i wyszukiwać swoje ulubione smaki.
  • Efekty wizualne i animacje

    Strona zawiera interaktywne elementy: parallax, subtelne animacje i materiały wideo. Animacje zwiększają zaangażowanie i sprawiają, że korzystanie ze strony jest przyjemniejsze i dynamiczne.
  • Dostępność dla wszystkich użytkowników

    Projekt uwzględnia wytyczne WCAG, dzięki czemu jest dostępny dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.
  • Łatwa edycja i aktualizacja treści

    Dzięki intuicyjnemu panelowi WordPress wprowadzanie zmian i aktualizacja nowych produktów odbywa się szybko, bez potrzeby posiadania wiedzy programistycznej.

Jak przebiegały prace programistyczne nad projektem?

Kiedy projekt graficzny został zatwierdzony, przystąpiliśmy do kodowania strony i wdrożenia wszystkich funkcjonalności. Jak w większości naszych realizacji, serwis powstał w oparciu o CMS WordPress, co pozwala klientowi samodzielnie i szybko wprowadzać zmiany w treści.

Strona została zaprojektowana w pełni responsywnie oraz dostosowana do standardów WCAG, dzięki czemu jest przyjazna i dostępna dla wszystkich użytkowników.

 

Po zakończeniu etapu wdrożenia dodaliśmy komplet treści produktowych i informacyjnych – w tym opisy produktów, wartości odżywcze oraz informacje dla użytkowników.

 

Projekty dla branży FMCG to dla nas także wyzwanie organizacyjne. Bardzo często realizowane są pod presją czasu, ponieważ termin publikacji strony jest ściśle powiązany z harmonogramem kampanii reklamowych. Nie inaczej było i tym razem – jednak dzięki doświadczeniu naszego zespołu udało się zrealizować projekt sprawnie i terminowo. Strona wystartowała dokładnie w dniu rozpoczęcia kampanii.

 

Efektem prac jest estetyczna, funkcjonalna i intuicyjna strona internetowa, która w pełni odzwierciedla nowy wizerunek marki HIT.

 

Realizacje dla branży FMCG należą do naszych ulubionych. To była już kolejna współpraca z firmą Bahlsen – cieszymy się, że mogliśmy ponownie wykorzystać nasze doświadczenie i wiedzę, by pomóc w prezentacji tak znanej marki w jej nowym wydaniu.

Zakres prac

  • Makiety UX/UI
  • Projekt graficzny strony
  • Kodowanie serwisu
  • Dostosowanie do standardów WCAG
  • Migracja treści
  • Animacje i efekty wizualne
  • Wsparcie techniczne po uruchomieniu serwisu