hero
logo

Zaprojektowanie nowej wersji sklepu dla znanej marki modowej

Charakterystyka klienta

Marka VENEZIA już od ponad 20 lat oferuje najmodniejsze obuwie, torby, kurtki i dodatki zarówno dla kobiet, jak i mężczyzn. Firma prowadzi ponad 70 butików stacjonarnych oraz sklep internetowy, który pozwala na wygodne zakupy bez wychodzenia z domu. Od początku działalności Venezia.pl współpracujemy z marką. To my stworzyliśmy pierwszy sklep internetowy dla butiku, a w 2022 roku uruchomiliśmy kolejną - nową odsłonę strony, aby klientom Venezia.pl zaproponować sklep w oparciu o najnowocześniejsze trendy i technologie.

Główne cele

Nasza firma stworzyła dla marki Venezia pierwszy sklep internetowy, więc mogliśmy pozwolić sobie na zaprojektowanie od podstaw witryny uwzględniając nowe trendy i technologie. Uruchomiony sklep został stworzony w oparciu o najlepsze możliwe praktyki projektowania, czyli brainstorming oraz persony.

Problemy i wyzwania

Skala przedsięwzięcia i wieloaspektowość projektu ustawiły poprzeczkę bardzo wysoko już na samym początku. Od strony User Experience i projektu interfejsu dużym wyzwaniem było zaprojektowanie samej architektury informacji. Kluczowe kwestie, które musieliśmy rozwiązać na tym etapie to zaprojektowanie intuicyjnej nawigacji, przejrzystej i czytelnej karty produktu oraz przebudowanie koszyka. Ostatni element wymagał usunięcia bolesnych punktów poznanych w trakcie badań UX poprzedniej wersji sklepu, zachowując przy tym zgodność z systemem zarządzania treścią, który towarzyszył klientowi od początku istnienia w Internecie.

  • Zaprojektowanie nowoczesnej karty produktu.
  • Usprawnienie procesu składania zwrotów przez klientów.
  • Przyspieszenie obsługi zwrotów i reklamacji przez magazyn.
  • Zwiększenie możliwości zarządzania banerami.
  • Stworzenie modułu stylizacji.
  • Przygotowanie sklepu do wdrożenia omnichannel.

Kickoff meeting

W trakcie pierwszego spotkania z zespołem pracującym nad sklepem internetowym przygotowaliśmy i przeprowadziliśmy wywiady dotyczące oczekiwań klienta odnośnie nowej wersji sklepu, oraz odczuć i słabych punktów związanych z obecną wersją. Przeanalizowaliśmy wspólnie zachowania użytkowników i na tej podstawie stworzyliśmy Proto-persony.

Faza poznawcza – analiza porównawcza rynku

Aby osiągnąć zamierzone cele niezbędne było wykonanie badań z zakresu analiz porównawczych konkurencji. Przeanalizowaliśmy dziesiątki platform największych marek modowych w poszukiwaniu dobrych praktyk, ale i ciekawych pomysłów. Cały proces projektowania skupiał się na potrzebach i wygodzie użytkownika, dlatego jednym z pierwszych kroków było określenie kim są nasi modelowi użytkownicy i stworzenie person UX.

Biblioteka Style Guide

Dobrym zwyczajem projektowym jest przygotowanie na samym początku pracy dokumentacji określającej styl i zachowanie poszczególnych elementów wyglądu przyszłego produktu. Ułatwia i przyspiesza to realizację projektu na każdym z etapów, dodatkowo jasno scharakteryzowany styl pozwala w przyszłości tworzyć dodatkowe elementy zachowując spójność.

Prototypowanie & Design

Kolejnym krokiem prac było przygotowanie interaktywnych makiet. Na podstawie opisanego wcześniej stylu komponentów zaprojektowaliśmy interaktywny prototyp, który posłużył do dalszych badań użyteczności oraz był punktem wyjściowym we wdrażaniu nowej wersji sklepu Venezia.

Przejrzysta lista produktów

Zaprezentowanie obszernej oferty produktowej sklepu z tak charakterystycznym asortymentem, skierowanym do szerokiej grupy docelowej oraz jednoczesne zachowanie charakteru marki zawsze stanowi swego rodzaju wyzwanie.

W trakcie procesu projektowego podjęliśmy decyzję o umieszczeniu podkategorii w poziomej belce nad produktami, same produkty zaś zaprezentowaliśmy w formie dużych, wyraźnych zdjęć. Obsługa sklepu może również umieszczać filmiki zamiast zdjęć.

Intuicyjna karta produktu

Jednym z ważniejszych założeń projektu było przygotowanie karty produktu w taki sposób, aby każdy z wzorcowych klientów (wyłonionych w trakcie tworzenia person) potrafił bezproblemowo dokonać wyboru produktu oraz intuicyjnie przenosił go do koszyka.

Wykorzystaliśmy dostępną przestrzeń na bardzo wyraźne prezentowanie produktu, a wszelkie rozpraszacze ograniczyliśmy do minimum.

Najprostszy koszyk, jaki stworzyliśmy

Koszyk w sklepie internetowym to najważniejszy element. To właśnie na etapie projektowania tego kroku zakupowego projektant doświadczeń użytkownika musi podjąć kluczowe decyzje. Jeśli klient próbujący dokonać zakupu utknie w dowolnym momencie finalizowania swojego zakupu to możemy być pewni, że koszyk zostanie porzucony, a bardzo możliwe, że taki klient nigdy więcej nie zdecyduje się na powrót do naszego sklepu.

Właśnie dlatego postanowiliśmy maksymalnie uprościć nasz koszyk, co oznacza, że zrezygnowaliśmy z wyświetlania wszystkich elementów, które nie są niezbędne do finalizacji zakupu. Dodatkowo, aby klient miał pewność, że w koszyku znajdują się wszystkie zamówione przez niego produkty, wyświetliliśmy duży panel z podsumowaniem zakupu.

Elastyczny konfigurator banerów

W związku z tym, że kolekcje obuwia zmieniają się dosyć często, zaprojektowaliśmy prosty system zarządzania banerami na stronie głównej sklepu internetowego. Szybki i intuicyjny moduł layoutu umożliwia personelowi Venezii dokonywanie na bieżąco zmian promowanej oferty produktowej. Elastyczny konfigurator banerów pozwala na stworzenie w pełni responsywnych banerów z możliwością przypisania osobnego zdjęcia do wersji mobile. Zaprojektowany przez nas mechanizm działa w bardzo prosty sposób na zasadzie drag and drop i nie wymaga od personelu sklepu żadnej wiedzy informatycznej.

Automatyczne przyjmowanie zwrotów

Zaprojektowanie formularza dla klienta, służącego do automatycznego przyjmowania zwrotów w sklepie okazało się bardzo ważną i potrzebną funkcją. W branży fashion standardem jest oferowanie klientom bezpłatnego, łatwego zwrotu produktu, dlatego nowy projekt sklepu musiał zakładać maksymalne uproszczenie tego procesu.

Wdrożyliśmy formularz, który ułatwia klientom nadanie zwrotów. Automatyczne zamawianie kuriera i generowanie dokumentu RMA - później wykorzystywanego w magazynie, usprawnia proces przyjmowania zwrotów i zwiększa poziom zadowolenia klientów ze świadczonych przez sklep internetowy usług. Dodatkowo klientowi zaproponowaliśmy wprowadzenie aplikacji do zarządzania zwrotami, aby zautomatyzować również przyjmowanie produktów na magazyn.

Aplikacja na Android i iOS

Wykorzystując technologię PWA i TWA stworzyliśmy aplikację Venezia dostępną w sklepach App Store i Google Play Store. Progressive Web App to strona internetowa wywołująca wrażenie działania jak natywna aplikacja mobilna, dzięki czemu użytkownicy mogą dodać ją do głównego ekranu smartfonów. Google z kolei opracowało technologię TWA — Trusted Web Activity, która polega na załadowaniu strony PWA jako aplikacji na Androida. W ten sposób klienci jeszcze wygodniej mogą przeglądać kolekcje, robić zakupy czy sprawdzić trasę do najbliższego sklepu stacjonarnego.

  • Automatyczne aktualizacje.
  • Lekkość — aplikacja PWA zajmuje znacznie mniej miejsca niż aplikacje natywne.
  • Ułatwienie zakupów poprzez wzrost jakości doświadczeń dla użytkowników.
  • Zmniejszenie się współczynnika odrzuceń i wzrost konwersji.
  • Powiadomienia PUSH.
  • Standaryzacja i zmniejszenie kosztów developmentu.

Wdrożenie strony PWA jest znacznie tańsze oraz zajmuje mniej czasu niż w przypadku natywnej aplikacji mobilnej. W stronach nie trzeba wprowadzać osobnych zmian, ponieważ są automatycznie aktualizowane. Największą jednak zaletą jest uzyskanie wysokich pozycji w wynikach wyszukiwania Google, ponieważ sklep online jest lepiej zoptymalizowany, szybszy oraz pochodzi z zaufanego źródła.

teaser2
teaser2
teaser2
Netgraf
Opcjonalnie
Zamknij
Opcjonalnie