Portfolio
Case study · Gastronomia + e-commerce

Sklep regionalny
we Wrocławiu

Dostawa 7 dni 2025 Wrocław, PL

Klient miał trzy podstrony na BaseKit z oceną SEO F. Sprzedaje wina, nalewki i pierniki regionalne. Tradycja od 1762 (Breslauer Kümmel) zasługiwała na stronę godną tej historii. Zrobiłem ją w 7 dni.

01 — Brief

Strona z 3 podstronami. Score F. Historia od 1762.

Klient prowadzi sklep z produktami regionalnymi Dolnego Śląska. W ofercie wina z okolicznych winnic, nalewki, pierniki i produkty z tradycją sięgającą 1762 roku, kiedy Carl Friedrich Schulz założył w Breslau pierwszą wytwórnię Kümmel.

Sytuacja wyjściowa: strona na BaseKit z trzema podstronami (główna, o nas, kontakt), brak SSL na mobile, SEO score F w Lighthouse, zero meta descriptions, zdjęcia bez alt tagów, brak Google Analytics. Klient wiedział, że musi coś zmienić, ale nie wiedział od czego zacząć.

Oczekiwania: strona godna tej historii. Sześć podstron minimum. Galeria zdjęć. Sklep lub lista produktów. Linkowanie do partnerów — winnic z regionu. I jedno kluczowe życzenie: żeby klient z Wrocławia mógł trafić na tę stronę wyszukując "wina wrocław" czy "produkty regionalne Dolny Śląsk".

Dodatkowe wyzwanie: klient miał 48 zdjęć własnych z poprzednich sezonów — różnej jakości, różne formaty. Trzeba było wybrać, przetworzyć i ułożyć w spójną galerię.

02 — Proces

7 dni od briefu do preview.

Każdy projekt dostarczam w tygodniowym rytmie. Nie dlatego że "tak szybko" jest chwytliwym hasłem marketingowym. Dlatego że krótki czas zmusza do dobrych decyzji: nie ma miejsca na scope creep, zmianę zdania w połowie drogi ani "może jeszcze to dorzucimy".

Dzień 1
Discovery
Brief, zdjęcia, historia klienta
Dzień 2
Import foto
48 zdjęć → 32 wybrane, WebP
Dzień 3
Mockup
Paleta, typografia, layout 6 podstron
Dzień 4–5
Build
HTML/CSS/JS, parallax, lightbox
Dzień 6
Review
Klient ogląda staging, feedback
Dzień 6
Polish
Poprawki po feedbacku, SEO meta
Dzień 7
Launch
DNS, SSL, live, Lexora RODO

Discovery to kluczowy etap, który agencje często ignorują. Zamiast wysyłać 40-punktowy brief template, zadzwoniłem na 30 minut i słuchałem. Historia Breslauer Kümmel z 1762 roku wyszła właśnie wtedy. To zbudowało narrację całej strony.

03 — Decyzje designerskie

Sepia, Playfair Display i scroll storytelling od 1762 do dziś.

Pierwsze pytanie projektowe: co wyróżnia ten sklep spośród wszystkich "sklepów z regionalną żywnością"? Odpowiedź: historia. 260-letnia tradycja w mieście, które zmieniało flagę i język, ale zachowało kulturę. To jest story. Nie "jakość produktów" ani "familia od pokoleń". Konkret: 1762. Breslauer Kümmel. Franz Rademacher. Carl Friedrich Schulz.

Paleta sepia

Kremowe tło #f5f0e8, brąz #722f37 jako akcent, złoto #c8a46e na call-to-action. Kojarzy się z papierem, etykietami win, piwnicą. Celowo anty-digital.

Playfair Display

Serif z klasą w nagłówkach. Lato 400 w body. Kontrast proporcji i charakteru — editorial feel bez przesady.

6 podstron

Home / Sklep / Winnice / Historia / Galeria / Kontakt. Każda strona z osobną meta description pod konkretne frazy kluczowe.

Lightbox galerii

32 zdjęcia w lazy-loaded grid. Kliknięcie otwiera pełnoekranowy lightbox z nawigacją klawiaturową i strzałkami. Zero bibliotek z npm — 80 linii vanilla JS.

Scroll storytelling

Sekcja Historia: sticky scroll od 1762 do teraz. Daty odsłaniają się przy scrollowaniu. IntersectionObserver + CSS transitions.

Marquee winnic

Partnerzy z regionu (8 winnic) w infinite marquee. Pokazuje ekosystem, buduje zaufanie, dodaje ruch stronie bez ciężkich obrazków.

04 — Tech stack

Express + własny JS. Zero frameworków z npm install 400 pakietów.

Filozofia jest prosta: jeśli mogę to zrobić w 80 liniach vanilla JS, to tak robię. Klient nie potrzebuje React do wyświetlania galerii zdjęć i formularza kontaktowego. Potrzebuje strony, która ładuje się szybko i nie sypie się po roku bo npm przestał wspierać zależność.

Express.js EJS templates v2 Vanilla JS (ES6+) Parallax hero Magnetic cursor Lightbox custom Scroll reveal (IO) WebP + lazy load Cloudflare CDN Let's Encrypt SSL Lexora RODO live-check

Hosting na infrastrukturze Sprintly. Klient ma panel Lexora, gdzie widzi w czasie rzeczywistym status RODO - czy cookie banner jest skonfigurowany, czy polityka prywatności jest aktualna, czy formularze mają wymagane pola zgody. 48 zdjęć klienta wczytuje się z /stock/wine i /stock/winery - WebP z automatyczną konwersją przy buildzie.

Lighthouse po launchu: Performance 96, Accessibility 97, Best Practices 100, SEO 98. Porównanie z poprzednią stroną: F → 98 w SEO, czas ładowania z 4.2s do 0.9s (LCP).

05 — Wynik

Score SEO F → 98. Ścieżka do kontaktu z 4 kroków do 1.

98
Lighthouse SEO (było F)
7
Dni od briefu do live
6
Podstron (było 3)

Kluczowa zmiana UX: poprzednia strona wymagała 4 kliknięć żeby dotrzeć do numeru telefonu (strona → o nas → kontakt → scroll). Po redesignie numer jest na każdej podstronie w stopce i w sticky CTA na mobile. Ścieżka skrócona z 4 kroków do 1.

Organiczne wyszukiwania: strona zaczęła pojawiać się w wynikach na frazy "wina Wrocław", "produkty regionalne Dolny Śląsk", "sklep z winem Wrocław" w ciągu 3 tygodni od launchu (według Google Search Console). To efekt poprawnej struktury semantycznej, meta tagów i schema.org LocalBusiness.

sprintly.uk/preview/wroclaw-kredens-deli

Chcesz podobnej strony?

5 minut kwestionariusza. Indywidualna wycena. Płacisz po odbiorze gotowej strony, nie wcześniej.

Wyceń projekt