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

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.

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.

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.

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.