Marka Gatta jest z nami od 2014 roku. Wtedy po raz pierwszy wspólnie stworzyliśmy Gatta.pl. Od tego czasu sklep kilkakrotnie zmieniał nie tylko swoją szatę graficzną, ale i elementy typowo użytkowe. I choć jest to droga raczej ewolucji niż rewolucji, to patrząc na początki e-commerce’u Gatty i to jak sklep wygląda dzisiaj, można powiedzieć, że zmiany są ogromne.

Czy Gatta potrzebuje cyklicznego redesignu?

Gatta to marka premium skierowana głównie do kobiet w wieku 25-49 lat. Wybrane produkty dedykowane są również kobietom dojrzałym, młodym matkom, dzieciom, a nawet mężczyznom. Marka Gatta to przede wszystkim wysokiej jakości produkty pończosznicze, bieliźniane i odzieżowe. O swojej działalności mówią tak:

Jak się to odnosi do tworzenia e-commerce’u? Cóż, powyższe słowa można przenieść niemalże jeden do jednego na sklep online: naszą misją było stworzenie wraz z Gattą produktu, jakim jest sklep internetowy, w którym klienci będą czuli się komfortowo. Chcieliśmy, aby robienie zakupów na Gatta.pl, pod względem jakości, funkcjonalności i użyteczności dawało użytkownikom jak największą satysfakcję.

Takie podejście, zarówno Gatty, jak i EENGINE powoduje, że sklep ciągle się zmienia, próbując sprostać nowym, coraz większym oczekiwaniom użytkowników. Jak pisaliśmy w jednym z poprzednich wpisów: “Żaden sklep nie jest (a na pewno nie powinien) być zaprojektowany raz na zawsze 🙂 Konieczność zmian jest odzwierciedleniem rozwoju firmy.” Przykład Gatty pokazuje, że ciągła zmiana to nie tylko potrzeba, ale i realny zysk dla marki. 

Nowe vs. stare i co nam to dało

Cykliczny redesign na Gatta.pl trwa zwykle około roku. Taki okres pozwala nam na bliższe przyjrzenie się temu, jak ostatnie zmiany wpłynęły na konwersję, jak użytkownicy odnajdują się z nowymi funkcjonalności. Pozwala też zbadać, co działa, a nad czym jeszcze musimy jeszcze popracować. 

Przy tej odsłonie e-sklepu w 2019 zaangażowany był zarówno team klienta, jak i siły UI/UX i developerskie po naszej stronie. Dzięki analizie źródeł ruchu, zachowań użytkowników oraz pogłębionym wywiadom udało nam się zidentyfikować główne problemy dotychczasowego layoutu oraz punkty, w których użytkownik czuje się niekomfortowo.

Największe optymalizacje dotyczyły jasnej hierarchii informacyjnej oraz mało rozpoznawalnych korzyści płynących z zakupów w sklepie Gatta.pl. Zmiany objęły zarówno stronę główną, listing, kartę produktu, jak i typowo procesowe kwestie (koszyk, logowanie czy widoki konta).

Strona główna – co poprawiliśmy?

Użytkownicy wskazywali na mało widoczną informację o promocjach w belce topu. Choć wydawałoby się, że zarówno umiejscowienie (na samej górze strony), wyróżnienie kolorem, czy dodanie CTA będzie dobrą praktyką, było wręcz odwrotnie 🙂 Kolor powodował zaciemnienie hasła, dodatkowy link CTA (biały, więc de facto lepiej widoczny niż sama promocja) wprowadzał zamieszanie, a umiejscowienie na środku belki powodowało zlewanie się tekstu z logiem znajdującym się poniżej. 

Co poprawiliśmy? W teorii – niewiele, w praktyce – wszystko. Zrezygnowaliśmy z dodatkowego linku “Sprawdź szczegóły”. Teraz cały tekst jest linkiem (co jest wystarczająco intuicyjne dla użytkowników). Dodatkowo tekst jest zawsze pisany białym kolorem, a po najechaniu kursorem kolor ulega zmianie (wzmocnienie CTA). Umiejscowienie od lewej, gdzie poniżej mamy sporo czystej przestrzeni, przekłada się na lepszą widoczność tekstu.

Takie przykłady, wydawałoby się drobnych zmian, można byłoby mnożyć. Wszystkie razem składają się na pozytywny user experience, a więc i na lepszy odbiór sklepu jako całości.

Inne elementy, które poprawiliśmy i korzyści, jakie nam one przyniosły to:

• widok rozwijanego MOJEGO KONTA – użytkownik już z poziomu strony głównej (lub innej karty, na której się aktualnie znajduje), może przejść do interesującej zakładki w moim koncie (skracamy ścieżki użytkownika);
• umieszczone w górnej belce elementy ULUBIONE i rozwijany KOSZYK w jasny sposób informują o braku dodanych produktów, a jednocześnie zachęcają do odwiedzenia np. NOWOŚCI czy też (wyjątkowo istotnej z punktu widzenia marketingu) kolekcji;
• podążające za użytkownikiem MENU pozwala w szybki sposób przejść do wybranej podstrony, bez konieczności scrollowania jej do góry;
• FEED z bloga buduje świadomość marki  – Gatta to nie tylko sklep, ale i ekspert w swojej dziedzinie; 
• bardzo dobrze widoczny KONTAKT w stopce (telefon, mail) – wyświetlany na każdej podstronie, powoduje, że w razie jakichkolwiek wątpliwości, użytkownik może skontaktować się ze sklepem (w wygodny dla siebie sposób);
• na STRONIE GŁÓWNEJ, w nowej odsłonie sklepu, chcieliśmy podkreślić produkty Gatta. Dotychczas strona główna opierała się przede wszystkim na graficznych banerach nowości, promocji czy wprowadzanych kolekcji. Niestety, spora ich ilość w połączeniu z różnymi komunikatami powodowała wspomniany wyżej chaos informacyjny. W tej chwili na stronie głównej królują produkty. Banery graficzne nawiązują tematycznie do produktów, jakie proponujemy użytkownikom. Dzięki takiemu podejściu unikamy natłoku informacji, prezentujemy klientom konkretną ofertę produktową, tworzymy inspiracje i połączenia między produktami.

Co z listingiem?

Sporo zmian przeszedł też LISTING produktów. Przenieśliśmy baner SEO na dół strony. Z punktu widzenia użytkownika, zwłaszcza powracającego, nie był on na tyle istotny, aby wyświetlać go na samej górze. Stąd decyzja o jego przeniesieniu. Dzięki temu po wejściu w kategorię możemy znacznie lepiej wyeksponować produkty.

Prezentacja drzewa kategorii także uległa sporej modyfikacji. Dotychczas prezentowaliśmy jedynie kategorię nadrzędną wraz z podkategoriami. Zatem przejście między kategoriami głównymi wymagało dodatkowego “uruchomienia” górnego menu. W tej chwili wyświetlamy całe drzewo kategorii, dzięki czemu użytkownik dokładnie wie, w którym miejscu się znajduje i ma ułatwiony dostęp do innych kategorii.

Flirt z filtrami trwa już jakiś czas 😉 Początkowo (jak w większości e-commerce’ów w Polsce) były umiejscowione po lewej stronie, tuż pod drzewem kategorii. Przez pewien okres w ramach testów A/B filtry były przeniesione nad produkty. Taka koncepcja się nie sprawdziła głównie dlatego, że filtry były mało widoczne, zlewały się z innymi elementami layoutu, który w tamtym okresie był mniej minimalistyczny, bardziej obciążony dodatkową grafiką. Obecnie, po przeniesieniu tekstu SEO, pozostawieniu jedynie tytułu kategorii, a nade wszystko – zwiększeniu drzewa kategorii, przeniesienie filtrów nad produkty wydawało się konieczne. Dzięki graficznemu wyeksponowaniu filtry są dobrze widoczne na tle innych elementów strony. Pamiętajmy też, że doświadczenia użytkowników ulegają zmianom. Coraz więcej sklepów (zwłaszcza z branży fashion, m.in. Zalando, Reserved) decyduje się na takie umiejscowienie filtrów, przyzwyczajając użytkowników do nowych rozwiązań. Dodatkowo mamy jasną informację o wybranych filtrach z możliwością usunięcia konkretnego lub wyczyszczenia całego filtrowania.

Karta produktu

Karta produktu powinna być funkcjonalna i prosta w obsłudze. Przeładowanie zbyt dużą ilością elementów (zwłaszcza źle skomponowanych ze sobą) powoduje, że strona staje się mało czytelna. Naszym głównym celem była większa optymalizacja użyteczności, jak i wyeksponowanie kluczowych informacji:

• zmniejszyliśmy nazwę produktu, dzięki czemu zarówno łatwiej się ją czyta (często nazwy są dość długie), jak i lepiej widoczna jest cena;
• zmniejszenie elementów w module opinii i przeniesienie ich na prawą stronę skutkuje lepszą hierarchią oraz wyodrębnieniem informacji;
• wyżej umiejscowione CTA (między innymi dzięki rezygnacji z nazwy kategorii) powoduje, że na zdecydowanej większości ekranów jest on widoczny;
• wyeksponowanie korzyści z zakupów (informacja o szybkiej dostawie czy wydłużonej procedurze zwrotów);
• zrezygnowaliśmy z proponowania produktów na zasadzie “inni kupili również” (co nie do końca przemawia do użytkowników) na rzecz produktów komplementarnych lub o podobnych właściwościach (produkty alternatywne).

Logowanie

Niby wszystko było: możliwość zalogowania do konta (na samej górze, żeby było dobrze widoczne) i możliwość założenia nowego konta wraz z jego korzyściami (niestety już na dodatkowy klik). Czego brakowało? Hierarchii, czyli głównego zarzutu względem starego wyglądu strony. Układ “jedno pod drugim” zastąpiliśmy “obok siebie”, wyróżniając element logowania, a korzyści z założenia konta są od razu widoczne. Zostawiliśmy możliwość zakupów bez rejestracji w sekcji “Nie mam konta” gdzie użytkownik najpewniej szukałby takiej opcji.

Koszyk i proces zakupowy

Nowy widok koszyka uwzględnia zarówno czytelne przedstawienie dodanych produktów, jak i podsumowanie koszyka. W przypadku produktów promocyjnych użytkownik ma jasną informację, ile zaoszczędził wybierając dany produkt (podana kwota w PLN).  Dodatkowo bez względu na dodaną ilość produktów, podsumowanie koszyka jest zawsze widoczne (pływający boks). W podsumowaniu wyróżniliśmy przede wszystkim CTA oraz łączny koszt zakupów.

Mechanizm procesu zakupowego w zasadzie nie uległ zmianie. Elementy, które były do tej pory przenieśliśmy na odświeżony szablon, starając się jeszcze bardziej zoptymalizować je pod kątem użyteczności. Stąd jasny podział na kolejne kroki: wybór sposobu dostawy, płatności oraz dane zamawiającego. Duży nacisk został położony na walidację. Zarówno komunikaty o błędach, jak i poprawnym uzupełnieniu pól są widoczne i jednoznaczne. Mała-duża zmiana to odejście od ujednoliconego wyglądu radiobuttonów i checkboxów na rzecz rozróżnienia obu funkcjonalności.

Dbamy o stałych użytkowników, czyli zmiany w moim koncie

Kilka zmian i funkcjonalności wdrożyliśmy także w obszarze stałego klienta. W sekcji mojego konta dodaliśmy linki pomocy, dzięki czemu użytkownik ma stałe miejsce, w którym może sprawdzić daną rzecz lub rozwiać wątpliwość. Jednocześnie najważniejsze elementy pomocy dostępne są w stopce, aby użytkownicy bez konta również mieli do nich łatwy dostęp. Na podstawie historii zakupów, wchodząc w szczegóły zamówienia, można w prosty sposób ponowić zakupy – zarówno całego koszyka, jak i pojedynczych produktów. 

Cele zmian

Przed każdym redesignem staramy się określić główny cel zmian. Zmiana dla samej zmiany nie jest wystarczająca, aby dobrze przygotować użytkowników na nową wersję serwisu. Początkowo głównymi celami, jakie stały przed Gatta.pl, były: pokazanie klientom korzyści z zakupów przez internet, budowanie świadomości marki w Internecie oraz informowanie o oferowanym asortymencie (dla wielu klientów Gatta kojarzyła się tylko z rajstopami).

Chcieliśmy pokazać Gatta.pl jako markę dla świadomych kobiet, które wybierają dobrej jakości produkty polskiej firmy. Od początku sklep był budowany z myślą o elegancji, stylu, pięknie.

Branża e-commerce rozwija się naprawdę szybko i ostatnich kilka lat pokazuje, że cele, jakie stawialiśmy sobie kiedyś, są na dzień dzisiejszy niewystarczające. Jaka miała być zatem Gatta.pl przełomu 2019/2020? Nadal elegancka i stylowa, ale przede wszystkim funkcjonalna i przyjazna użytkownikowi. Zmiany, które wprowadzaliśmy miały na celu budowanie pozytywnych doświadczeń użytkownika, dlatego kolejne funkcjonalności wprowadzane były “dla wygody” korzystających z serwisu. 

Wygląd był tu wtórny. Taki cel spowodował też większe niż dotychczas zaangażowanie w funkcjonowanie sklepu na urządzeniach mobilnych. Dotychczas wersja mobilna była niemalże, dzięki responsywności, odzwierciedleniem wersji desktopowej. Choć sklep nadal jest responsywny, to wdrożyliśmy kilka zmian dedykowanych urządzeniom mobilnym, tak aby coraz większa liczba klientów mobilnych mogła w wygodny sposób zarówno przeglądać ofertę sklepu, jak i sfinalizować zakupy.

Nowa Gatta.pl = nowe trendy?

Ponieważ, jak już wspomniałam, e-commerce ciągle się zmienia, wcale nie jest łatwo nadążyć za najnowszymi trendami. Pytanie, czy trzeba? Branża fashion jak żadna inna kojarzy się z trendami, modą, szybką zmianą. Warto, aby najlepsze standardy i trendy przejawiały się również w designie. Customer experience to coś, co było brane pod uwagę w zasadzie na każdym etapie designu i wdrożenia. W dużym stopniu położyliśmy nacisk na korzystanie z serwisu na urządzeniach mobilnych, jako coraz częstszych narzędziach nie tylko przeglądania oferty, ale i finalizacji zakupów. Warto wspomnieć również o tworzeniu unikatowych treści serwisu. Z jednej strony wspierają SEO, z drugiej budują świadomość marki. Stąd na Gatta.pl pojawił się na stronie głównej blog oraz unikatowe opisy kategorii i produktów.

Tym, co wydaje się szczególnie silne obecnie w designie, jest fakt, że projektowanie to praca zespołowa. Postawienie celowości zmian, jako wyznacznika projektowania powoduje, że nie ma większego znaczenia, kto jest twórcą interfejsu. “Supermoce” wszystkich zaangażowanych w projekt osób, są niezbędne, aby zapewnić taki poziom wdrożenia, który odpowie na potrzeby użytkowników. Dodawanie kolejnych funkcji jest stosunkowo proste, ale zadbanie, żeby rozwiązywały właściwe problemy – już nie jest tak oczywiste. 

Współpraca z klientem

Tym, co mnie osobiście najbardziej cieszy w kolejnych odsłonach Gatta.pl, jest właśnie współpraca z klientem. Ogromne zaangażowanie, zarówno w research, propozycję zmian, odbiór tego co proponujemy, jak i tego co zaprogramujemy dla nas, firmy programistycznej, to wyjątkowa motywacja do działania. O współpracy z klientem pisaliśmy już tutaj. Muszę przyznać, że w dużej mierze tekst powstał na bazie naszych wieloletnich relacji z marką Gatta. Motorem zmian i dobrej współpracy są przede wszystkim wola obu stron do tworzenia najlepszych produktów oraz zaangażowanie w proces ich tworzenia.

Case study do pobrania w pliku PDF.