Vilandy to sklep online oferujący szeroki wybór produktów od producentów i osób prywatnych, w wyjątkowo niskich cenach. Jest także jedyną w Polsce platformą, na której klient może kupić wielkogabarytowe meble z second handu.

Zostałem zatrudniony do firmy z polecenia, na stanowisko UX designer’a. Moim zadaniem była poprawa funkcjonalności sklepu, który miał trudności z pozyskaniem nowych klientów i utrzymaniem tych pozyskanych. Praca tutaj rzuciła przede mną mnóstwo wyzwań. Zastałem ogromny chaos wewnętrzny, który musiałem opanować. Podniosłem konwersję rejestracji użytkowników o niemal 90%. Opracowałem efektywny proces dodawania nowych produktów w sklepie. Udało mi się też znacznie zwiększyć ruch użytkowników na samej stronie. Moja praca nad tymi problemami była intensywna i wymagająca, ale każdy sukces był tego warty. Jak udało mi się sprostać tym trudnościom? Wszystkiego dowiesz się poniżej.

Zacznijmy jednak od samego początku...

Pierwszym krokiem po rozpoczęciu pracy było zidentyfikowanie potrzeb i problemów biznesowych firmy. Podszedłem do zadania holistycznie, przeprowadzając audyt sklepu, który szybko ujawnił brak klarownego źródła wiedzy w plikach Figmy. Nie istniał Design System, a makiety były nieskatalogowane, co utrudniało odróżnienie aktualnych wersji od poprzednich iteracji. Dodatkowo, nawet developerzy nie byli w stanie tego określić, przez co wprowadzali zmiany na platformie “na własną rękę,” a to tylko zwiększało chaos między makietami a stanem faktycznym na produkcji.

Brakowało również ustalonego procesu product delivery. Nie było jasno ustalone, kto odpowiada za konkretne zadania (np. testowanie wypracowanych rozwiązań), ani jakie dokładnie cele zamierzamy osiągnąć. Dodatkowo zidentyfikowałem kluczowe błędy na głównych ścieżkach konwersji. Moim priorytetem stało się więc przywrócenie porządku, aby skutecznie rozwiązać istotne problemy na platformie.

Vilandy miało ogromny problem już na procesie rejestrowania klientów. Sklep praktycznie nie pozyskiwał nowych użytkowników. Musiałem zlokalizować co było przyczyną tak negatywnego wyniku. W tamtym momencie to był najbardziej krytyczny problem, który poważnie ograniczał efekty kampanii reklamowych firmy. Należało odpowiedzieć na podstawowe pytanie:

Definicja problemu

Dzięki przeprowadzonej analizie udało mi się zidentyfikowanie trzy kluczowe problemy, które występowały
w procesie zakładania konta.

Rozwiązanie

Finalna wersja zaprojektowanych makiet koncentrowała się na poprawie głównej ścieżki konwersji, zarówno na stronie głównej, jak i w formularzu rejestracji i logowania. Dla nowych użytkowników, którzy nie założyli jeszcze konta, stworzyłem prosty popup card, który wyświetlał się w trakcie przeglądania strony głównej – zawierał komunikat zachęcający do jego założenia. Upewniłem się też, że klienci mają taką możliwość już z poziomu głównego menu. Opcja rejestracji musiała być jak najlepiej widoczna.

Poprawiłem czytelność i spójność elementów designu w modułach logowania i rejestracji, aby użytkownicy mogli łatwiej nawigować oraz bardziej intuicyjnie przechodzić przez proces zakładania konta. Opcja rejestracji w module logowania, wcześniej ukryta pod niewidocznym linkiem na dole, została wyraźnie wyeksponowana jako przycisk w górnej części modułu. Usunąłem błędy developerskie dotyczące responsywności strony. Wprowadziłem też walidację hasła w czasie rzeczywistym, co umożliwiało natychmiastową weryfikację wprowadzanych danych.

Drugi krok rejestracji został znacząco ulepszony pod kątem czytelności. Zaprojektowałem komponenty formularza od podstaw – dzięki przeprowadzonemu wcześniej audytowi wiedziałem, że będę ich potrzebował w przyszłych projektach. Najważniejszą zmianą było jednak dodanie opcji uzupełnienia danych później. Formularz dla kont firmowych pozostał bardzo rozbudowany, ale użytkownik mógł wypełnić te informacje dopiero w momencie sprzedaży lub zakupu produktu, co zwiększało szansę na dokończenie procesu. Aby go uprościć, zaproponowałem opcję autouzupełniania danych firmy na podstawie numeru NIP.

Wynik

Wprowadzone zmiany podniosły współczynnik konwersji aż o 87%! Na pierwszy rzut oka całość wygląda jak zwykła przebudowa modułu, ale wykonana tu została ogromna ilość pracy w celu usprawnienia elewacji graficznej interfejsu i ogólnej poprawy jakości. Stworzone komponenty zaprojektowałem w ten sposób, aby mogły być reużywalne w kolejnych projektach i być podstawą nowego design systemu. Proces logowania i rejestracji stał się bazą pod przyszłe działania w ramach współpracy z Vilandy.

Proces generował wiele problemów, a użytkownicy często wystawiali negatywne opinie. Wielu nie potrafiło uzupełnić formularza, albo robiło to bez zrozumienia, a to powodowało dodatkowy chaos na listingach produktowych platformy. Powszechne były źle opisane produkty, błędnie ustawione kategorie oraz szablony. Formularz sprzedażowy wymagał natychmiastowej naprawy.

Analiza problemu

W pierwszej kolejności wykonałem szczegółowy audyt istniejącego formularza sprzedażowego, oraz przeprowadziłem research benchmarków na rynku. Chciałem mieć możliwie pełny obraz sytuacji. Ostatecznie zidentyfikowałem 4 główne problemy:

Tworzenie prototypów

W trakcie procesu projektowania kluczowe było odciążenie użytkownika od nadmiaru danych, które musiał przetworzyć po wejściu na formularz. Główną decyzją projektową był podział formularza na kroki. To skuteczna technika stosowana w przypadku skomplikowanych formularzy, która sprawiła, że cały proces stał się bardziej przystępny i mniej przytłaczający dla klientów.

Kolejnym krokiem była poprawa architektury informacji i walidacji, których ogólne komunikaty powodowały dezorientację użytkowników, co skutkowało wzrostem współczynnika odrzuceń. Dobrym rozwiązaniem wydawało się ponownie zastosowanie walidacji w czasie rzeczywistym, wyświetlanych w formie podsumowania na pasku bocznym. Poza podstawową funkcją, takie podsumowanie umożliwiało użytkownikowi szybki przegląd informacji wymaganych na danym etapie formularza. System szablonów wymagał gruntownego przeprojektowania – zarówno w zakresie bazy szablonów, jak i uproszczenia obsługi, z uwzględnieniem możliwości dodawania produktów, które nie pasowały do istniejącej listy szablonów.

Powyższe modyfikacje były kluczowe, jednak zarówno analiza, jak i prace koncepcyjne otwierały przestrzeń na znacznie więcej usprawnień, które wprowadziłem w finalnej wersji projektu.

Rozwiązanie

Krok 1

Wybór szablonu był istotną częścią procesu, dlatego pierwszy krok formularza został mu poświęcony w całości. Dzięki poprawie algorytmu wyszukiwania, użytkownik nie otrzymywał już długiej listy niejasnych wyników – zamiast tego dostawał opcje najlepiej pasujące do wpisanej frazy, oparte na popularności. Użytkownik miał także możliwość ręcznego przeszukiwania interesujących go propozycji, a w przypadku niepowodzenia mógł wystawić swój przedmiot bez przypisanego wzoru. W takim przypadku angażował się dział obsługi klienta, który po sprawdzeniu zgłoszenia mógł skategoryzować wystawiany produkt lub stworzyć nową pozycję, tym samym rozwijając bazę szablonów platformy Vilandy.

Krok 2

Drugi krok dotyczył uzupełnienia informacji podstawowych i charakteryzował się znaczną poprawą jakości. Oprócz kwestii hierarchii wizualnej i architektury treści, wprowadziłem moduł dodawania zdjęć zgodny z obecnymi standardami, który umożliwiał zamianę kolejności oraz upload grup zdjęć. Opis produktu mógł być automatycznie uzupełniany przez algorytm AI na podstawie wcześniej wprowadzonych informacji, co stanowiło atut Vilandy w porównaniu do innych platform e-commerce. Wyraźnie oddzieliłem informacje opcjonalne od wymaganych. Aby zachęcić sprzedawców do ich uzupełnienia, zastosowałem prosty mechanizm gamifikacji, który aktywizował użytkowników komunikatami marketingowymi sugerującymi zwiększoną szansę sprzedaży po ich wypełnieniu.

Krok 3

Trzeci krok skupiał się na ustaleniu opcji dostawy. Posortowałem tematycznie kolejność wprowadzanych danych, aby wytworzyć bardziej naturalny ciąg logiczny. Dodałem też opcje sprzedaży, które były zgodne z projektowanym równolegle procesem checkout’u. Zaktualizowałem moduł i algorytm automatycznego wymiarowania przedmiotów pod kątem czytelności i obsługi dużej liczby produktów. Wykorzystałem przy tym wymiary oraz wagę pojedynczego przedmiotu w stosunku do parametrów przewozu poszczególnych dostawców.

Krok 4

Na koniec dodałem zbiorcze podsumowanie. Formularz nadał był rozbudowany, więc ważne było, aby sprzedawca mógł sprawdzić najważniejsze decyzje, podjęte w trakcie jego uzupełniania. Po wszystkim pozostało mu tylko wystawić przedmiot. Jeśli tego potrzebował, mógł także zapisać wypełniony formularz w swoich wersjach roboczych na przyszłość.

Wynik

Nowa wersja formularza była ogromnym krokiem naprzód. System szablonów i wyszukiwania produktów działał teraz dużo płynniej, co oznaczało mniej problemów dla użytkowników przy ich dodawaniu. Sam formularz przeszedł ogromną metamorfozę. Został uproszczony, a proces jego wypełniania był bardziej intuicyjny. Wprowadzone zmiany spotkały się z pozytywnym odbiorem ze strony klientów sklepu. Było to ogromną motywacją w pracy nad kolejnymi projektami.

Kolejnym krytycznym elementem, który wymagał mojej uwagi, była strona główna. Klienci nie byli zaangażowani w przeglądanie treści w sklepie. Szybko zniechęcali się i opuszczali witrynę. Pozyskiwani przez biznes sprzedawcy narzekali z kolei, że nie mogą efektywnie reklamować swoich produktów. Naprawa tego problemu była kluczowa do poprawy konwersji na ścieżce zakupowej.

Analiza problemu

Moim pierwszym krokiem standardowo był audyt strony głównej, a następnie desk research i przegląd benchmarków.
Moje działania ujawniły następujące problemy:

Wireframe

Przeprowadzona analiza pozwoliła mi podzielić zidentyfikowane problemy na 4 kategorie: nawigację, komunikację sprzedażową, kafle produktowe i budowę zaufania klienta (właściwie jej brak). Proces rozpocząłem od stworzenia wstępnych prototypów, które umożliwiły szybkie przedstawienie nowych rozwiązań oraz zaproponowanych mechanik interakcji. Po ich zaprezentowaniu i uzyskaniu wstępnej akceptacji od interesariuszy, przeszedłem do etapu projektowania szczegółowych makiet.

Następnie rozpocząłem pracę nad bardziej szczegółową strukturą poszczególnych komponentów, co pozwoliło mi na precyzyjne rozplanowanie elementów interfejsu i logiki nawigacji, stanowiąc solidną podstawę do dalszych iteracji i testów użyteczności.

Rozwiązanie

Oprócz rozwijania komponentów wykorzystywanych na stronie głównej, zmodyfikowałem komunikację na banerach, aby zwiększyć zainteresowanie klientów. Wprowadziłem różnorodną kolorystykę, dopasowaną do promocji i tematyki, co wzbogaciło wizualną komunikację i zachęcało klientów do dalszego przeglądania witryny. Dodatkowo, wdrożyłem mechanikę rolek produktowych, umożliwiając użytkownikom przeglądanie większej liczby produktów w ramach kategorii lub akcji promocyjnej, zanim będą zmuszeni przejść do konkretnego listingu.

Oprócz redesignu strony głównej wprowadziłem dodatkowe mechaniki promocyjne, takie jak popupy i angażujące belki reklamowe z licznikami, które zachęcały użytkowników do podjęcia decyzji. Ponieważ promocje i przeceny stanowią kluczowy motywator zakupowy, marketing firmy wymagał nowych sposobów komunikacji tych ofert.

Wynik

Zastosowane zmiany wprowadziły nową jakość na stronie głównej serwisu. Firma otrzymała zróżnicowane możliwości przyciągania uwagi użytkowników. Współczynnik konwersji zakupowej klientów poprawił się w znacznym stopniu (ok. 19%). Pojawiły się wśród nich też nowe, pozytywne opinie, dotyczące samego korzystania ze sklepu.