Projekt i wdrożenie sklepu internetowego z autorskim motywem
OVER Cosmetics – kosmetyki naturalne, marka własna i private label
over-cosmetics.pl to sklep producenta kosmetyków naturalnych, w którym pod jednym adresem żyje siedem linii produktowych, dwie zupełnie różne grupy odbiorców i druga, równoległa oferta B2B. Projektowo to nie jest sklep — to trzy sklepy w jednym, i cała praca polegała na tym, żeby klient tego nie odczuł.
Zbudowaliśmy autorski motyw WooCommerce, w którym wygląd sklepu zmienia się zależnie od tego, dla kogo klient szuka produktu, a stronę główną da się przebudować bez programisty. Pod spodem sklep spina się z systemem Enova, CMS-em klienta i centrum wsparcia, a osobny moduł obsługuje sprzedaż konsultancką z własnym cennikiem.
Etap 1
Architektura
informacji
-
Scenariusze UX i ścieżki zakupowe
-
Wireframing i drzewo kategorii
-
Dokumentacja projektowa
Dwie taksonomie, które się krzyżują
Asortyment da się poukładać na dwa równie sensowne sposoby i klienci realnie korzystają z obu. Jedni szukają po odbiorcy — dla niej, dla niego, dla Was — schodząc potem do ciała, twarzy albo brody. Inni znają linię produktową: Mikstury Natury, Nature by OVER, OVER Original, OVER Clean, Linia Termalna, EXPERT albo Viking.
Klasyczny sklep wybiera jedną z tych osi i drugą chowa w filtrach. Tutaj obie musiały być równorzędne, a drzewo kategorii schodzi do czterech poziomów i dubluje się między odbiorcami — te same maści i żele istnieją osobno w gałęzi damskiej i męskiej, bo w każdej znaczą co innego.
Rozwiązaniem był sidebar z rozwijalnym drzewem na listingach, breadcrumbs pokazujące, w której gałęzi się jesteś, i selektor „Wybierz coś dla siebie" na stronie głównej jako wejście w oś odbiorcy. Klient wchodzi jedną osią, a w każdej chwili może przeskoczyć na drugą, nie wracając do startu.
Etap 2
Projektowanie
-
Motyw zmienny wg odbiorcy
-
Autorski motyw i komplet widoków
-
Design system i biblioteka bloków
Sklep, który zmienia nastrój razem z odbiorcą
Najmocniejszy element tego projektu: wejście w sekcję odbiorcy przemalowuje cały szablon. Część damska pracuje na różanej palecie z delikatnym, liniowym motywem roślinnym. Część męska przełącza się na granat, mocniejszy krój i ciemniejszą fotografię — najdalej idzie linia Viking do pielęgnacji brody, która dostaje własny, wyraźnie mroczniejszy klimat.
To nie jest kosmetyczna zmiana koloru. Zmienia się paleta, typografia akcentowa, styl zdjęć i ornament — ten sam sklep sprzedaje dwóm osobom, które nie chcą oglądać tego samego. Żeby to nie rozpadło się na dwa niepowiązane serwisy, wszystko stoi na jednym design systemie: siatka, skala typograficzna, komponenty karty produktu i koszyka są wspólne, zmienne są tylko warstwy nastroju.
Identyfikacja: elegancja bez apteczności
Kosmetyk naturalny łatwo zaprojektować tak, że wygląda albo na aptekę, albo na jarmark. Warstwa wizualna balansuje między jednym a drugim: szeryfowy krój wersalikowy w nagłówkach daje powagę i odniesienie do kosmetyki premium, odręczny, pisany akcent („Samo dobro", „Więcej niż codzienna pielęgnacja") zdejmuje z niej sztywność.
Spina to system organicznych, miękkich kształtów — obłe formy oprawiają sygnet w nagłówku i rozdzielają sekcje, zastępując proste linie. Fotografia produktowa jest ustawiana na naturalnych podestach: plastrach drewna, kamieniu, owocach, liściach. Razem daje to wrażenie marki, która robi kosmetyki z czegoś, a nie tylko mówi, że robi.
Karta produktu w kategorii, w której decyduje skład
W kosmetykach klient porównuje pojemność, skład i przeznaczenie, często między markami. Karta produktu pokazuje galerię z powiększeniem, cenę wraz z ceną jednostkową za kilogram — bo to ona pozwala uczciwie porównać opakowania różnej wielkości — krótki haczyk sprzedażowy, wybór ilości i przycisk zakupu w jednym zasięgu wzroku.
Niżej idzie długi opis: skład, zastosowanie, sposób użycia. To celowo dużo treści — ta kategoria sprzedaje się wiedzą, a nie hasłem. Pod nią pasek zaufania („tworzymy własne receptury", „produkujemy u siebie", „darmowa dostawa od 100 zł") i wiersz produktów powiązanych.
Ten sam wątek prowadzi encyklopedia składników „Poznaj moc płynącą z natury" na stronie głównej oraz sekcja z technolog chemicznym stojącym za recepturami — twarz i kompetencja zamiast anonimowego producenta.
Strona główna, którą klient utrzymuje sam
Strona główna wygląda na złożoną i taka jest — ale tylko dla oglądającego. Od środka to zestaw bloków Gutenberga z polami ACF: baner linii, siatka kafli marek, selektor odbiorcy, karuzela z szybkim dodaniem do koszyka, blok encyklopedii składników, opinie klientów. Każdy z własnymi ustawieniami i ustalonymi wariantami.
To była decyzja projektowa, nie techniczna. Projekt, którego klient nie umie sam zmienić, starzeje się w tempie jednej kampanii. Przy siedmiu liniach i sezonowych premierach ekspozycja zmienia się kilka razy w roku — marketing przestawia bloki sam, a design system pilnuje, żeby typografia, siatka i odstępy zostały spójne niezależnie od kolejności.
Etap 3
Wdrożenie
i integracje
-
Integrator wymiany danych
-
Moduł konsultanta
-
Zgodność z przepisami UE
Integrator: sklep, CMS, Enova i centrum wsparcia w jednym obiegu
Sklep nie jest oddzielną wyspą. Integrator utrzymuje przepływ danych między WooCommerce, wewnętrznym CMS-em klienta, systemem Enova i centrum wsparcia — stany magazynowe, ceny, dane produktowe i zamówienia krążą w jednym obiegu, bez ręcznego przepisywania.
Przy producencie, który sam wytwarza i wysyła, to warunek działania obietnicy „wysyłka tego samego dnia": obsługa widzi zamówienie w tym samym momencie co magazyn, a dostępność na stronie jest prawdziwa.
Konto konsultanta i pięć progów rabatowych
Osobny moduł pozwala zarejestrować się w roli konsultanta. Takie konto dostaje własny cennik, własne metody płatności i dostawy, a przede wszystkim rabat rosnący w pięciu progach — im wyższa wartość koszyka, tym niższe ceny jednostkowe.
Projektowo najtrudniejsze było pokazanie progu bez zamieniania koszyka w arkusz kalkulacyjny. Konsultant w każdej chwili widzi, na którym progu jest i ile brakuje do następnego — informacja, która sama w sobie podnosi wartość zamówienia, bo domyka decyzję zamiast ją komplikować.
Obok tego działa druga ścieżka B2B: strona private label z ofertą produkcji kontraktowej dla salonów, spa, hoteli i sieci handlowych. Sklep obsługuje więc detal, konsultantów i zapytania kontraktowe, nie rozdzielając się na trzy serwisy.
Bezpieczeństwo i zgodność z regulacjami
Sklep jest utrzymywany zgodnie z aktualnymi wymogami unijnymi dotyczącymi sprzedaży internetowej — od prezentacji cen i informacji o obniżkach, przez zgody i dane osobowe, po obowiązki informacyjne w koszyku i checkoucie. Cena jednostkowa na karcie produktu należy do tej samej grupy: wymóg formalny, który przy okazji ułatwia zakup.
Podsumowując
Projekt over-cosmetics.pl to sklep, w którym praca projektanta nie kończy się na wyglądzie. Najwięcej wartości dało zaprojektowanie systemu, a nie strony: architektury informacji, która obsługuje dwie krzyżujące się taksonomie, motywu zmieniającego nastrój razem z odbiorcą i biblioteki bloków, którą marketing składa samodzielnie.
Od strony technicznej sklep stoi na WooCommerce z autorskim motywem, blokach Gutenberga z ACF oraz integratorze spinającym go z Enova, CMS-em klienta i centrum wsparcia. Obsługuje sprzedaż detaliczną, konsultancką i zapytania private label. To przykład realizacji, w której projektowanie UX/UI, wdrożenie i integracje powstawały w jednym zespole.