Chcesz przenieść sklep na nową platformę, ale nie wiesz jak to zrobić? Wszystkiego dowiesz się z e-booka "Migracja sklepu" Pobierz teraz

Case Study

Cocolita.pl - największa drogeria przyspiesza z nowym layoutem

Cocolita.pl to jedna z największych drogerii internetowych. Miesięcznie notuje około milion użytkowników w swoim sklepie internetowym. Dzięki konsekwentnej strategii biznesowej i marketingowej, zostawia w tyle takie marki jak Drogeria Natura czy MintiShop.

 

Cocolita działa na systemie AtomStore od 2014 roku. W 2020 właściciele sklepu zdecydowali się przebudować szablon sklepu, aby:

  • uspójnić i poprawić doświadczenie klientów (UX) podczas zakupów,
  • stworzyć wyróżniający się na tle konkurencji layout sklepu zgodny z zasadami Responsive Web Design, w oparciu o podejście do projektowania mobile first,
  • uzupełnić sklep o nowe funkcje systemu AtomStore,
  • poprawić szybkość wczytywania się strony,

oraz zwiększyć przyjemność z zakupów online.

 

 

Michał SzmigielskiChief Project Officer

Duża konkurencja oraz coraz bardziej wymagający konsument w branży beauty wymaga ciągłego dbania o najlepszy user experience podczas robienia zakupów. Oprócz szerokiego wyboru metod płatności, dostawy oraz atrakcyjnej oferty, liczy się spójne doświadczenie na różnych typach urządzeń. Nowa Cocolita powstała w zgodzie z zasadą mobile first, aby zapewnić najwyższą użyteczność na smartfonach, które generują nawet połowę zamówień w sklepie.

 

Zmiana szablonu i wykorzystanie innowacyjnych narzędzi oraz technologii szybko przełożyły się na wysokie wzrosty w sprzedaży na urządzeniach mobilnych (wzrost YoY): 

16% więcej zamówień na mobile

+4% wzrost wartości koszyka na smartfonie

 

Najlepsze doświadczenie zakupowe na smartfonie

70% ruchu i ponad 50% zamówień w sklepie Cocolita.pl pochodzi ze smartfonów. Zatem najważniejszym wyzwaniem było zaprojektowanie nowego szablonu sklepu zgodnie z zasadami Responsive Web Design. Pierwsze szkice rozpoczęliśmy od widoku ekranu smartfona, zgodnie z zasadą mobile first. Dopiero później zaprojektowaliśmy makiety desktopowe.

 

 

Naszemu zespołowi udało się osiągnąć efekt, w którym drogeria Cocolita oferuje tak samo doskonałe doświadczenie zakupowe zarówno na smartfonie, jak i desktopie. Zespół e-commerce po stronie klienta zyskał również nowe funkcjonalności. Może dowolnie zarządzać wyglądem sklepu m.in.:

  • dynamicznie wyświetlać spersonalizowane rekomendacje zakupowe na stronie głównej,
  • zarządzać wyświetlaniem treści na strony głównej (content, produkty, treści) w zależności od kalendarza contentowego, a nawet urządzenia!
  • dodawać banery, które są dostosowane pod mobile,
  • kierować ruch do najpopularniejszych kategorii w postaci kapsułek.

 

 

Banery wyświetlane na urządzeniu mobilnym to nie efekt skalowania obrazu. To oddzielny projekt graficzny stworzony na potrzeby niewielkiego ekranu
 

Zespół grafików oraz UX designerów zaprojektował na nowo ścieżkę zakupową klienta (tutaj pozostaliśmy wierni koszykowi podzielonego na dwa etapy). Rezygnując z menu dolnego w wersji mobile, dopracowaliśmy do perfekcji nawigację, która pozwala płynnie przenosić się do kategorii i podkategorii oraz korzystać z funkcji wishlisty, konta użytkownika i koszyka.

 

Michał SzmigielskiChief Project Officer

Podczas wdrożenia nowego layoutu sklepu projektanci postawili nacisk na łatwość obsługi, przejrzystość sklepu oraz przyjazną ścieżkę zakupową. Oprócz tego, wykorzystujemy możliwości silnika personalizacji AtomStore. Przypominamy klientom, co ostatnio wzbudziło ich szczególne zainteresowanie w sklepie oraz prezentujemy wysoce spersonalizowane rekomendacje zakupowe.

 

Odczuwalne przyspieszenie wczytywania się strony

Cocolita to 30 000 produktów, ponad 50 00 zamówień oraz prawie milion użytkowników miesięcznie na stronie. Architektura systemu AtomStore pozwala na bezproblemową obsługę takiej liczby operacji. Projektując nowy szablon sklepu, wykorzystaliśmy najnowsze techniki webowe, które pozwoliły maksymalnie przyspieszyć działanie frontu sklepu. Jak udało nam się to osiągnąć? Oto trzy powody:

 

1. Architektura systemu e-commerce AtomStore

Skrypt AtomStore pozwala na zaimplementowanie nowych rozwiązań i technik z zakresu front-end.

 

2. Lazy loading i najnowsze techniki webowe

Szablon oprogramowaliśmy w taki sposób, aby był maksymalnie lekki dla przeglądarek. Zastosowaliśmy m.in. technikę lazy loading, czyli doczytywania zdjęć wraz ze scrollowaniem ekranu przez użytkownika

 

 

3. Skalowalność infrastruktury serwerowej

Zasoby i infrastruktura serwerów pozwala obsłużyć duży ruchu oraz dynamicznie dostosowuje się do bieżącego zapotrzebowania.

 

Nowe, inteligentne funkcjonalności w sklepie

Wraz ze zmianą szablonu, wzbogaciliśmy sklep o kilka nowych funkcji, które oferujemy w ramach systemu AtomStore.

 

Inteligentna i bardzo szybka wyszukiwarka Cloud Smart Search

Bazując na silniku elasticsearch, znanego m.in. z Netflixa czy Vimeo, potrafi wyszukiwać do 12 razy szybciej niż standardowe rozwiązania oparte o bazy danych. Poza tym, Smart Search świetnie wychwytuje ludzkie błędy oraz jest dostosowany pod smartfony.

 

Wyszukiwarka Cloud Smart Search działa szybko (nawet z obrazkowymi podpowiedziami) oraz pozwala wyeliminować typowe błędy w pisowni, np. literówki, przez co korzystanie z niej jest bardzo przyjemne
 

Sortowanie produktów w oparciu o własne algorytmy

Algorytmy sortowania pozwalają administratorowi sklepu swobodnie zarządzać kolejnością wyświetlania produktów w sklepie, uwzględniając więcej niż jedno kryterium. To lepsze rozwiązanie niż priorytety, znane z konkurencyjnych rozwiązań e-commerce. Algorytmy pozwalają zautomatyzować pracę i zaoszczędzić czas.

 

Landing page oraz widgety produktowe dla marketingu

Kolejną ciekawą funkcjonalnością dla działu marketingu są elastyczne landing page i widgety produktowe. Te pierwsze pozwalają stworzyć dowolną stronę w sklepie w kilka chwil (od strony głównej aż po FAQ czy stronę z konkursem). Widgety produktowe to nakładki, które można stosować na karciu produktu i listingu. Informacje na nich zawarte zwiększają szansę sprzedaży.

 

 

Udoskonalona odsłona Cocolity, mobilna, lekka i przejrzysta może równać się ugruntowanymi markami retail. Oferuje równy poziom wygody i personalizacji. Najlepiej świadczą o tym wyniki sprzedaży w samym sklepie.

 

Michał SzmigielskiChief Project Officer

Wszystkie procesy biznesowe w Cocolicie podporządkowane są wysokiej jakości obsługi klienta i automatyzacji procesów. Takie cechy musiał spełniać również nowy design sklepu zaprojektowany przez nasz zespół AtomStore. Wspólnie uważamy, że efekt końcowy jest bardzo dobry, o czym świadczą wyniki sprzedażowe - 14% więcej zamówień YoY i stale rosnący ruch na mobile.

 

To nie koniec współpracy z Cocolitą. Przed nami kolejne sklepy do stworzenia, rekordy do pobicia i rynki do zdobycia! Zobacz też case study, o tym jak to wszystko się zaczęło >> Migracja Cocolity z ClickShop na platformę e-commerce AtomStore.

 
AtomStore jest dostawcą systemu e-commerce. Nie odpowiada za zarządzaniem sklepem internetowym. W dniu publikacji tych informacji wyniki dla sklepu mogą znacząco się różnić ze względu na grafiki czy zaimplementowane narzędzia śledzące.
Spodobał Ci się ten case?

Chciałbyś się dowiedzieć, czy AtomStore rozwiąże Twoje problemy ze sklepem internetowym? Zostaw nam kontakt do siebie - niezwłocznie oddzwonimy do Ciebie.

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!

Znajdź nas na:

  • Blog
  • Facebook
  • Youtube
  • Linked in
  • iab