Redesign sklepu Natuli.pl – UX/UI
Celem projektu był pełny redesign sklepu internetowego, obejmujący stworzenie nowoczesnego i funkcjonalnego layoutu, lepiej dopasowanego do potrzeb użytkowników. Zidentyfikowano liczne ograniczenia wynikające z używania domyślnego szablonu Shopera – przestarzały wygląd, chaotyczna struktura i brak wyróżnika wizualnego negatywnie wpływały na doświadczenie zakupowe i odbiór marki.
Krok 1
Prace rozpoczęto od audytu UX oraz analizy danych z Google Analytics, ze szczególnym uwzględnieniem punktów porzuceń i zachowań użytkowników na kluczowych ścieżkach. Uzupełniająco przeprowadzono wywiady z Biurem Obsługi Klienta, aby wychwycić najczęściej zgłaszane problemy, które nie były widoczne w danych ilościowych. Całość wzbogacono o analizę konkurencji oraz przeglądem aktualnych standardów i dobrych praktyk w e-commerce.
Zakres projektu
Redesign objął wszystkie kluczowe widoki: homepage, listing, karta produktu, checkout, koszyk, panel klienta oraz nawigacja. Projekt został przygotowany kompleksowo i przekazany do wdrożenia. Poniżej przedstawiam kluczowe obszary zmian.
Kluczowe problemy
-
Nieczytelny układ listingu i karty produktu – brak hierarchii informacji, słaba widoczność CTA i zbyt długi czas ładowania.
-
Zbyt skomplikowany proces zakupowy – wieloetapowy checkout powodował porzucenia koszyka i frustrację użytkowników.
-
Problematyczna obsługa kuponów rabatowych – mało widoczne pole i nieintuicyjna interakcja.
-
Brak spójności wizualnej i strukturalnej – niespójne formularze i rozproszenie elementów wpływały negatywnie na UX i wizerunek marki.
1/ Karta produktu
Product Detail Page to jeden z kluczowych obszarów redesignu ze względu na wysoki udział w ruchu organicznym (SEO). Głównym celem było zwiększenie przejrzystości, poprawa struktury treści i ułatwienie decyzji zakupowej.
Zoptymalizowano układ sekcji above the fold, koncentrując się na kluczowych informacjach zakupowych — tytule, krótkim opisie, cenie, dostępności, czasie wysyłki, rekomendowanym wieku, wariantach cyfrowych oraz benefitach. Dodano również sticky box zakupowy z wyraźnym CTA.
Uspójniono interakcje modalne (pop-up) – np. po dodaniu produktu do koszyka użytkownik otrzymuje pełne podsumowanie zamówienia z informacją o kosztach dostawy i wyborem dalszego działania (kontynuuj zakupy / przejdź do koszyka).
2/ Podgląd koszyka
Wprowadzono wysuwany z boku podgląd koszyka, dostępny na każdej podstronie sklepu. Użytkownik widzi w nim listę produktów, ceny jednostkowe, wartość całkowitą i najtańszą dostępną formę dostawy.
Dodano dynamiczny progress bar z informacją o brakującej kwocie do darmowej dostawy wraz z CTA kierującym z powrotem do produktów. Ułatwia to podejmowanie decyzji i zwiększa wartość koszyka.
3/ Koszyk i Checkout (User Checkout Flow)
-
Koszyk przebudowano w formie single-page checkout, umożliwiającej szybki wybór metody dostawy i płatności oraz natychmiastowy podgląd pełnej kwoty zamówienia. Ograniczono liczbę kroków, co realnie zmniejszyło liczbę porzuceń.
-
Poprawiono widoczność sekcji „Mam kupon rabatowy” — teraz jest intuicyjna i łatwo dostępna.
-
Dodano pasek informacyjny z komunikatem o brakującej kwocie do darmowej dostawy wraz z CTA.
-
Sticky summary box został przeprojektowany — wyraźnie prezentuje koszty i umożliwia sprawną nawigację.
4/ Formularze
Formularze dostawy, logowania i rejestracji zostały ujednolicone — uproszczono flow, zmniejszono liczbę bodźców, poprawiono spójność wizualną.
4/ Nawigacja i architektura informacji
W wersji desktop zastosowano mega menu — rozwijane menu kolumnowe z głównymi kategoriami, podkategoriami i wyróżnionymi kolekcjami. Zwiększono jego użyteczność, ułatwiając nawigację między kluczowymi sekcjami sklepu.
W górnym pasku nawigacyjnym umieszczono bezpośrednie linki do promocji, bestsellerów i sezonowych kampanii.
W wersji mobilnej zastosowano przypięte menu dolne (bottom navigation), z szybkim dostępem do strony głównej, koszyka, ulubionych i kategorii — zgodnie z zasadą "thumb-friendly design".
5/ Strona główna
Zredukowano ilość statycznych banerów na rzecz dynamicznych, automatycznie rotujących sekcji produktowych. Wprowadzono elastyczny layout umożliwiający edytowanie treści przez zespół marketingowy — np. ręczne ustawienie kolekcji lub dynamiczne zaciąganie bestsellerów, nowości i promocji z licznikiem czasu.
Zastosowano większą hierarchię wizualną i modularny układ bloków, który ułatwia personalizację widoku strony
