Kampania interaktywna Case study

CrushQuiz.pl - wakacyjna kampania E.Wedel

FMCG / Marketing / Marka spożywcza

Wdrożenie techniczne wakacyjnego quizu kampanijnego E.Wedel dla agencji Brainbox. Pixel-perfect na każdym urządzeniu, PWA, zero frameworków.

O projekcie

Kampania wakacyjna 2026 dla E.Wedel prowadzona przez agencję Brainbox. Nasze zadanie: zamienić kompletny zestaw creative'ów (widoki z prezentacji, grafiki tła w dwóch orientacjach, assety dla 4 wariantów wyniku) w responsywny quiz. Wyzwanie techniczne: charakterystyczne serce Wedla musi być dokładnie pośrodku ekranu niezależnie od urządzenia, od wąskiego iPhone z paskiem Safari po duży desktop. Rozwiązanie: aspect-ratio bg system per widok (16:9 desktop, 9:20 mobile, 7:5 wynik), pozycja overlay'ów w procentach względem tła (nie viewportu), rozmyty fill za canvasem dla nietypowych proporcji. Pełny PWA setup z theme-color w kolorze marki, żeby quiz po zapisaniu na ekran główny telefonu wyglądał jak natywna aplikacja. Zero frameworków, instant load pod kampanię viralową.

“Kampania wakacyjna Wedla, pixel-perfect na każdym ekranie.”

Wyzwanie

Agencja dostarczyła kompletne creative'y (prezentację z widokami wszystkich ekranów, grafiki w dwóch orientacjach, assety per wariant wyniku). Trzeba było zamienić statyczne widoki w interaktywny quiz który pixel-perfect działa na iPhone Safari z paskiem, iPhone fullscreen, Android, tablet, dużym desktopie, wąskim oknie i krótkim oknie. Charakterystyczne serce Wedla ma być dokładnie na środku ekranu na każdym z tych urządzeń. Sztywny termin sezonowy, iteracje z agencją muszą lecieć szybko.

Rozwiązanie

Custom scene/canvas system: każdy widok (start, pytanie, wynik) ma własny aspect ratio, grafiki tła przygotowane osobno per orientacja. Overlay'y pozycjonowane w procentach WZGLĘDEM TŁA (nie viewportu), CSS custom properties przełączają pozycję per breakpoint - jedna zmiana obejmuje wszystkie urządzenia. Rozmyty fill za canvasem dla nietypowych proporcji ekranów, żeby boki nigdy nie były pustymi pasami. Pełny PWA (manifest, ikony, theme-color w kolorze marki). Wersjonowanie assetów przez znacznik w URL, reguły cache na serwerze: HTML no-cache (natychmiastowa dystrybucja nowej wersji), assety immutable rok. Iteracje z agencją prowadzone na konkretach: warianty widoków obok siebie, screeny z rzeczywistych urządzeń.

Efekty i cechy

  • Pixel-perfect quiz na każdym z siedmiu przetestowanych urządzeń i proporcji
  • PWA-ready: manifest + theme-color w kolorze marki, quiz zapisany na ekran główny iPhone wygląda jak natywna aplikacja
  • ~35 KB HTML, zero frameworków, instant Time To Interactive pod kampanię viralową
  • Grafiki tła optymalizowane per orientacja (desktop 16:9 vs mobile 9:20), WebP + JPG hybrid
  • Reguły cache na serwerze: HTML no-cache (natychmiastowa dystrybucja nowej wersji), assety immutable rok
  • Iteracje designu z agencją prowadzone na konkretach: warianty widoków obok siebie, screeny z realnych urządzeń

Technologie

Vanilla HTML/CSS/JSPWACSS custom propertiesAspect-ratio bg systemWebP + JPGGoogle Fonts preconnectcyberFolks hosting

Charakter wizualny: Navy #153988 (Wedel heart) + orange #f3901c / #ffb43e (wakacyjny, słoneczny). Fonty Baloo 2 + Montserrat.