Roban – Ulepszone doświadczenie zakupowe dzięki strategii treści i projektowaniu UX/UI
Klient
Roban, działający od 2000 roku, jest jednym z dwóch autoryzowanych importerów w Polsce farb, tynków, lakierów i chemii budowlanej marek Düfa i Profitec od niemieckiego producenta Meffert AG Farbwerke. Sprzedaje klientom hurtowym i detalicznym.
Zobacz roban.com.plWyzwanie
Dotychczasowy sklep działał na Comarch e-Sklep, dedykowanym rozwiązaniu sklepu internetowego dla używanego systemu ERP. Od startu w 2022 roku był rzadko aktualizowany poza obsługą zamówień. Sprzedaż online stanowiła niewielką część przychodów i nie rosła rok do roku. Płatne kampanie zwiększały ruch, ale nie przekładały się na nowych klientów.
Utrzymanie tego rozwiązania okazało się trudne:
- Dane kategorii i produktów trafiały do sklepu bezpośrednio z systemu ERP, w którym każdy wariant produktu jest osobną pozycją, aktualizowaną przy każdej zmianie treści.
- Dostosowane szablony Liquid, edytowane bezpośrednio w panelu administracyjnym, nie były aktualizowane od pierwszego wdrożenia, nie miały nowszych funkcji platformy ani historii wersji.
Moje podejście
Moja rola obejmowała zarówno fazę discovery, jak i realizację: audyt istniejącego sklepu, propozycję nowej platformy oraz odpowiedzialność za wdrożenie – od strategii treści i projektowania UX/UI, przez front-end development, po koordynację prac back-endowych z zewnętrznymi developerami.
Na podstawie audytu sklepu i wywiadów z interesariuszami zdefiniowałem cele nowego rozwiązania. Miało ono:
- Ułatwić klientom znalezienie i wybór właściwego produktu, z bogatszymi treściami produktowymi i lepszym procesem zakupowym.
- Przenieść zarządzanie katalogiem do sklepu, z atrybutami, produktami konfigurowalnymi i dostępem dla zewnętrznych redaktorów.
- Zachować system ERP jako źródło danych o cenach i stanach magazynowych.
- Poprawić SEO, GEO i wydajność strony na urządzeniach mobilnych.
- Umożliwić ciągły rozwój przez nowe funkcje i iteracje oparte na danych.
Wdrożenie
Nowy sklep wystartował 20 lipca 2026 roku na Magento 2, z dedykowanym motywem opartym na Hyvä Theme, który zaprojektowałem i wdrożyłem. Najważniejsze dotychczasowe rezultaty:
- 163 produkty z ustrukturyzowanymi danymi zamiast 518 stron produktowych.
- Wynik wydajności Lighthouse na urządzeniach mobilnych lepszy o 65%.
- Liczba sesji z wyników organicznych wyższa o 14% we wrześniu niż w sierpniu.
- Osobne strony kalkulatorów przyciągające ruch z Google.
- Pierwsze wizyty z asystentów AI, takich jak ChatGPT.
Za kulisami
Strategia treści
Wyzwanie
Już pierwszy audyt sklepu i wywiady z interesariuszami pokazały wyraźny problem z katalogiem. Ponieważ każdy wariant z ERP stawał się osobną stroną, jeden produkt z wariantami pojemności i koloru mógł pojawiać się nawet na 33 stronach. Klienci przeglądający kategorię musieli porównywać niemal identyczne strony, żeby znaleźć właściwy wariant, a każdą zmianę treści trzeba było powtarzać dla każdej z nich.
Rozwiązanie
Przebudowałem katalog wokół produktów zamiast wariantów: jedna karta produktu, a pojemność, kolor i stopień połysku jako opcje do wyboru. Treści, atrybuty i kategorie przeniosłem do Magento, a ERP pozostał źródłem danych o cenach, stanach magazynowych i zamówieniach.
Żeby sprawnie przeprowadzić ten proces dla ponad 500 wariantów produktów, wykorzystałem Claude Code: każda strona została wyeksportowana do pliku JSON z treścią, adresem URL i identyfikatorem z ERP, pliki zostały pogrupowane w produkty, a każda grupa zamieniona w produkt konfigurowalny, którego warianty przechowują tylko cenę, pojemność, kolor lub stopień połysku.
Po przypisaniu kategorii zdefiniowałem model treści karty produktu: opis rozbudowany na podstawie analizy słów kluczowych przez API Senuto, atrybuty techniczne, przygotowanie podłoża, informacje dotyczące bezpieczeństwa i produkty powiązane – żadnego z tych elementów nie było w starym sklepie. Nowe treści zostały wyodrębnione z kart technicznych i kart charakterystyki producenta, które dotąd były dostępne tylko jako pliki PDF do pobrania.
Rezultat
518 stron produktowych zastąpiło 163 produkty. Klienci wybierają wariant zamiast porównywać niemal identyczne kafelki i strony produktów, a treści aktualizuje się raz dla całego produktu.
Za kulisami
Projektowanie UX/UI
Wyzwanie
Po przebudowie katalogu największy potencjał poprawy doświadczenia klientów w pierwszym wydaniu miały strony kategorii i karty produktów. Dwie decyzje trzeba było podjąć na wczesnym etapie: jakie informacje powinien zawierać kafelek produktu na liście kategorii, a jakie karta produktu, oraz które funkcje karty produktu powinny trafić do pierwszego wydania.
Rozwiązanie
Na podstawie dostępnych danych i asortymentu zdefiniowałem dwa typy klientów, którymi kierowałem się przy decyzjach projektowych. Oba są też odzwierciedlone w grafikach na stronie głównej.
Projektowanie interfejsu zacząłem od najbardziej złożonego komponentu zamiast od strony głównej: od kafelka produktu na liście kategorii. Oba typy klientów potrzebowały więcej informacji, niż pokazuje standardowy kafelek, więc kluczowe pytanie brzmiało: ile kafelek może pomieścić, zanim stanie się zbyt przeładowany i trudny do przejrzenia. Decyzje podjęte na tym etapie stały się podstawą design systemu.
Rezultat
Każdy element finalnego kafelka odpowiada na potrzebę z tabeli: krótki opis pomaga właścicielom domów szukać według zastosowania, wybór wariantu pozwala profesjonalistom dodać znany produkt do koszyka bez otwierania jego karty, a cena za litr, dokładny stan magazynowy i duży podgląd koloru pojawiają się po wybraniu wariantu. Cena netto została przeniesiona na kartę produktu, żeby kafelek pozostał czytelny.
Kafelek produktu wyznaczył wzorce dla karty produktu: te same komponenty wyboru wariantu, ceny i stanu magazynowego. Karta uzupełnia to, czego nie ma na kafelku: szczegółowe dane produktu z kart technicznych, ceny netto, dobre praktyki CRO, takie jak termin dostawy i koszt wysyłki, oraz dwie nowe funkcje: kalkulatory zużycia i paletę kolorów z mieszalni z formularzem wyceny.
Domyślny kafelek
Domyślny kafelek Hyvä dla produktu konfigurowalnego, z wybranym wariantem. Niedostępne pojemności są przekreślone, ale po wyborze etykieta „już od” pozostaje, cena netto widnieje pod ogólnym opisem „bez podatku”, a stan magazynowy pokazuje tylko, czy produkt jest dostępny. Brakuje krótkiego opisu, który pozwoliłby odróżnić podobne produkty.
Koncepcja 1
Wszystkie potencjalne dane na jednym kafelku: krótki opis, okrągłe próbki z dużym podglądem wybranego koloru, cena brutto i netto, cena za litr dla obu oraz dokładny stan magazynowy. Kafelek odpowiadał na potrzeby obu typów klientów, ale przy dwóch cenach i dwóch cenach za litr sekcja cenowa stała się najtrudniejsza do przejrzenia.
Koncepcja 2
Cena netto i jej cena za litr zostały przeniesione na kartę produktu, więc na kafelku została jedna cena, a całość łatwo przejrzeć. Kolor akcentu zmienił się z pomarańczowego koloru marki Roban, który nie spełnia wymagań kontrastu WCAG AA, na najbliższy odcień zgodny z AA, który nadal odbierany jest jako pomarańczowo-czerwony, a nie brązowy.
Finalny kafelek
Po wybraniu wariantu dokładna cena zastępuje etykietę „już od”, obok pojawia się cena za litr, a stan magazynowy pokazuje dokładną liczbę sztuk. Duży podgląd pokazuje wybrany kolor, próbki mieszczą się w jednym rzędzie z oznaczeniem „+4”, a subtelny cień na każdej próbce pomaga wyróżnić kolory zbliżone do bieli. Dopracowane zostały też teksty interfejsu i odstępy.
Za kulisami
CRO
Wyzwanie
Audyt sklepu pokazał, że próg darmowej dostawy nie był wystarczająco widoczny, a dane o zamówieniach to potwierdziły: klienci nie dodawali dodatkowych produktów, takich jak pędzle czy wałki, aby otrzymać darmową dostawę.
Próg pojawiał się tylko w banerze na stronie głównej, poniżej pierwszego ekranu, w oknie z kosztami dostawy na karcie produktu oraz na stronie z kosztami i formami dostawy.
Rozwiązanie
Pokazałem próg darmowej dostawy na każdym etapie ścieżki zakupowej, przez teksty interfejsu i nowe funkcje:
- Każda strona: darmowa dostawa od 250 zł w pasku z wyróżnikami sklepu pod nagłówkiem.
- Karta produktu: koszt wysyłki zależny od ceny produktu, razem z terminem dostawy.
- Minikoszyk i strona koszyka: pasek postępu do darmowej dostawy i karuzela produktów uzupełniających.
- Dodanie produktu do koszyka otwiera panel minikoszyka zamiast standardowego komunikatu.
Rezultat
Klienci otrzymują teraz jasne informacje o koszcie dostawy i progu darmowej dostawy na całej ścieżce zakupowej, razem z produktami często potrzebnymi przy pracy, takimi jak pędzle, wałki czy uszczelniacze.
