Preorder.pl w wersji responsywnej

02.09.2013
Realizacje

Sklep Preorder.pl to jeden z najciekawszych sklepów w branży hip hop-owej w Polsce. We wrześniu 2013 uruchomiliśmy nową wersje sklepu w dostosowaną do urządzeń mobilnych.

 

Preorder.pl oferuje asortyment - w tym m.in. odzież, muzykę, akcesoria i gadżety oraz sprzęt. - związany z kulturą hip-hopu. Sklep należy do firmy Step, będącej jednocześnie właścicielem wytwórni muzycznej StepRecords. Można śmiało powiedzieć, że nasz klient jest liderem w swojej branży.

Preorder.pl w wysokim sezonie notuje ponad 900 tys odwiedzin miesięcznie:

Statystyki Preorder.pl

Źródło: Similarweb.com.

 

Cele nowego projektu
Preorder.pl korzysta z systemu AtomStore już od 2011 roku. Jest to jedno z pierwszych dużych wdrożeń systemu AtomStore w Polsce, obejmujące migrację z systemu i-sklep. Podczas jej przeprowadzania - ze względu na ograniczenia czasowe i finansowe - wykorzystano projekt dostarczony przez klienta. Chociaż posiadał pewne mankamenty funkcjonalne, zdecydowaliśmy się go wykorzystać, ponieważ priorytetem było jak najszybsze przeniesienie sklepu na platformę AtomStore. Przez kolejne miesiące sklep ewoluował, pojawiały się nowe funkcje wykorzystujące możliwości naszego systemu.

 

Grafika dotychczasowego sklepu:

 

Preorder - stara wersja

 


2 lata później wraz klientem podjęliśmy decyzje o konieczności stworzenia nowego szablonu. Główne cele, jakie postawiono przed nowym projektem, to:

  • nadanie sklepowi nowoczesnego, lekkiego charakteru,
  • dostosowanie projektu do szerszego asortymentu (mp3, odzież, sprzęt),
  • 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ęły się od przygotowania makiet nowego szablonu:

Makieta nowego preorder.pl

Makieta strony produktu

Po zakończeniu prac nad projektem funkcjonalnym, wraz z klientem rozpoczęliśmy prace nad kreacją graficzną. 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 bardziej widoczne.

Postanowiliśmy również znacząco powiększyć obszar wyszukiwarki oraz uprościć wygląd koszyka (jednocześnie dodając schowek, który w sklepie hip-hopowym 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 dwa główne działy. Dodaliśmy także dwie bardzo ważne ze względów sprzedażowych 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 otrzymał dostęp do najważniejszych informacji 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świecała redesignowi. Do listy produktów dołożyliśmy 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. Wyeksponowaliśmy m.in.:

  • informacje o dodatkowych korzyściach - dostawa gratis, gratis do wyboru, promocja cenowa,
  • sekcję koszyka wraz z wyborem wariantu,
  • ocenę produktu,
  • link do tabeli rozmiarów.

Powiększona została także sekcja galerii oraz pojawiła się 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ć, analizując konkretne liczby. 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,
  • spadła liczba odsłon (dzięki dodaniu listingu bez stronnicowania, 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

 

Jak widać, 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ł odpowiednio o 30% i 5%,
współczynnik konwersji dla komórek i tabletów wzrósł odpowiednio o 50% i 150%.

AtomStore to platforma e-commerce klasy premium. Tworzymy dedykowane sklepy internetowe oraz systemy B2B. Oferujemy kompleksowe wdrożenia od A do Z, sklepy mobilne w technologii responsive web design, integracje z programami Comarch Optima, XL, WF-Mag, Subiekt. Wspólnie rozwiązujemy problemy polskiego e-handlu!

Skontaktuj się z nami

  • 12 4420443
  • kontakt@atomstore.pl