Już ponad połowa użytkowników częściej przegląda strony na smarfonie, coraz większa grupa realizuje tam też zakupy. Na co zwrócić uwagę projektując stronę dla klientów mobilnych? Pokazaliśmy w case study wdrożenia dla Manta Polska.

1. www.atomstore.pl
Strona mobilna też sprzedaje!
Case study wdrożenia Manta

2. www.atomstore.pl
Trochę historii

3. www.atomstore.pl
Kiedy powstał m-commerce
● Początek XXI wieku
● Wapster, Papla i inne serwisy
do pobierania tapet i dzwonków
● Wiele z nich jeszcze istnieją!

4. www.atomstore.pl
Rozwój mobile
2013 rok pierwsze strony w wersji mobilnej
2014-2015 coraz więcej sklepów ma wersję mobilną, a RWD wciąż nieliczni
2017 ruch mobile przewyższył desktop

5. www.atomstore.pl
Założenia projektowe emanta.pl

6. www.atomstore.pl
Założenia projektowe sklepu emanta.pl
Target: mobilni klienci
Przejrzysty katalog produktowy dla użytkowników
Szerszy katalog zakupowy

7. www.atomstore.pl
Cele projektu - po co sklep Manta?
● Łatwy i szybki dostęp do szczegółowych informacji o produktach
● Wspieranie budowy wizerunku marki Manta jako nowoczesnej, polskiej
rodzinnej firmy
● Udostępnienie informacji na temat dostępności produktowej w sieci
dystrybutorów (mobilny katalog)
● Udostępnienie pełnej oferty, część rzeczy nie jest dostępna stacjonarnie lub
tylko w wybranych salonach (sprzedaż tylko online)
● Cele sprzedażowe nie są kluczowe (ważniejsi dystrybutorzy)
● Omnichannel

8. www.atomstore.pl
Dlaczego AtomStore?
● Obsługujemy średnie i duże e-commerce’y
● Posiadamy gotowe, zaawansowane moduły
● Mamy integracje m.in.: z Comarch Optima, XL, WF-Mag, Subiekt,
Allegro
● Mamy rozwiązanie All-in-One: marketing automation, kupony,
program lojalnościowy, personalizacje
● Wersja B2B
● Zoptymalizowany pod SEO

9. www.atomstore.pl
Przebieg wdrożenia - projekt gotowy w 3 miesiące

10. www.atomstore.pl
Klient first! Przygotowanie Persony
● Mieszkańcy mniejszych miast i wsi
● Fani nowości technologicznych, ale w niższej półce cenowej
● Młodzi ludzie (15-45)
● Słabszy dostęp do internetu
● Częściej korzystają z telefonu niż komputera
● Telefon używany w domu podczas oglądania TV,
na zakupach do porównania cen

11. www.atomstore.pl
Technologia mobilna
- jaka najlepsza?

12. www.atomstore.pl
Wybór technologii - wersja mobilna
ZALETY:
● Szablon mobilny jest lżejszy od wersji responsywnej
● Dobrze sprawdza się w przypadku klientów korzystających z rich phone-ów i prostych smartphone-
ów
● Nie wymaga ingerencji w istniejący szablon (rozwój desktop i mobile jest niezależny)
● Wiele systemów i platform oferuje gotowe wersje mobile za darmo lub za niewielką opłatą
WADY:
● Konieczność utrzymania 2 niezależnych wersji – nanoszenie nowych funkcji i zmian
● Problemy z duplicate content
● Wersja mobilna niekoniecznie dobrze sprawdza się w tabletach

13. www.atomstore.pl
Wybór technologii - wersja RWD
ZALETY:
● Brak problemów z duplicate content
● Utrzymanie tylko jednego szablonu – jeśli wprowadzamy nową funkcję (np. sekcje na stronie,
oprogramowujemy ją tylko 1 raz)
● Lepsze dopasowanie do szerokiej gamy urządzeń, w szczególności do tabletów
● Wiele frameworków wspierających tworzenie wersji responsywnych (np. bootstrap)
WADY:
● Większy (wolniejszy) rozmiar szablonu niż w przypadku wersji mobile
● Cięższe działanie na słabszych urządzeniach oraz połączeniu gsm
● W przypadku gdy nasz szablon sklepu ma już kilka lat, wdrożenie RWD może wymagać
zaprojektowania i oprogramowania szablonu od nowa

14. www.atomstore.pl
Wybór technologii - aplikacja mobilna
ZALETY:
● Lepsze dostosowanie do urządzenia
● Możliwość promocji w Apple Store czy Google Play
● Najczęściej szybsze działanie
● Efekt wizerunkowy, silniejszy wpływ na budowanie marki
WADY:
● Znacznie wyższe koszty stworzenia i utrzymania
● Duże przedsięwzięcie organizacyjne
● Zagrożenie iż aplikacja nie przebije się w sklepie Apple czy Google

15. www.atomstore.pl
Wybór technologii - aplikacja PWA
ZALETY:
● Zalety wersji RWD (dobre dopasowanie do urządzeń, rozwój jednej wersji)
● “Pseudo aplikacja” - dostęp do dodatkowych funkcji przeglądarki
● Zaawansowane możliwości cache-owania danych po stronie przeglądarki/urządzenia
● Bardzo szybkie działanie na mobile
WADY:
● Technologia jeszcze nie wspierana w pełni przez wszystkie przeglądarki
● Wyższe koszty wdrożenia i dłuższy czas realizacji
● Problemy na starszych wersjach przeglądarek

16. www.atomstore.pl
RWD - na co postawiliśmy nacisk?
● Szybkość ładowania
● Łatwość nawigacji
● Optymalizacja pod SEO
● Proste, mobilne zakupy

17. www.atomstore.pl
UX Mobile
dobre praktyki

18. www.atomstore.pl
Projektowanie pod dotyk, nie pod klik

19. www.atomstore.pl
Czytelne fonty

20. www.atomstore.pl
Nawigacja nastawiona na cel
● Strzałki informujące o rozwinięciu
● Strzałki powrotu
● X służący do zamykania

21. www.atomstore.pl
UX mobile priorytetyzacja elementów strony
● Linia zanurzenia nie tak istotna
● Klienci mobilni potrafią scrollować
stronę w dół
● Brak zakładek, tabów,
mikro informacji

22. www.atomstore.pl
UX mobile przejrzyste formularze
● Wykorzystanie checkboxów
zamiast pól otwartych
● Zminimalizowanie wyboru
● Koszyk bez dodatkowej rejestracji

23. www.atomstore.pl
Powrót do pisma obrazkowego

24. www.atomstore.pl
Karta produktu w formie “tasiemca”

25. www.atomstore.pl
Koszyk i krótka ścieżka zakupowa
● 2 kroki i gotowe
● Płatność BLIK-iem
● Jeden checkbox dla wyboru kuriera
● Tylko niezbędne dane
● Brak rejestracji

26. www.atomstore.pl
Efekty wdrożenia

27. www.atomstore.pl
65% Użytkowników pochodzi z Mobile!

28. www.atomstore.pl
A konwersja ciągle rośnie :)

29. www.atomstore.pl
Pozostałe efekty
● Strona przyjaźnie się indeksuje
● Użytkownicy doceniają nowoczesny design na mobile
● Ruch mobile - procentowo obecnie częściej korzystają z mobile
● Dystrybutorzy i handlowcy zaczęli korzystać ze sklepu zamiast panelu

30. www.atomstore.pl
M-commerce sprzedaje!
więcej danych

31. www.atomstore.pl
Preorder.pl - sprzedaż, czy tylko wizerunek?

32. www.atomstore.pl
Cocolita.pl - Sprzedaż, czy tylko wizerunek?

33. www.atomstore.pl
Jak wdrożyć m-commerce?
● Projektowanie UX ukierunkowane na użytkownika mobilnego a nie desktop
(na każdym etapie trzeba o nich pamiętać)
● Szybkość - na mancie dużo wizerunkowych materiałów a jest ok
(wykorzystanie lazy loading)
● Przejrzysty projekt, priorytetyzacja treści na stronie
● Poprawna struktura serwisu, dobre przekierowania w przypadku wersji
mobilnej i aplikacji.

34. www.atomstore.pl
PREZENT :)
20% RABATU na rok abonamentu w AtomStore

35. www.atomstore.pl
Dziękuję za uwagę
Monika Pabian
monika.pabian@atomstore.pl