Podczas konferencji UX Poland swoimi doświadczeniami z tworzenia serwisu superpharm.pl podzielili się Maciej Maćkowiak, Digital Development Manager w Super-Pharm oraz Rafał Niemczynowicz, Head of UX w GoldenSubmarine. Prelekcja na temat projektu nowego sklepu internetowego superpharm.pl zrealizowanego wspólnie z Super Pharm Poland i Exorigo-Upos.

1. Super-Pharm
z super UX-em.
Jak, w środku pandemii,
zaprojektowaliśmy od podstaw
nowy sklep internetowy dla jednej
z największych drogerii
działających w Polsce na rynku
e-commerce?

2. Co się wydarzyło
3 marca 2020 roku?
Pierwszy przypadek
Covid-19 w Polsce.

3. Co się wydarzyło
3 lutego 2020 roku?
Pierwsze rozmowy na
temat wdrożenia nowej
wersji e-commerce.

4. • Proces zmian w Super-Pharm zaczął się
w 2019 roku.
• Zainwestowaliśmy m.in. w narzędzie
do monitorowania cen.
• 4-krotnie wzrosła liczba osób w zespole
ds. digital! W tym pojawiłem się ja:)
• Byliśmy świadomi ograniczeń poprzedniego
systemu, który - choć działał - nie pozwalał
nam na dalszy rozwój, którego wszyscy
wewnątrz organizacji oczekiwali.
Strategiczny kierunek

5. • Bez przemyślanych i szybkich decyzji nie
byłoby szybkiego wdrożenia.
• Sprawność w podejmowaniu decyzji jest
czymś, co cechuje kulturę organizacyjną
Super-Pharm.
• Jako jedni z pierwszych ogarnęliśmy kwestię
lawinowego wzrostu zamówień w czasach
pandemii, zamieniając w 4 tygodnie 80%
sklepów w centra logistyczne!
Sprawne działanie

6. Chociaż podczas kwarantanny placówki stacjonarne Super-Pharm były cały
czas otwarte oraz wprowadzone zostały liczne rozwiązania gwarantujące
bezpieczeństwo pracowników i klientów, to ruch znacznie spadł. (…)
W ostatnim czasie odnotowaliśmy między innymi trzykrotny wzrost udziału
sprzedaży online w całościowej sprzedaży Super-Pharm.
Nasz e-commerce w ciągu dwóch miesięcy 2020 roku (marzec, kwiecień)
osiągnął taki wynik, jak w całym 2019 roku.
– Remigiusz Chrzanowski, Digital Director i członek zarządu Super-Pharm.
Super-Pharm
w czasie pandemii
500%
wzrost
2020 vs 2019
(średnia rynkowa 40%)
miesiące
sprzedaży
= wynik
za cały
miniony rok
2
wzrost
udziału
online
w sprzedaży
3x

7. Wróćmy jednak do
3 lutego 2020 roku…

8. Sprawdzeni partnerzy
To dzień, w którym po raz
pierwszy pojawił się
pomysł, by od samego
początku połączyć ze
sobą 3 firmy...
Discovery

9. • Kluczowy etap dla całej realizacji.
• 8 osób, 5 warsztatowych spotkań.
• Intensywna praca i przygotowania do
każdego z warsztatów.
• Otwarta komunikacja pozwoliła już na
etapie planowania uwzględnić i pogodzić,
wymagania biznesu i technologii z
założeniami dot. funkcjonalności i UX
serwisu.
• Uniknęliśmy w ten sposób wielu godzin
poprawek na etapie implementacji.
Discovery

10. Technologia
Biznes
Ownership
Siła współpracy
UX

11. • Rozmowa i wymiana doświadczeń kluczowa
dla ustalenia planu działania.
• Ogromna rola Product Ownera, który
rozumie i pilnuje tego, by z jednej strony
dowieźć oczekiwania biznesu, a z drugiej,
nie zapomnieć, że serwis projektowany jest
dla Klienta docelowego.
Ownership

12. Harmonogram
projektu
Luty – marzec 2020 Kwiecień – Czerwiec 2020 Maj - Listopad 2020 Listopad 2020 – Marzec 2021
STABILIZACJA
Zaprojektowanie i wdrożenie serwisu
zajęło nam niecały rok
DEVELOPMENT
UX/UI
DISCOVERY

13. • Makiety architektury sklepu i projekty interfejsu
liczyły około 400 widoków.
• Nad projektem pracowało 11 specjalistów ze
wszystkich obszarów.
• Przenalizowaliśmy 20 heatmap głównych
elementów sklepu.
• Obejrzeliśmy około 200 nagrań video z sesji
użytkowników w sklepie.
• Ponad 2 tys. wspólnie przepracowanych godzin
na etapie projektowania i developmentu.
Proces UX/UI
BOK

14. • Projektowanie będzie odbywać się równolegle
do wdrożenia.
• W praktyce projektowaliśmy z wyprzedzeniem
w stosunku do rozpoczęcia danego sprintu
zespołu deweloperskiego.
• Dzięki temu podejściu mogliśmy na bieżąco
weryfikować wykonalność projektów w
kontekście technologii.
• Nie musieliśmy tworzyć klikalnych prototypów,
co wpłynęło pozytywnie na szybką realizację
harmonogramu.
Zwinne
projektowanie

15. • Aby usprawnić pracę designerów i programistów
front-end stworzyliśmy style-guide, który reguluje
ogólne założenia (np. szerokość gridów, kolory,
styl ikonografii) oraz elementy budujące
interface użytkownika (np. wygląd przycisków
i elementów formularza).
• Style-guide pomógł nam także podczas procesu
projektowania: dzięki zbudowaniu odpowiedniej
biblioteki elementów, projektanci mogli szybko
tworzyć nowe ekrany z gotowych „klocków”.
Style-guide

16. UX/UI
Nowy serwis posiada przejrzysty
podział na różne części.
Każda z nich posiada nieco odmienną,
lecz spójną, warstwę wizualną.
Podział na 3 części wiąże się również
z zastosowaniem aż trzech poziomów
cen.

17. UX/UI
Nowy serwis posiada przejrzysty
podział na różne części.
Każda z nich posiada nieco odmienną,
lecz spójną, warstwę wizualną.
Podział na 3 części wiąże się również
z zastosowaniem aż trzech poziomów
cen.

18. UX/UI
Nowy serwis posiada przejrzysty
podział na różne części.
Każda z nich posiada nieco odmienną,
lecz spójną, warstwę wizualną.
Podział na 3 części wiąże się również
z zastosowaniem aż trzech poziomów
cen.

19. Widok produktów, został zaprojektowany tak, by z poziomu listingu danej
kategorii możliwy był wybór wariantu i szybkie dodanie go do koszyka.
Kafle
produktowe

20. Niezwykle ważnym elementem jest również dostępność 3 poziomów cen:
regularnej, promocyjnej i klubowej. Zalogowany użytkownik, który ma kartę
programu lojalnościowego, otrzymuje już spersonalizowane ceny widoczne
przy produkcie.
3 poziomy
ceny

21. Nowoczesna platforma typu
search & discovery
Wszystkie listy produktów prezentowane
w serwisie mają swoje źródło właśnie
w Algolii, więc konieczna była jej dobra
integracja z Magento.
Z myślą o wygodzie użytkowników
zastosowano w wyszukiwarce
podpowiedzi, które eksponują
najczęstsze podobne zapytania.
Algolia

22. Menu
W serwisie zastosowano rozbudowane
menu
Umożliwia ono szybki dostęp do
bestsellerów i nowości dla danej grupy
produktów.
Wszystko ma na celu skrócenie czasu,
jaki potrzebuje użytkownik na dodanie
poszukiwanego produktu do koszyka.

23. Bardzo szeroki zakres informacji.
Możliwość dodawania produktów do
koszyka prosto z historii poprzednich
zamówień.
Wykorzystanie natywnego rozwiązania
Magento w zakresie rekomendacji
produktowych opartego o AI – Adobe
Sensei.
Karta
produktu

24. Integracja Klubu LifeStyle z kontem programu lojalnościowego umożliwia
Klientom m.in. płynną realizację procesu zakupowego, zdobywanie
punktów lojalnościowych również za zakupy online, czy też szybki dostęp do
historii wszystkich zamówień w ramach jednego serwisu.
Klub
Lifestyle

25. Nowy projekt sklepu uwzględnił
oczekiwane przez klientów poszerzenie
informacji o sklepach stacjonarnych
– dane teleadresowe, status
otwarty/zamknięty czy dostępna pod
ręką mapka dojazdu.
Sklepy
stacjonarne

26. Udostępniliśmy alternatywną, wobec
kuriera czy odbioru w sklepie, opcję
odbioru w paczkomacie.
Jednocześnie dostarczając
podpowiedź dotyczącą optymalnej
lokalizacji takiego punktu.
Szybki proces zakupowy wraz z
wygodnym wyborem Paczkomatów
sprawił, że niemal 4 na 10 kupujących
wybiera tę właśnie metodę dostawy.
Paczkomaty

27. Zastosowaliśmy szybki podgląd koszyka,
który pozwala na sprawdzenie jego
zawartości bez opuszczania aktualnie
przeglądanej strony.
Pełny koszyk uwzględnia udogodnienia,
takie jak klarowny widok ceny
promocyjnej i regularnej, czy możliwość
zmiany ilości produktów lub dodania ich
do listy ulubionych.
Proces
zakupowy

28. • Dostosowanie layoutów do wymogów
Magento 2
• 20% więcej r/r zamówień, które składają
zalogowani użytkownicy.
• Wzrost członków Klubu LifeStyle wśród
kupujących na stronie o 46%
• 81% w audycie UX Google
• Pozytywny feedback ze strony dostawców,
którzy dostrzegają i doceniają świeży,
przejrzysty design, co przekłada się na
łatwiejsze biznesowe rozmowy i większą
chęć współpracy.
Rezultaty
300%
wzrost w 2 pierwsze
miesiące 2021 r/r

29. Co dalej?
• Wdrażamy nowe usług i ciągle
usprawniamy serwis. Kluczowe dla nas
są optymalizacja i innowacje.
• W centrum stawiamy użytkownika. Nie
chodzi bowiem tylko o piękne designy,
ale o to żeby to Klient końcowy, a co za
tym biznes miał z tego korzyść.
• Słuchamy użytkowników i usprawniamy
całą ścieżkę CX.

30. Dziękujemy!