Eyerim - Od startupu do lidera e-commerce
Jak Hatimeria zwiększyła konwersję sklepu online o 30%.
O firmie
Eyerim.com to lider w branży sprzedaży okularów w 14 krajach. W swoim asortymencie posiada ponad 75 marek i jest odwiedzany przez ponad 500 000 użytkowników miesięcznie.
Zespół Eyerim podjął współpracę z Hatimerią w celu podniesienia jakości swojego rozwiązania e-commerce. Poprzez przyspieszenie strony, ulepszenie interfejsu użytkownika (UI) oraz doświadczenia użytkownika (UX), firma skupiła się na zapewnieniu jeszcze lepszej obsługi swoich ponad 500 000 użytkowników miesięcznie.
Na początku 2019 roku rozpoczęła się trzecia runda zbierania funduszy przez eyerim, w ramach której pozyskała 1,5 miliona euro inwestycji! Zwiększyło to wartość e-sklepu eyerim do ponad 10 milionów euro.
Inwestorami, którzy wzięli udział w projekcie, byli 3TS Capital Partners, grupa, która była kluczowym partnerem eyerim i niesamowitym źródłem know-how w zakresie e-commerce od 2017 roku; oraz najnowsi inwestorzy z Polski: Inovo Ventures Partners, wspierający wyjątkowe startupy z Europy Środkowo-Wschodniej w osiąganiu globalnego “boomu“.
Źródło: Eyerim.com
O Eyerim pisali:
Zespół i proces
Eyerim jest naszym długoletnim klientem - zaczęliśmy kilka lat temu jako partner rozwojowy, a przez ostatnie kilka lat mieliśmy zaszczyt obserwować i uczestniczyć w tworzeniu tej niesamowitej, wiodącej marki w branży optycznej. Zespół Hatimerii składał się zarówno z programistów Frontend i Backend, jak i inżynierów DevOps, specjalistów UX, administratorów systemu i inżynierów QA. Dzięki zgromadzeniu wszystkich rodzajów umiejętności, byliśmy w stanie nie tylko opracować nowe funkcje - ale także współpracować wewnętrznie, aby aktywnie uczestniczyć w rozwoju Eyerim, stale poprawiając jakość rozwiązania e-commerce Eyerim.
Zaangażowanie różnych zespołów oznacza również, że jesteśmy w stanie uświadomić klientowi, co można zrobić lepiej, aby jego sklep sprzedawał więcej, jednocześnie poprawiając komfort korzystania ze sklepu.
Proces UX
Przed rozpoczęciem prac przygotowaliśmy wstępny plan działania
- 1Badania
- 2Analiza danych
- 3Zdefiniowanie problemów
- 4Zaproponowanie rozwiązań
Badania
W pierwszym kroku Hatimeria skupiła się na analizie bezpośrednich konkurentów online naszego klienta - podobnych sklepów internetowych. Zdiagnozowaliśmy ich wydajność w obszarach UI, UX i przepływu użytkowników na komputerach stacjonarnych i urządzeniach mobilnych.
Analiza danych
Następnie przeanalizowaliśmy wszelkiego rodzaju dane związane z użytkownikami, sposobem, w jaki poruszają się po stronie, biorąc również pod uwagę sposób, w jaki poruszają się na komputerach stacjonarnych i urządzeniach mobilnych.
Do przeprowadzenia analizy wykorzystaliśmy cztery narzędzia. Na podstawie danych jakościowych uzyskanych z Hotjar mogliśmy dowiedzieć się, gdzie użytkownicy napotykają problemy wynikające ze źle przygotowanego interfejsu lub o błędach programistycznych, które uniemożliwiały dostęp do koszyka. Hotjar pozwolił nam również przejrzeć typowe zachowania użytkowników.
Dane ilościowe dostarczone przez Google Analytics pozwoliły nam określić współczynnik odrzuceń i uzyskać informacje na temat urządzeń używanych do przeglądania produktów na eyerim.com. Dostarczył również bardzo pomocnych danych demograficznych.
Inżynierowie QA Hatimerii monitorowali również podstawowe, korzystając z NewRelic i Google Analytics. Zestawienie zebranych przez nich danych z wnioskami zespołu UX pozwoliło nam przygotować plan i ustalić priorytety.
Zdefiniowanie problemów
Po wstępnych wywiadach z użytkownikami Hatimeria zdefiniowała kilka głównych problemów
- 1Filtry na urządzeniach mobilnych nie były intuicyjne.
- 2Informacje o produkcie na karcie produktu były inaczej nazwane w koszyku.
- 3Użytkownicy chcieli mieć możliwość sprawdzenia, jak wygląda produkt na różnych etapach ścieżki zakupowej.
Następnie przeprowadziliśmy analizę ekspercką, która wskazała nam kolejne problemy do rozwiązania:
- 1Długi czas ładowania strony i odpowiedzi serwera.
- 2Brak opisów w polach wprowadzania i wyboru.
- 3CTA ukryte poniżej zakładki.
- 4Użytkownicy mający problem z powrotem do zakupów po usunięciu produktu z koszyka.
- 5Osoby uciekające z koszyka po kliknięciu na zdjęcie produktu w koszyku.
Proces UX
Przed rozpoczęciem prac przygotowaliśmy wstępny plan działania.
- 1UX I UI
- 2Persona
- 3DevOps
- 4Testowanie
Persona
Chcieliśmy dowiedzieć się, jacy użytkownicy odwiedzają naszą stronę. Dlatego zdecydowaliśmy się na zbudowanie persony - fikcyjnej postaci, która reprezentuje typ użytkownika. Pomogło nam to odzwierciedlić i zrozumieć działania prawdziwych użytkowników. Byliśmy w stanie zdefiniować proto-personę w krótkim czasie dzięki klientowi, który dostarczył nam szeroki zakres danych analitycznych i podzielił się swoją opinią.
Kira/Stan
Kira/Stan
Andil
Andil
UX & UI Design
Usprawnienia DevOps
Równolegle z pracą zespołu UX & UI, nasz zespół DevOps przeanalizował dane uzyskane w początkowej fazie Blackfire i NewRelic. Zidentyfikowaliśmy wąskie gardła i zaplanowaliśmy ich niwelację we współpracy z administratorami serwerów. Najważniejszymi punktami, które przyczyniły się do zwiększenia wydajności sklepu eyerim.com były:
- wdrożenie ElasticSearch do pracy ze stronami kategorii i przyspieszenie ich działania
- optymalizacja wydajności zapytań SQL na stronie kategorii, produktu i stronie głównej
- poprawa wykorzystania pamięci podręcznej w celu odciążenia bazy danych
- ulepszenie frontendu (obrazy, CSS, kompresja) zgodnie z zaleceniami specjalistów Google
- optymalizacja indeksatorów i innych zadań w tle, które powodowały błędy zakłócające działanie sklepu
- usunięcie niepotrzebnych rekordów z bazy danych, aby uczynić ją lżejszą
- ogólne czyszczenie serwera w celu usunięcia niepotrzebnych plików spowalniających operacje IO
- ogólne czyszczenie skryptów JS w celu usunięcia skryptów, które były niepotrzebne lub powodowały błędy i zwiększały czas ładowania strony
- ogólny przegląd transakcji internetowych, identyfikacja podejrzanego/niepotrzebnego ruchu i jego redukcja Ponadto wyeliminowaliśmy liczne błędy, które nie spowalniały strony, ale miały wpływ na jej dostępność, np: awarie serwera i niedostępny serwer. Przeprowadzone przez Hatimerię prace przyniosły pozytywne zmiany w:
- ładowaniu strony
- czasie odpowiedzi
- czasie działania serwera
Moment, w którym wdrożyliśmy usprawnienia
Czas transakcji/wydajność
Współczynnik konwersji a czas ładowania
Odnotowaliśmy wzrost współczynnika konwersji o prawie 30%, porównując drugi kwartał 2017 roku (1,45%) z drugim kwartałem 2018 roku (1,87%). Z kolei analizując pierwszy kwartał 2018 roku (1,69%) z drugim kwartałem, widzimy znaczny wzrost o ~ 12%. Wzrost konwersji jest silnie powiązany ze spadkiem czasu ładowania strony i czasu odpowiedzi serwera. Poniższy wykres pokazuje, jak zmniejszył się czas ładowania strony między pierwszym a drugim kwartałem 2018 roku.
Testowanie
Na każdym etapie wdrażania zmian nasz zespół QA dbał o to, aby wprowadzane przez nas zmiany były perfekcyjne pod każdym względem.
Wnioski
Współpraca z Hatimerią odegrała kluczową rolę w przekształceniu Eyerim.com ze startupu w lidera branży e-commerce okularów.
Pod czujnym okiem Hatimerii zidentyfikowano kluczowe problemy użytkowników, takie jak nieintuicyjne filtry i długi czas ładowania strony, a następnie skutecznie je rozwiązano. Wdrożone rozwiązania przyniosły imponujący wzrost konwersji o 30%, co było wynikiem skrócenia czasu ładowania strony.
Klient o współpracy z nami:
“Mamy naprawdę dobry osobisty kontakt z Bartoszem, a zwłaszcza z Michałem Wujasem, drugim współzałożycielem. Naprawdę doceniam to, jak działają i jak zbudowali firmę. Podoba mi się kultura ich firmy. Największym plusem i tym, co mi się podoba, jest to, że są firmą IT specjalizującą się wyłącznie w Magento i e-commerce, czyli dokładnie tym, czego potrzebujemy. (...) Zawsze są proaktywni, jeśli chodzi o bezpieczeństwo. Naprawdę podoba mi się ich dążenie do elastyczności, szybkości strony i szybkości ładowania (...).“ Martin Zahuranec CEO, eyerim