O Dr.Oetker

W ramach współpracy z firmą Dr.Oetker przeprowadziliśmy pełny redesign sklepu internetowego, dostosowując go do obecnie panujących trendów oraz standardów branży sprzedaży wysyłkowej. Naszym zadaniem było przeprowadzenie analizy ówczesnego sklepu Dr.Oetker, zaproponowanie zmiany architektury informacji oraz przygotowanie nowego layoutu sklepu zgodnego z wymaganiami klienta. Nowy sklep internetowy miał być nowoczesny, reprezentatywny oraz podkreślający profesjonalizm i kompetencje, jakie stoją za marką Dr.Oetker

Przebieg działania

Faza 1 – Start Projektu
Przeprowadzenie audytu i propozycja nowych rozwiązań. Wstępne rozmowy o redesignie całego sklepu internetowego.

Faza 2 – Analiza konkurencji
Zbieranie danych na temat działań, wyglądu oraz użytkowności konkurencyjnych serwisów.

Faza 3 – Funkcjonalny Prototyp
Stworzenie testowej i podglądowej wersji serwisu oraz analiza potrzeb.

Faza 4 – Usprawnienie funkcjonalności
Dostosowanie nowych modułów do potrzeb serwisu pod kątem lepszego doświadczenia UX.

Faza 5 – Testy użyteczności
Sprawdzanie strony pod kątem UX i nowych funkcjonalności wrowadzonych do sklepu.

Faza 6 – Start sklepu
Wdrożenie finalnej i gotowej wersji serwisu do użytku publicznego.

1.Dogłębny audyt sklepu.

Audyt stanowi kompleksową ocenę sklepu internetowego pod kątem głównych aspektów istotnych w branży e-commerce, jakimi są przyciąganie ruchu oraz generowanie sprzedaży. Pozwala sprawdzić, czy serwis odpowiada potrzebom odbiorców oraz co można zmienić, aby korzystanie z niego spowodowało wzrost satysfakcji klientów. Dodatkowo pozwala dobrać taki scenariusz optymalizacji sklepu, który spowoduje jednocześnie zwiększenie ruchu, jak i efektywność sprzedaży.
Pierwszym działaniem był szczegółowy przegląd sklepu oraz aktywności poza nim. Dzięki temu ustaliliśmy dokładny plan działania dopasowany do problemów, z którymi borykał się klient. Będąc w posiadaniu konkretnej wiedzy w tym temacie, przystąpiliśmy do działania i sukcesywnie wprowadzaliśmy nowatorskie rozwiązania.
Dr. Oetker poprzez hasło „Jakość przepisem na sukces“ pragnie wskazać na wysoką jakość wytwarzanych produktów. Zapewnia swoim produktom nie tylko wyjątkowy smak, ale również bezpieczeństwo produktów. Osiąga to poprzez staranne dobranie wysokiej jakości surowców, jak i zapewnienie surowych kryteriów jakościowych w procesie technologicznym. Istotne znaczenie przypisuje się również produkcji w warunkach akceptowalnych społecznie i przyjaznych środowisku.

2.Praca nad platformą e-commerce.

Serwisy o szerokiej skali działalności – nie tylko w skali kraju ale również poza nim – realizujące setki zamówień każdego dnia, potrzebują rozwiązań dopasowanych do ich indywidualnych wymagań, opartych o biznesową analizę celów i potrzeb klienta.
Aby oferta prezentowała się w sposób przejrzysty, wszystkie kategorie towarów zyskały unikatowy opis, który ułatwił nawigacje nowym użytkownikom i usprawnił proces zakupowy. Prosta i nieskomplikowana budowa serwisu ułatwiała klientom poruszanie się po platformie sprzedażowej, przyspieszyła przeglądanie produktów, oferują porównywanie opisów oraz płynne zarządzanie koszykiem i zamówieniami. Odpowiednie pozycjonowanie towarów wspiera prosta wyszukiwarka, lokująca produkty względem wielu sprecyzowanych przez użytkownika atrybutów. To wszystko wpływa na komfort przeprowadzania zakupów z poziomu mieszkania, bez potrzeby wychodzenia z domu, ale przede wszystkim jest gwarancją rzetelnej realizacji zamówienia.

W kontekście projektowania graficznego siatka jest narzędziem do zamawiania elementów graficznych tekstu i obrazów. Siatka układu jest strukturą dokumentu, na której umieszczane są obiekty. Pomaga upewnić się, że strony są jednolicie zaprojektowane i jest konceptualną pomocą w projektowaniu. Główną ideą projektów opartych na siatce jest stabilna wizualna i strukturalna równowaga stron internetowych, które można dzięki nim tworzyć. Zaawansowane struktury graficzne zapewniają większą elastyczność i poprawiają wrażenia wizualne zwiedzających. W rzeczywistości, użytkownicy mogą łatwiej śledzić spójność strony, a programiści mogą aktualizować układ graficzny w przemyślany i spójny sposób.

4.Nowa Szata Graficzna

Naszym zadaniem było zaprojektowanie oraz zaimplementowanie nowej szaty graficznej dla sklepu na platformie PrestaShop. Rzetelnie przeprowadzona analiza UX wykazała, że poprzedni layout sklepu był nieintuicyjny, co znacznie obniżało sprzedaż produktów.
Świeżym pomysłem poprawiającym atrakcyjność portalu było zastosowanie interaktywnych sliderów, czyli ruchomych zdjęć, które przekierowują do podstron ze szczegółowymi informacjami, przedstawiających aktualne promocje albo dodatkowe materiały umieszczonych w sklepie. Powoduje to, że nowi jak i starzy użytkownicy nie muszą przeszukiwać domeny pod kątem określonych danych, zwiększając komfort eksploracji sklepu. W wyniku naszych działań, powstał zupełnie nowy sklep internetowy, nawiązujący swoją kolorystyką do charakteru marki.

5.Opymalizacja UX

Po dopracowaniu technicznego aspektu strony nakład pracy skierowaliśmy na dopracowanie szaty wizualnej strony w celu poprawienia całości wrażeń, jakich doświadcza użytkownik podczas korzystania z produktu interaktywnego. Jednym z głównych celów było ujednolicenie sklepu i zadbanie o większe zasięgi, lepszą widoczność oraz wyższy wskaźnik SEO.
Zwiększyliśmy intuicyjność i przejrzystość strony, a także zespoliliśmy ją pod pod kątem kolorystycznym i funkcjonalnym. Jednak głównym założeniem było zastosowanie rozwiązań z zakresu Responsive Web Design, polegające na dostosowaniu i przepisaniu kodu źródłowego strony w taki sposób, aby sklep w pełni dostosowywał się do różnych atrybutów urządzeń na których będzie przeglądany. Szczególną uwagę poświęciliśmy płynnemu działaniu strony na urządzeniach iPhone oraz iPad, których kod jest bardzo wymagający. Takie zabiegi wpływają na poprawne wyświetlanie serwisu na każdym rodzaju urządzenia, ale również ułatwiają prace administracyjne związane z prowadzeniem strony i znacznie obniżają koszty jej utrzymania, a przede wszystkim sprawiają, że serwis jako całość jest mniej zasobożerny.

6. Poprawa mobilnej wersji sklepu internetowego.

W związku z rosnącą liczbą internautów, którzy coraz częściej dokonują zakupów za pośrednictwem urządzeń mobilnych, podjęliśmy się także niezbędnych prac nad poprawą wyglądu sklepu internetowego w wersji mobilnej. Dzięki temu znacząco zmniejszył się współczynnik odrzuceń osób pochodzących z ruchu mobilnego, co przełożyło się również na lepszy odbiór marki i wzrost zakupów.

7. Rozwój funkcjonalności.

Zapis do newslettera z pozycji dokonywania zakupów

W ramach współpracy dokonywaliśmy różnego rodzaju usprawnień istniejących już funkcjonalności sklepu internetowego. Jedną z nich było wprowadzenie możliwości zapisu do newslettera już z pozycji koszyka zakupowego, co wiązało się z brakiem konieczności powrotu do strony głównej sklepu, by stać się jego subskrybentem.

Karty produktu do wydruku

W wyniku rosnącego zapotrzebowania na wydruk informacji o konkretnym produkcie znajdującym się w sklepie internetowym, na poziomie karty produktu w sklepie online dodaliśmy przycisk umożliwiający otrzymanie wszystkich informacji o produkcie w wersji papierowej, opracowując również wygląd tego wydruku.

8.Google Analitics.

Google Analytics jest systemem statystyk zbierającym dane na temat użytkowników, którzy odwiedzają naszą stronę internetową. Jest to możliwe przez umieszczenie na stronie specjalnego kodu JavaScript, który w momencie wejścia użytkownika na stronę pobiera o nim istotne dane i przesyła je do Google Analytics. Zestawienie takich danych możemy później oglądać w formie różnych rozbudowanych raportów – gotowych, lub stworzonych przez nas. Interpretacja i analiza zbieranych przez nas danych może pomóc w poprawieniu i dostosowaniu zawartości sklepu do potrzeb odbiorców.

Zasadniczym zadaniem Google Analytics jest śledzenie ruchu na stronie, sprzedaży oraz konwersji. GA informuje między innymi o tym, jak zachowują się użytkownicy na stronie i pomaga określić, które elementy witryny przyciągają, a które odpychają potencjalnych klientów. Dla osób, które prowadzą firmę, dane te są znaczące przy podejmowaniu decyzji marketingowych. Prymarnym powodem, dla którego warto śledzić statystyki firmowej strony, jest sposobność oceny jej efektywności. Dzięki narzędziu Google Analytics dowiesz się, kim są, skąd pochodzą, czego szukają jej użytkownicy oraz czy znaleźli na Twojej witrynie to, czego oczekiwali. Te informacje pozwolą Ci wykorzystać w pełni potencjał strony internetowej.

9.Tworzenie banerów reklamowych i sliderów.

Slidery pozwalają na umieszczenie większej ilości treści na stronie, gdyż “nadmiar” jest niewidoczny. W tym przypadku są wykorzystywane do wyróżnienia najnowszych treści oraz do zaprezentowania najistotniejszych aspektów oferty sklepu. Najwięcej trudności sprawiło nam stworzenie optymalnego wzoru na którym, w późniejszym czasie, firma będzie budować swoje przyszłe oferty. Jednak po wielu konsultacjach udało nam się wypracować styl, który jest łatwy w edycji, przejrzysty i prosty do skomponowania z każdym rodzajem produktów.

Baner internetowy przede wszystkim powinien być spójny graficznie ze stroną i wizualną koncepcją marki – kolory, hasła i czcionki powinny ze sobą współgrać. By zwiększyć skuteczność reklam – projekt graficzny powinien być nietypowy i nie przypominać klasycznych reklam tylko wyróżniać się czymś charakterystycznym, czymś co przykuje nasze zainteresowanie. Kolejnym elementem który odgrywa ważną rolę w zwiększaniu zasięgów i który umieściliśmy w projektach – jest przycisk call-to-action.
Skuteczność baneru wyznaczana jest poprzez współczynnik klikalności, dlatego szczególną uwagę zwraca się na treści, które swoją unikatowością zachęcają internautów do konkretnych działań. Stosując takie rozwiązanie postawiliśmy na tym aby baner internetowy umieszczony na stronie był jak największy. Dlaczego? Przede wszystkim jest łatwiej zapamiętywany przez odbiorców. Pomijając ten fakt, zdjęcia o większych rozmiarach są również znacznie częściej klikane, dzięki czemu zwiększamy ruch na stronie.
Sukces tego rozwiązania opiera się na jego prostocie. Przede wszystkim łatwo jest go umieścić na stronie internetowej i łatwo jest go też modyfikować, nawet dla kogoś kto nie jest mistrzem CSS czy HTML.

Dr.Oetker wyróżnia się na tle e-commerce przede wszystkim funkcjonalnością i przejrzystością. Serwis internetowy jest przyjazny dla klienta na każdym etapie – od pierwszej wizyty, poprzez proces zakupowy, po złożenie zamówienia. W krótkim czasie wypracowaliśmy styl dla marki obecnej na polskim rynku jak również i za granicą. Wynikiem ciężkiej i skrupulatnej pracy jest atrakcyjna strona, która podkreśla wszystkie najlepsze cechy jakie posiada marka Dr.Oetker w rezultacie czego dostarczyliśmy zoptymalizowany sklep internetowy, wprowadzając firmę w zupełnie nowy rodzaj e-commerce.