Blog agencji interaktywnej NetArch

 
17.45, 17 Wrzesień, 2013
 
  Redesign sklepu – Preorder.pl w wersji reponsywnej!

AtomStore - system e-commerceSklep Preorder.pl to jeden z najciekawszych sklepów w branży hip hop-owej w Polsce. Sklep należy do firmy Step, będącej jednocześnie właścicielem wytwórni muzycznej StepRecords, można więc powiedzieć iż znajduje się bardzo blisko serca polskiego hip hopu (właściciele sklepu znają branże jak mało kto w Polsce).

Cele dla nowego projektu
Preorder.pl korzysta z naszego systemu od ponad 2 lat. Było to jedno z pierwszych dużych wdrożeń które wykonaliśmy na AtomStore (migracja z systemu i-sklep). Migrując sklep na nasz system wykorzystaliśmy projekt graficzny dostarczony przez klienta.

Projekt od początku miał pewne mankamenty funkcjonalne – ponieważ otrzymaliśmy gotową grafikę, wiele z funkcji dostępnych w Atomie a pasujących do profilu sklepu nie zostało zaprojektowanych. Przez kolejne miesiące sklep ewoluował, a my wraz z klientem dodawaliśmy nowe funkcje.

Grafika dotychczasoweego sklepu:

Preorder - stara wersja

Preorder - stara wersja

W zeszłym roku doszliśmy do punktu, w którym potrzeby i funkcje osadzone w starym projekcie po prostu się nie mieściły. Na początku tego roku zapadła decyzja! Robimy nowy projekt graficzny.

Główne cele jakie klient stawiał nowemu projektowi były to:

  • dostosowanie projektu do szerszego asortymentu (mp3, odzież, sprzęt),
  • nadanie sklepowi nowoczesnego, lekkiego charakteru,
  • poprawa użyteczności przez zwiększenie przejrzystości sklepu, eliminację zbędnych ozdobników, uproszczenie nawigacji,
  • wykorzystanie i ekspozycja funkcji AtomStore takich jak opinie o produktach, gratisy do produktów, gratisy do koszyka, kupony rabatowe, landing pages, program lojalnościowy,
  • optymalizacja layoutu pod względem szybkości ładowania,
  • wzrost konwersji,
  • dostosowanie do mobile (szablon responsywny – RWD).

Nowy Preorder.pl
Prace rozpoczęliśmy od przygotowania makiet nowego szablonu.

Makieta nowego preorder.pl

Makieta strony produktu

Po zakończeniu prac nad projektem funkcjonalnym, do stworzenia nowej grafiki sklepu zaprosiliśmy Dominika Bloka z Blokdesign (między innymi DeeZee.pl, Fleq.pl).

Projektując nowy sklep zdecydowaliśmy się na wprowadzenie belki górnej i likwidację lewego menu. Dzięki temu 4 kategorie główne wraz z działami takimi jak bestsellery, nowości oraz wyprzedaże stały się zawsze dostępne i widoczne.

Znacząco powiększyliśmy obszar wyszukiwarki oraz uprościliśmy sekcje koszyka (jednocześnie dodając schowek, który w sklepie hip hop-owym może być wykorzystywany do zakupów w przyszłości). Wyszukiwarka została rozszerzona o nowoczesne podpowiedzi, umożliwiające bezpośrednie przeskoczenie do produktu.

Podpowiedzi w wyszukiwarce na Preorder.pl

Strona główna została podzielona na 2 główne działy, dodaliśmy także 2 bardzo ważne ze względów sprzedażowe sekcje - promocje tygodnia i produkt dnia.

Na listingu produktów wprowadzone zostały opisy kategorii wraz z linkami do głównych wykonawców i marek (to ukłon w stronę SEO). Dotychczasowe ciężkie i niewielkie boksy produktowe zostały zastąpione przez duże, dynamiczne (efekty onMouse) i efektowne elementy prezentujące produkty.
Z pozycji listingu klient otrzymuje najważniejsze informacje na temat produktu (nazwę, cenę, markę, datę premiery, dostępne rozmiary, informację o ewentualnych promocjach – np. gratis, dostawa za free) jednocześnie listing udało się utrzymać w prostej i przejrzystej konwencji jaka przyświetlała redesignowi.

Lista produktów otrzymała także belkę umożliwiającą wygodne filtrowanie oraz mechanizm doczytywania produktów bez przeładowania strony.

Preorder - lista produktów RWD

Strona produktu także uległa znaczącemu uproszczeniu. Wyeksponowane zostały takie informacje jak:

  • informacje o dodatkowych korzyściach – dostawa gratis, gratis do wyboru, promocja cenowa,
  • sekcja koszyka wraz z wyborem wariantu uległa znaczącemu uproszczeniu i powiększeniu,
  • dodano dużą informacje o ocenie produktu,
  • wyeksponowano link do tabeli rozmiarów.

Powiększona została także sekcja galerii oraz pojawiła się duża, wyraźna sekcja gratisów do produktu.

Karta produktu - responsive web design

Także koszyk przeszedł metamorfozę. Znacząco zmieniła się nie tylko kolorystyka ale także i układ.

Wybór formy dostawy i sposobu płatności dostosowany został do ścieżki zakupowej w AtomStore. Dodana została także bardzo wyraźna sekcja wyboru gratisu do zamówienia oraz podsumowanie wraz z rozbiciem poszczególnych kosztów.

Koszyk w sklepie Preorder

Mobile i konwersja na pierwszym miejscu

O efektach prac opowiada Marek Szekely, project manager w Preorder.pl odpowiedzialny za redesign po stronie klienta – “Jednym z kluczowych celów wdrożenia było przygotowanie szablonu w wersji responsywnej (RWD), czyli takiej która pozwala na dopasowanie layoutu sklepu do rozmiaru i możliwości urządzeń mobilnych.

Target sklepu to ludzie młodzi, mobilni, zajawieni nowymi technologiami. Sklep więc musiał wyjść naprzeciw oczekiwaniom swoich klientów.

Drugą niezwykle istotną kwestią było zwiększenie zaangażowania użytkowników oraz poprawa konwersji. Efekty jakie udało nam się osiągnąć przewyższyły znacząco nasze oczekiwania.”

Efekty wdrożenia

Czy redesign można udać za sukces? My jesteśmy bardzo zadowoleni i dumni z rezultatów :) ale o efektach najlepiej dyskutować na bazie liczb.

Poniżej kilka danych ze statystyk, które mogą stanowić dobre podsumowanie wdrożenia (porównanie 3.09 – 16.09 do 20.08 – 2.08):

  • średni czas spędzony na stronie wzrósł o 58% => wzrost zaangażowania,
  • jednocześnie spadła liczba odsłon (to łatwo wytłumaczalne faktem iż dodaliśmy listing bez stronnicowania – tak więc klienci szybciej docierają do szukanych informacji),
  • wzrost przychodów o 80%,
  • wzrost transakcji o 111%,
  • wzrost współczynnika konwersji o 67%.

Porównanie statystyk 2 tygodnie od uruchomienia nowej wersji sklepu:

Statystyki sklepu Preorder.pl

Wzrost współczynnika konwersji (trend):

Współczynnik konwersji - trend

Wydaje się więc, iż koszt wdrożenia zwrócił się już w ciągu kilkunastu pierwszych dni :)

Dodatkowo warto podkreślić iż:

  • ruch z komórek i tabletów wzrósł o 30% i 5%,
  • współczynnik konwersji dla komórek i tabletów wzrósł o 50% i 150%.

Mamy nadzieje, iż nowy Preorder będzie stanowił jasny punkt na mapie polskiego e-commerce. Oceńcie sami wchodząc na stronę preorder.pl :)


Łukasz Plutecki
 
 
 
 
 
Preorder.pl w wersji RWD – mocny case! | Kanały rss nowe napisał(a):

[…] artykułu nt. redesignu sklepu Preorder.pl. Wpis pojawił się także na blogu NetArch (http://www.netarch.com.pl/blog/redesign-sklepu-preorder-pl-w-wersji-reponsywnej/). Wszystkich śledzących obie strony od razu przepraszam – wpis zawiera jednak wiele […]

 
Zostaw komentarz