DobreNarty – rozwiązania UX dla sklepu sportowego
Dobre Narty powstały z inicjatywy pasjonata sportu, narciarza i triathlonisty Kuby Lenczowskiego. Swoją przygodę z biznesem rozpoczął od znanej narciarskiej giełdy przy Rotundzie w Krakowie, na której sprzedawał używane narty. Dzisiaj zakres asortymentu marki to ponad 20 000 produktów, w których znajdziesz już nie tylko narty. W ofercie jest dostępny sprzęt, z którego można korzystać przez cały rok. W ten sposób narciarz może cieszyć się aktywnością fizyczną o każdej porze roku.
Jaki był cel projektu?
Podczas audytu poprzedniego sklepu internetowego okazało się, że dysponuje on przestarzałym i niezoptymalizowanym silnikiem sklepowym. W efekcie sklep online miał problemy z funkcjonowaniem w nowoczesnym obszarze technologicznym. Brakowało zarówno odpowiedniego rozwiązania UX strony i responsywności. Ścieżka zakupowa finalnego klienta również nie była zoptymalizowana i intuicyjna. Z tego powodu naszym głównym celem projektu było przekształcenie dotychczasowego sklepu online na wyspecjalizowany sklep sportowy na PrestaShopie, który spełniałby wszelkie oczekiwania klienta.
Jakie było nasze całościowe podejście do projektu?
Uważamy, że sklep internetowy wymaga od pracowników holistycznego podejścia do marki i biznesu online. Z tego powodu działania z Dobrymi Nartami rozpoczęliśmy od warsztatów, na których pracowaliśmy nad celami biznesowymi i długofalowymi założeniami dla marki. Ustaliliśmy wspólnie zarówno kierunek rozwoju biznesu, jak również omówiliśmy zakres grup asortymentowych i ich podział oraz charakterystykę. W ten sposób zbudowaliśmy nową platformę sprzedażową opartą o strategię biznesową zakładającą globalne skalowanie biznesu. Następnie odpowiednio dopasowaliśmy projektowanie użyteczności strony internetowej: stworzyliśmy projekty graficzne widoków i zaprogramowaliśmy sklep online tak, aby działał zgodnie z długofalowymi celami marki.
Kolor jest równie ważny jak długość nart
Każda grupa produktowa charakteryzuje się inną specyfiką i parametrami wyszukiwania, jak również odmiennym sposobem myślenia klienta finalnego o produkcie. Właśnie dlatego przyjrzeliśmy się ówczesnym kartom produktowym oraz przeanalizowaliśmy konkurencję. Po skrupulatnej obserwacji, dobraliśmy parametry filtrowania produktów w sposób maksymalnie wydajny i prosty w obsłudze dla potencjalnego klienta.
Efektem filtrowania produktów może być konwersja albo frustracja klienta.
Jakie były wyzwania podczas realizacji projektu?
Dopasowanie szablonu do potrzeb grupy docelowej
Poprzednia wersja sklepu internetowego Dobre Narty działała na podstawowym szablonie, dlatego pomijała potrzeby grupy docelowej i zasady projektowania UX i UI. Przekaz graficzny sklepu online tworzył wrażenie hurtowni sportowej, a nie wyspecjalizowanego sklepu sportowego w kategorii sportów zimowych czy sklepu sportowego z całorocznym asortymentem.
Identyfikacja wizualna marki
Zaczęliśmy od początku i wspólnie z klientem podjęliśmy decyzję o przygotowaniu nowego logo marki, księgi znaku i identyfikacji wizualnej. Tak przygotowany materiał stał się naturalną bazą do świadomego budowania widoków graficznych sklepu. Przygotowane w sposób przemyślany logo, typografia, dobór kolorystyki ma kluczowy wpływ na odbiór marki przez klientów. Ostre i mocne linie logo kojarzą się z dynamiką, jaka towarzyszy uprawianiu sportów zimowych. Klientami sklepu są ludzie żyjący w ruchu, korzystający ze sprzętu, który jest synonimem aktywności i wolności. Sklep, w którym robią zakupy, również powinien przywoływać takie skojarzenia.
Integracje z wewnętrznym oprogramowaniem marki
Dodatkowym dla nas wyzwaniem było zbudowanie sklepu internetowego w taki sposób, aby dobrze funkcjonował w systemie wykorzystującym konkretne oprogramowanie w biznesie. Oznaczało to odpowiednią integrację z oprogramowaniem księgowo-magazynowym Navireo, jak również kilku systemów płatności i systemów ratalnych. Wymagało to też rozdzielenia sprzedaży offline (sklep stacjonarny) od sprzedaży online (dobrenarty.pl).
Optymalizacja pod mobile
Cały czas pamiętaliśmy, że sklep online ma być narzędziem do rozwoju biznesu. Z tego powodu zoptymalizowaliśmy sklep Dobre Narty pod wyszukiwarkę Google, co oznacza, że opracowaliśmy strukturę treści i wdrożyliśmy linkowanie wewnętrzne. Podczas wdrożenia nowych rozwiązań stworzyliśmy także dedykowane widoki mobilne, które ułatwiają zakupy z poziomu smartfonów.
Jak zmierzyliśmy się z tymi wyzwaniami?
Analiza potrzeb biznesowych
Zaczęliśmy od analizy potrzeb biznesowych marki, która pozwoliła określić cel nadrzędny sklepu internetowego Dobre Narty. Sklep miał stać się skutecznym narzędziem sprzedażowym i miejscem opiniotwórczym dla klienta finalnego. Ustaliliśmy też, że potrzebujemy zbudować silną markę w internecie. Dobry sklep online to połączenie marki i jej wartości oraz narzędzi remarketingowych (np. system reflinkowy i lojalnościowy czy wtyczka cart reminder). Dopiero taka synergia zapewnia ostatecznie stworzenie skutecznej platformy sprzedażowej.
Optymalizacja e-sklepu i procesów biznesowych
Najtrudniejszym wyzwaniem było przygotowanie nowej wersji platformy w taki sposób, aby spełniła oczekiwania grupy docelowej. Nasze główne założenia do działania wiązały się z przygotowaniem sklepu online uwzględniającego rozwiązania UX i ustalenie procesu projektowania. Dodatkowo określiliśmy potrzeby biznesowe w kontekście uruchomienia nowego sklepu online. Konieczna była również optymalizacja procesów wewnątrz firmy takich jak np. określenie sposobu zarządzania magazynem i przepływu informacji czy też wyznaczenie osób odpowiedzialnych za obsługę klientów finalnych w kanale internetowym.
Jakie osiągnęliśmy efekty?
Odświeżona marka i poprawa wydajności strony www
W wyniku podjętych prac stworzyliśmy nowoczesny e-commerce, a ze strony kojarzącej się z hurtownią sportową zrobiliśmy odpowiednie miejsce dla pasjonatów sportu. Wydajność strony internetowej mierzona narzędziem PageSpeed Insights wynosi obecnie 98/100. Sklep online posiada rozbudowany zakres produktów (20 000 produktów oraz ok. 300 kategorii). Funkcjonują w nim 3 systemy płatności i 12 zewnętrznych integracji.
Dostosowanie sklepu pod mobile
Zadbaliśmy również o wersję mobilną, która jest w pełni responsywna względem urządzeń przenośnych. Przeanalizowaliśmy stronę internetową za pomocą narzędzia BrowserStack, aby wyeliminować problemy z wyświetlaniem się strony na różnych urządzeniach przenośnych – komórkach i tabletach. Dostosowaliśmy też proces zakupowy do urządzeń mobilnych poprzez koszyk One Page Checkout oraz zoptymalizowaliśmy filtry pod kątem użyteczności na urządzeniach mobilnych. W dalszym ciągu przeprowadzamy analizę ruchu i korzystania ze strony za pomocą narzędzia HotJar.
Zdjęcia w formacie WebP i ikony w formacie SVG
Dodatkowo zadbaliśmy o jakość zdjęć oraz ikon i grafik w mobilnej wersji strony internetowej. Zdjęcia przystosowaliśmy do wyświetlania w nowoczesnym formacie WebP oraz zadbaliśmy o ich dobre wyświetlanie się na ekranach o różnej gęstości. Użyte na stronie ikony osadziliśmy za pomocą formatu wektorowego SVG, przez co są czytelne bez względu od używanego urządzenia.
Funkcjonalności techniczne, czyli działanie sklepu online w detalach
Udogodnienia dla klienta finalnego i partnerów marki
System reflinków
Umożliwia on wygenerowanie specjalnego kodu dla twórcy internetowego. Dzięki niemu można mieć większe możliwości niż takie, które daje zwykły kod rabatowy. Premiuje on zarówno klienta finalnego, jak i twórcę internetowego. Przykładowo 10% wartości sprzedaży jest przekazywane dla twórcy, a 10% na rabat dla klienta finalnego.
System lojalnościowy
System ma zadanie informować na stronach produktów o punktach przyznawanych dla klientów finalnych. System lojalnościowy jest przedstawiony w formie ikony diamentu, a jego zadaniem jest przeliczanie zebranych punktów albo na złotówki, albo umożliwienie klientowi wybrania gratisowego produktu za przyznane punkty. Wspiera on działania remarketingowe, ponieważ nagradza on stałego klienta za zakupy.
Wdrożenie PayPo
System płatności PayPo jest nowością ułatwiającą zamawianie produktów w sklepach online. Klient finalny otrzymuje zamówienie, za które może zapłacić do 30 dni po zakupie bez dodatkowych kosztów. Z tego rozwiązania korzystają znane sklepy sportowe m.in. InterSport, Sklep Biegacza czy Decathlon.
Content marketing
Treści w zakładce Usługi przedstawiliśmy w formie infografik, co zwiększyło ich przejrzystość i atrakcyjność. Dodatkowo stworzyliśmy poradnik Skiturowe ABC, w którym są zarówno porady dotyczące skitury dla początkujących, jak i ulokowane produkty.
Wyszukiwarka na stronie
Wyniki w wyszukiwarce generują się już podczas najechania kursorem na konkretną frazę produktów. Dodatkowo pojawiają się one w trzech grupach: produkt, kategoria, marka. A podczas wpisywania szukanej frazy, całość szybko się zmienia nawet przy dużej bazie produktów. Dzięki temu wyszukiwarka ułatwia i upłynnia wykorzystywanie systemu przez użytkowników.
Rodzaje wtyczek
Cart reminder
Wtyczka działa w formie powiadomień e-mail i pop-up, wspierając działania remarketingowe. Pop-up z unikalnym kodem rabatowym pojawia się, wtedy kiedy użytkownik doda produkt do koszyka, a następnie kontynuuj przeglądanie e-sklepu. Z kolei e-mail wysyła się po 48 godzinach od dodania produktu do koszyka i opuszczeniu sklepu online. Obydwie formy mają za zadanie zachęcić potencjalnego klienta do powrotu do porzuconego koszyka i finalizacji procesu zakupowego.
Komentarze do produktów
Wtyczka umożliwia dodawanie opinii o produktach i wystawieniu im oceny w formie gwiazdek. W ten sposób dotychczasowi klienci dzielą się swoimi wrażeniami z korzystania produktu, co zwiększa szansę na jego sprzedaż wśród nowych odbiorców. Dodatkowo użytkownik zostaje cały czas w sklepie internetowym i nie musi szukać opinii w innych miejscach w sieci.
Sposoby integracji
Google Tag Manager
Wdrożenie menedżera tagów Google połączyliśmy z wprowadzeniem HotJar i Google Analytics. W ten sposób na bieżąco monitorujemy zachowania użytkowników i optymalizujemy poszczególne elementy sklepu, przeprowadzając audyt użyteczności z zastosowaniem tych narzędzi.
Google Analytics Enhanced Ecommerce
Jest to system służący do analizy procesu zakupowego, wdrożony za pomocą menedżera tagów Google. Integracja jest niestandardowa, ponieważ wymaga większych nakładów pracy w sposobie przygotowania strony i kodu. Jest ona jednak opłacalna, ponieważ pogłębia wiedzę o zachowania użytkowników w sklepie online.
Dropshipping
Dropshipping ułatwia sprzedaż produktów partnerów, kiedy sklep internetowy nie posiada ich w swoim magazynie. W ten sposób Dobre Narty pośredniczy w dystrybucji produktów różnych marek bez ponoszenia kosztów magazynowania. Na ten moment jedynie 10% e-sklepów wdraża takie rozwiązanie.
Case study
Jubiler Sezam
VegeHome
