Projektowanie sklepów internetowych
Sklep to kilkadziesiąt widoków i kilkaset stanów, a nie trzy kadry ze strony głównej. Projektujemy go od ścieżki zakupowej - audyt lejka, architektura katalogu, karta produktu i checkout w komplecie stanów, potem reszta widoków z jednej biblioteki komponentów. Wdrożenie bierzemy na siebie albo oddajemy projekt w formacie, z którego Wasi developerzy pracują bez dopytywania.
Pracowaliśmy dla najlepszych firm i startupów
Wyzwania
Kiedy sklep wymaga przeprojektowania
Nie każdy spadek sprzedaży jest problemem projektu. Poniżej cztery sytuacje, w których jest - i w których przebudowa zwraca się szybciej niż rok.
-
„Migracja, która nie może zabić sprzedaży”
Magento, Shopware, Shopify, własny silnik - zmiana platformy to moment, w którym najłatwiej stracić widoczność w wyszukiwarce i przyzwyczajenia stałych klientów. Projektujemy tak, żeby migracja naprawiła ścieżkę, a nie tylko przeniosła stare problemy na nowy silnik.
-
„Porzucenia w checkoucie”
Ruch jest, karty produktów się oglądają, a zamówienie nie dochodzi do końca. Odpowiada za to zwykle liczba pól, koszt dostawy pokazany za późno i wymuszona rejestracja - nie kolor przycisku. To widać dopiero w danych i w nagraniach sesji.
-
„Katalog, w którym nikt nic nie znajduje”
Kategorie dokładane przy każdej nowej dostawie, filtry odpowiadające strukturze magazynu zamiast sposobowi, w jaki klient myśli o produkcie, i wyszukiwarka, która nie znajduje własnego asortymentu. Porządkujemy katalog, zanim cokolwiek narysujemy.
-
„B2B na silniku zbudowanym pod detal”
Cenniki indywidualne, limity kupieckie, szybkie zamawianie z listy, powtarzalne koszyki i zamówienia w imieniu klienta. Zakupowiec ma inne zadanie niż konsument, choć bywa obsługiwany tym samym sklepem.
Dla kogo
Dla kogo projektujemy sklepy
-
Marki sprzedające obok marketplace'ów
Allegro i Amazon dowożą wolumen, ale marża oraz dane o kliencie zostają po ich stronie. Własny sklep ma odebrać część tego ruchu i utrzymać go przy sobie.
-
Dystrybutorzy i hurtownie
Zamówienia stałych kontrahentów przychodzą mailem, telefonem i arkuszem, a obsługa przepisuje je ręcznie do ERP. Sklep jest tu narzędziem pracy dla kupujących i dla działu handlowego naraz.
-
Producenci wchodzący w sprzedaż bezpośrednią
Asortyment znają na wylot, ale pierwszy raz obsługują końcowego klienta i robią to obok istniejącej sieci dystrybucji. Projekt rozstrzyga, jak cennik detaliczny sąsiaduje z partnerskim i w którym miejscu klient trafia do dystrybutora.
-
Marketplace'y i sklepy wielosprzedawcowe
Interfejs obsługuje dwie strony naraz - kupującego oraz sprzedawcę, który wystawia, wysyła i rozlicza. Panel sprzedawcy decyduje o podaży, więc projektuje się go z taką samą uwagą jak witrynę.
Nasza różnica
Co wyróżnia nasz projekt sklepu
-
Makiety na Waszym realnym asortymencie
Do projektu wchodzą nazwy, zdjęcia i warianty z Waszego katalogu, razem z produktem bez opisu i tym o dwudziestu rozmiarach. Układ, który wytrzyma takie dane w makiecie, wytrzyma je też po migracji.
-
Widok osoby, która prowadzi sklep
Każdy szablon dostaje wariant pusty i przepełniony - kategoria bez banera, lista z jednym produktem, promocja bez grafiki. Zespół prowadzący sklep wie z góry, co stanie się z układem, zanim cokolwiek opublikuje.
-
Dostępność liczona od pierwszej makiety
Kontrast, obsługę klawiaturą i komunikaty błędów w checkoucie projektujemy zgodnie z WCAG 2.2 AA, bo od czerwca 2025 wymagania Europejskiego Aktu o Dostępności obejmują także handel elektroniczny. Dopisywanie tego po wdrożeniu kosztuje wielokrotnie więcej.
-
Ścieżkę sprawdzamy z kupującymi z Waszej kategorii
Przed wdrożeniem prowadzimy sesje na działającym prototypie z osobami, które realnie kupują takie produkty. Spór o układ filtrów rozstrzyga wtedy nagranie sesji, a nie najgłośniejszy głos na spotkaniu.
Proces
Jak to prowadzimy
- Tydzień 1–2
Audyt ścieżki zakupowej
Przegląd danych z analityki i nagrań sesji, lejek od wejścia do zamówienia, analiza sklepów konkurencyjnych w Waszej kategorii. Wychodzimy z listą miejsc, w których tracicie zamówienia, uszeregowaną wpływem na sprzedaż.
- Tydzień 2–4
Architektura katalogu i wyszukiwania
Kategorie, atrybuty, filtry i wyniki wyszukiwania - zaprojektowane pod to, jak klient szuka produktu. To najtańszy moment na tę decyzję i najdroższy na jej pominięcie.
- Tydzień 3–6
Karta produktu i checkout
Dwa widoki, które decydują o sprzedaży, więc projektujemy je pierwsze i w pełnym zestawie stanów - warianty, brak dostępności, dostawa, płatność, błędy walidacji.
- Tydzień 5–9
System i pozostałe widoki
Biblioteka komponentów, a z niej reszta sklepu: konto, zamówienia, zwroty, listy, strony treściowe. Tu wychodzi, ile widoków sklep naprawdę ma.
- Tydzień 9–12
Wdrożenie i pomiar sprzedaży
Wdrożenie u nas albo hand-off do Waszych developerów, wpięcie zdarzeń e-commerce i przegląd lejka po pierwszym miesiącu sprzedaży.
Zakres
Co dostajecie na koniec
-
Mapa ścieżki zakupowej
Lejek od wejścia do zamówienia z zaznaczonymi miejscami, w których klienci odpadają. Dokument, do którego wracacie przy każdej kolejnej zmianie w sklepie.
-
Architektura katalogu
Drzewo kategorii, atrybuty i filtry oraz zasady dokładania nowego asortymentu - żeby struktura nie rozsypała się po roku dostaw.
-
Karta produktu i checkout w pełni stanów
Warianty, brak dostępności, progi darmowej dostawy, płatności, błędy walidacji, zakupy bez rejestracji. To te stany decydują o zamówieniu.
-
Komplet widoków sklepu
Konto, zamówienia, zwroty i reklamacje, listy, strony treściowe, wyniki wyszukiwania. Wszystkie, nie trzy najładniejsze.
-
Biblioteka komponentów
Komponenty z wariantami, stanami i tokenami. To ona decyduje, czy kampanię sezonową złożycie sami w jeden dzień, czy znów zamówicie projekt.
-
Wytyczne migracji i pomiaru
Mapowanie starych adresów, plan przeniesienia treści i konfiguracja zdarzeń e-commerce - żeby po starcie widzieć sprzedaż w podziale na ścieżki, a nie jedną liczbę.
Warsztat
Co stosujemy
Sklep sprawdza się w stanach, których nie widać na prezentacji - brak dostępności, odrzucona płatność, produkt bez zdjęcia. Poniżej progi i wytyczne, od których zaczynamy, zanim ktokolwiek zapyta o kolor przycisku.
- WCAG 2.2 AA w całej ścieżce zakupowej
- Europejski Akt o Dostępności w zakresie handlu elektronicznego
- Core Web Vitals - LCP poniżej 2,5 s na karcie produktu i w checkoucie
- Wytyczne Baymard Institute dla katalogu, karty produktu i checkoutu
- Zakup bez zakładania konta jako ustawienie domyślne
- Zdarzenia e-commerce w GA4, od karty produktu po zwrot
- Dane strukturalne schema.org - Product, Offer, AggregateRating
- Figma z biblioteką komponentów i kompletem wariantów stanów
Następny krok
Porozmawiajmy o Waszym projekcie
Powiedzcie, co macie do zrobienia. Wracamy z zakresem i wyceną.
Realizacje
Sklepy, które zaprojektowaliśmy
Wybór z realizacji oznaczonych tym typem produktu. Pełne portfolio, razem z pracami pod NDA, pokazujemy na konsultacji.
-
WygodnaDieta - Aplikacja i sklep internetowy diety pudełkowej
-
Lestore - Sklep internetowy z roletami i żaluzjami
-
SPEC Food - Sklep internetowy delikatesów spożywczych
-
Kafezzo - Sklep internetowy z kawą i herbatą
-
Tip Card - Platforma napiwków bezgotówkowych
-
Bosfor Charter - Platforma wynajmu i czarteru jachtów
-
ZhongZhou - Sklep internetowy kremu na trądzik, demodekozę i różowiec
-
Habitalux - Sklep internetowy i marka karmy dla zwierząt
-
MitoRevita - Branding i sklep suplementów liposomalnych
Efekty
Czym możecie to sprawdzić
-
2 miesiące
tyle trwała modernizacja sklepu CWZN - 72 widoki, w trzyosobowym zespole
-
2025
rok, w którym wymogi Europejskiego Aktu o Dostępności objęły handel elektroniczny - checkout projektujemy w WCAG 2.2 AA od pierwszej makiety, nie po wdrożeniu
-
101
projektów w publicznym portfolio na tej stronie - obejrzycie naszą robotę, zanim do nas napiszecie
-
9+ lat
tyle pracujemy w stałym, zdalnym składzie - sklep prowadzą te same osoby od audytu do wdrożenia
Liczby pochodzą z case study CWZN i z naszego portfolio - jedno i drugie jest publiczne, więc każdą z nich sprawdzicie przed rozmową. Progi dostępności bierzemy z WCAG 2.2 i z Europejskiego Aktu o Dostępności. Nie podajemy średnich wzrostów sprzedaży ani ROI - zależą od bazy, ruchu i asortymentu, więc wyniki konkretnych wdrożeń omawiamy imiennie na konsultacji, część jest objęta NDA.
Opinie klientów
Co mówią nasi klienci
-
„Praca z zespołem Wzór była naprawdę świetnym doświadczeniem! Zawsze szybko odpowiadali na nasze pytania i elastycznie podchodzili do naszych uwag. Mają mnóstwo kreatywnych pomysłów, a jednocześnie są bardzo rzetelni i terminowi. Efekt końcowy w pełni spełnił nasze oczekiwania, zdecydowanie polecamy każdemu, kto szuka profesjonalistów z pasją.”
Maja Wieloch-Silecka Dyrektor operacyjny, Bosfor Group -
„Nasi Klienci oczekują od nas szybkiego, skutecznego działania w bardzo szerokim zakresie. Od stworzenia brandu, przez budowę strony internetowej wraz ze sklepem po przeprowadzenie skutecznej kampanii sprzedażowej. Temat niełatwy, ale do zrobienia jeśli ma się zgrany zespół i firmy, z którymi wyzwania bierze się z marszu. Dla nas jakość, odpowiedzialność i zaangażowanie są kluczowe, a współpraca z Agencją UX Wzór zapewnia nam to w 100%.”
Piotr Alberski Chief Operating Officer, Agencja XO Media -
„Współpraca z Agencją UX Wzór rozpoczęła się od naszej strony internetowej. Bardzo spodobał się nam sposób ich pracy. Dlatego podjęliśmy decyzję o podzlecaniu projektów realizowanych dla naszych Klientów w formie White Label. Bardzo spodobał nam się ich flow pracy, przekazywanie projektów naszemu zespołowi, ich dokumentacja czy praca na design systemie. Teraz możemy podejmować większe ryzyko.”
Mateusz Swół Chief Operating Officer, Sellace
Zespół
Kto poprowadzi Wasz projekt
Sklep projektują u nas te same osoby, które prowadzą warsztat i oddają wdrożenie. Wiecie z góry, z kim pracujecie i kto odpowiada za efekt.
-
Aleksandra Bondar
Senior UX/UI Designer
-
Katarzyna Adamczuk
Prezes, Analityk Biznesowy
-
Patryk Korycki
CEO, Analityk Biznesowy
Czas i zakres
Ile to trwa i od czego zależy wycena
8–12 tygodni
Od audytu do startu produkcyjnego. Migracja z istniejącej platformy dokłada zwykle 2–3 tygodnie na przeniesienie treści i mapowanie adresów.
-
Liczba widoków i szablonów katalogu
-
Sprzedaż B2C, B2B albo oba modele naraz
-
Migracja z istniejącej platformy
-
Integracje - ERP, PIM, płatności, operatorzy dostaw
-
Rynki i wersje językowe
-
Zakres badań z klientami sklepu
Pytania
Pytania, które padają najczęściej
Ile kosztuje zaprojektowanie sklepu internetowego?
Sklep sklepowi nierówny, więc podajemy próg wejścia, nie gotową kwotę - kilkanaście widoków katalogu i kilkaset to zupełnie inne projekty. Na wycenę wpływa liczba widoków, to czy sprzedajecie B2C, B2B czy oba modele naraz, zakres migracji z istniejącej platformy i liczba integracji. Konkretną kwotę wysyłamy w dwa dni robocze od zapytania.
Ile trwa projekt sklepu?
Od 8 do 12 tygodni, od audytu ścieżki zakupowej do startu produkcyjnego. Migracja z istniejącej platformy dokłada zwykle 2–3 tygodnie na przeniesienie treści i mapowanie starych adresów. Terminy wewnętrzne ustalamy razem na pierwszym warsztacie i pilnujemy ich tygodniowo.
Pracujecie na konkretnej platformie - Shopify, Magento, Shopware?
Projektujemy niezależnie od silnika i dopasowujemy się do tego, co macie albo co wybieracie. Platforma wpływa na to, co da się zrobić bez kosztownej nadbudowy, więc pytamy o nią na starcie i mówimy wprost, które elementy projektu będą na danym silniku drogie. Jeśli platforma nie jest jeszcze wybrana, pomagamy porównać opcje pod kątem Waszego asortymentu i modelu sprzedaży.
Czy migracja na nową platformę zaszkodzi naszym pozycjom w Google?
Może, jeśli nikt jej nie zaplanuje - i to jest najczęstszy sposób, w jaki firmy tracą sprzedaż przy replatformingu. W zakresie jest mapowanie starych adresów na nowe i plan przeniesienia treści kategorii, żeby przekierowania były gotowe przed startem, a nie dopisywane po spadku ruchu.
Projektujecie też sprzedaż B2B - cenniki indywidualne, limity kupieckie?
Tak. Zakupowiec ma inne zadanie niż konsument: zamawia z listy, powtarza koszyki, działa na indywidualnym cenniku i limicie. Projektujemy to jako osobne ścieżki, nawet gdy stoją na tym samym silniku co sprzedaż detaliczna. To jest zwykle najbardziej niedoszacowana część zakresu.
Czy wdrażacie sklep, czy oddajecie sam projekt?
Obie opcje są dostępne i obie wyceniamy jawnie. Wdrożenie po naszej stronie oznacza jedną odpowiedzialność za efekt. Hand-off do Waszych developerów oznacza dokumentację, Dev Mode w Figmie, sesję przekazania i wsparcie w trakcie kodowania - nie „wysłaliśmy pliki, powodzenia".
Czy będziemy mogli sami składać strony promocyjne po zakończeniu projektu?
Tak i po to jest biblioteka komponentów, którą oddajemy razem z projektem. Strona kampanii sezonowej powstaje ze złożenia gotowych bloków, bez zamawiania projektu graficznego za każdym razem. Przy wdrożeniu po naszej stronie dokładamy szkolenie dla osoby, która będzie sklep prowadzić.
Do kogo należą prawa do projektu?
Do Was. Majątkowe prawa autorskie do projektu przenosimy w umowie, wraz z plikami źródłowymi. Nie stosujemy licencji czasowych ani uzależnienia od dalszej współpracy z nami.
Co, jeśli po wdrożeniu sprzedaż nie wzrośnie?
Dlatego w zakresie jest konfiguracja zdarzeń e-commerce i przegląd lejka po pierwszym miesiącu sprzedaży - bez tego nikt uczciwie nie odpowie na to pytanie. Jeśli dane pokażą, gdzie klienci odpadają, dostajecie listę poprawek opartą na ich zachowaniu, nie na opiniach. Osobno prowadzimy optymalizację konwersji dla sklepów już działających.
Powiązane usługi