Jak przeprowadzić redesign strony internetowej: E-commerce?

Redesign strony internetowej, po której poruszają się tysiące aktywnych użytkowników, to zawsze wymagający (i ekscytujący!) projekt dla projektantów. W poniższym artykule chcielibyśmy przedstawić nasze podejście projektowe do redesignu jednego z najpopularniejszych serwisów z ogłoszeniami online w Polsce - Gumtree.

W poszukiwaniu usług lub aktywności, tysiące użytkowników wchodzi na Gumtree. Odkąd serwis ten wystartował w 2004 roku, polska strona nie przeprowadziła jeszcze masowego redesignu. Dlatego postanowiliśmy spróbować tego w Softnauts! Sprawdź ten artykuł i zobacz jakimi środkami udało nam się ulepszyć tę popularną stronę.

1. Przeprojektowanie witryny - zapoznanie się z jej funkcjonowaniem i obecnymi użytkownikami

W trakcie fazy odkrywania staramy się rozpoznać ogólny wygląd, cele witryny oraz jej najbardziej wartościowe strony. Zadajemy sobie pytania "3-W":

1. Kto korzysta z usług firmy? 
2. Dlaczego to robi? 
3. Jakich stron potrzebuje w pierwszej kolejności, aby osiągnąć swój cel? 

Pytania "3-W" są istotną częścią naszej strategii. Dzięki nim możemy przygotować merytoryczny fundament dla dalszych rozwiązań. Zdefiniowanie głównych celów każdego projektu ma duży wpływ na niemal każdy jego aspekt. Może to być wdrożenie funkcji lub przyszła strategia marketingowa oraz ogólnie pojęty branding firmy.

Według studium przypadku Google, istnieją cztery typowe motywy użytkowników: 

1. 'Chcę wiedzieć', 
2. 'Chcę iść' ,
3. 'Chcę zrobić', 
4. 'Chcę kupić'. 

W pierwszej kolejności analizujemy aktualną efektywność strony internetowej, pozycjonowanie w sieci, targetowanie i misję firmy. Kolejnym krokiem jest przeprowadzenie niezbędnych praktyk badawczych UX, takich jak testy użyteczności, analiza konkurencji i badanie grupy docelowej. Przeprowadzamy wywiady z użytkownikami, a także czytamy komentarze online i recenzje stron. Te działania przybliżają nas do zrozumienia, jak osiągnąć i podnieść satysfakcję klienta. 

Wynikiem tej fazy jest nowa treść, architektura i strategia marketingowa strony. Jak widać, pierwszy krok jest kluczowy dla dalszego rozwoju projektu. Dlatego też na tej fazie kładziemy szczególny nacisk.

Redesign strony internetowej Gumtree rozpoczęliśmy od analizy większości tych czynników, rozmów z unikatowymi użytkownikami strony oraz badania mediów społecznościowych i opinii klientów online. Dowiedzieliśmy się, że niektórzy z nich (zwłaszcza młodsi) uważają, że projekt jest nieco przestarzały, więc czasami wybierają konkurencyjne strony, takie jak OLX. Uważają, że filtry są trudne w użyciu; gubią się również w licznych podkategoriach. Ogólnym celem naszego redesignu jest umożliwienie bardziej intuicyjnej nawigacji, a także unowocześnienie wyglądu strony.

2. Redesign strony internetowej - burza mózgów i  mood-boarding

Jako zespół projektowy, staramy się połączyć nasze wizje redesignu. W tym momencie naszym celem jest unowocześnienie ogólnego wyglądu i odczucia strony internetowej; pracujemy nad redesignem logo, fontami i propozycjami stylu. Budujemy również bazę dla przyszłego nowego systemu projektowania. Jako projektanci najczęściej korzystamy z tablic inspiracji i socialów, takich jak Dribbble czy Pinterest. Warto też pamiętać o specyficznej kolorystyce, która może mieć różne interpretacje w różnych krajach.

Burza mózgów to technika, na której często opiera się środowisko projektantów. Dobrze przeprowadzona sesja burzy mózgów jest źródłem spontanicznych, kreatywnych pomysłów. Jest to również dobry grunt dla nieprzerwanego procesu myślowego, który może prowadzić do zaskakujących rezultatów. Wykorzystując tę technikę w naszej pracy, dokładnie rozważamy każdy pomysł. To pozwala nam krytycznie spojrzeć na zdefiniowane wcześniej problemy i ich potencjalne rozwiązania.

3. Ulepszenia UX Design

Redesign strony internetowej E-commerce jest ma swoją specyfikę. W tej szczególnej kategorii stron internetowych, praktyki projektowania UX muszą być ukierunkowane bezpośrednio na kupujących, często w różnym wieku. Architektura informacji musi być intuicyjna, produkty zaś - wyraźnie wyszczególnione (i otwierane w nowej karcie), a strony nie mogą być zbyt przeładowane.

Na obecnej stronie Gumtree określiliśmy pięć głównych obszarów wymagających poprawy użyteczności:

1. Strona główna musi bardziej koncentrować się na procesie wyszukiwania - dlatego umieściliśmy pasek wyszukiwania w centrum ekranu, wraz z przyciągającym wzrok obrazem drzewa.
2. Przeglądane kategorie - niektóre z istniejących kategorii mają wyjątkowo mało aktywnych ogłoszeń, takich jak Łodzie i pojazdy wodne czy Zdrowie i uroda. Te kategorie mogą być zebrane razem jako kategoria Inne. Kategorii głównych nie powinno być więcej niż dziesięć.
3. Przeprojektowanie formy zamieszczania ogłoszeń - uczyniliśmy ją bardziej przejrzystą, jednak chcieliśmy pozostawić większość obecnych funkcjonalności. Położyliśmy większy nacisk na cenę i zdjęcia zamieszczanego ogłoszenia. Priorytetowo potraktowaliśmy treść i dodaliśmy pod nią funkcję mapy.
4. Przeprojektowane filtry - obecnie podczas wyszukiwania mieszkania użytkownicy nie mogą wybrać wielu opcji (tj. mieszkań 2 i 3 pokojowych) w tym samym momencie, co jest mylące i czasochłonne. Filtry są również zależne od kategorii - niektóre z nich wymagają powiększenia, a niektóre tylko drobnych poprawek w ramach testów użyteczności.

Wykonanie tych czterech kroków gwarantuje, że redesign strony będzie estetyczny. Poprawi się również jej funkcjonalność, co doprowadzi do bardziej satysfakcjonującego doświadczenia użytkownika. Takie rozwiązania często upraszczają ogólną strukturę strony. Ale jak widzimy w przypadku Gumtree, czasami mniej znaczy więcej. 

Narzędziem, które pomoże w przygotowaniu nowej wersji strony internetowej, jest  dla specjalistów UX/UI.

4. Zmiany w UI Design

Redesign strony internetowej wiązał się również ze zmianami wdrożonymi w projekcie UI. Ostateczne decyzje podejmujemy po etapie poprawek UX, biorąc pod uwagę opinie użytkowników z fazy odkrywania i badania.

W przypadku Gumtree zminimalizowaliśmy wizualizacje brandingowe - szczególnie grafikę logo, zastępując ją prostszą ikoną. Musieliśmy zachować skojarzenia z drzewem - pamiętając, że nazwa pochodzi od lokalnego australijskiego zwrotu oznaczającego drzewo eukaliptusowe. Wybraliśmy bardziej żywy i nowoczesny odcień zieleni, ponieważ zauważyliśmy, że użytkownicy mają tendencję do kojarzenia marki Gumtree z zielenią - i polubili tę paletę kolorów. Mając to na uwadze, podkreśliliśmy również słowo "drzewo", kolorując je na zielono.

Profesjonalne, nowoczesne strony internetowe wykorzystują palety kolorów zgodne z najnowszymi trendami ( zobacz Pantone Color of the Year), a także oparte na badaniach założenia dotyczące psychologii koloru. Aby przekonać się, jak poszczególne odcienie mogą wpływać na Twój nastrój lub pogląd na określone marki, sprawdź także nasz artykuł na ten temat Psychologia kolorów w UX/UI.

5. Redesign strony internetowej - testy z użytkownikami 

Po długich przygotowaniach osiągnęliśmy fazę prototypu. Produkt zawiera teraz kluczowe funkcjonalności, dzięki czemu możemy wypuścić nowo zaprojektowaną stronę do testów z użytkownikami. 

Teraz pojawią się odpowiedzi na nasze pytania. Czy nasze pomysły znalazły podstawy w rzeczywistości? Czy rozwiązują wszystkie z wcześniej zdefiniowanych problemów? Umożliwiając przeprowadzenie testów na docelowej grupie odbiorców, możemy poprzeć wyniki danymi, aby uzyskać kompleksowe rezultaty odzwierciedlające rzeczywisty stan aplikacji.

Aby testy strony były w pełni miarodajne, powinny uwzględniać również wersje mobilne i tabletowe. Odbiorcy korzystający z tych formatów urządzeń stanowią zazwyczaj dość duży procent całości. Nie bez znaczenia jest również ich komfort użytkowania, co pozwoli nam na wydanie dobrze dopracowanej aplikacji. 

Treść strony internetowej musi być zbudowana pod kątem optymalizacji SEO. Tym razem również staraliśmy się połączyć spostrzeżenia z różnych źródeł, aby jak najlepiej odkryć  potencjalne rozwiązanie tego aspektu.

Redesign strony internetowej Gumtree - wnioski

Redesign strony internetowej Gumtree potraktowaliśmy jako sposób na przedstawienie naszego przepływu pracy. Do najbardziej krytycznych aspektów tego procesu możemy zaliczyć:

• Zdefiniowanie potrzeb,
• Burzę mózgów,
• Określenie obszarów do poprawy UX,
• Zmiany w projekcie UI,
• Testowanie prototypu.

W ostatecznym rozrachunku ten eksperyment zakończył się spektakularnym sukcesem! Nowy projekt strony jest bardziej intuicyjny i estetyczny. Dostarcza również funkcjonalności w sposób, który poprawia ogólne doświadczenia użytkownika.

Jeśli interesuje Cię redesign strony Gumtree - w tym przebieg całego procesu - sprawdź nasz nowy post na Behance. W nim znajdziesz więcej szczegółów na temat przeprojektowanych ekranów aplikacji.

Chcesz oprzeć swoją stronę internetową o rzeczowy, staranny prototyp? Postaw na doświadczenie Softnauts - oferujemy takie usługi, jak:

• Projektowanie UX/UI aplikacji,
• Warsztaty Discovery.