Sklep I'M Motors jeszcze lepszy dzięki Magento Commerce

Historia marki

Imready.eu to platforma e-commerce uruchomiona w marcu 2018 roku przez I'M Inter Motors, firmę zajmującą się sprzedażą części i akcesoriów do motocykli. Jest to pierwsza i największa sieć sklepów w tej branży, wcześniej znana jako Inter Motors.

Szybkie wyzwanie

Naszym celem było stworzenie platformy sprzedażowej, która będzie reprezentować markę I'M Inter Motors po przejściu rebrandingu. Chcieliśmy rozszerzyć imready.eu (domenę nowego serwisu) nie tylko o funkcjonalność sprzedażową, ale także dać jej możliwość stania się miejscem spotkań i wymiany doświadczeń w społeczności motocyklowej.

Kluczowym czynnikiem był czas: projekt i jego realizacja musiały zostać upublicznione w ciągu 3 miesięcy. Ten pośpiech był wynikiem sezonu motocyklowego, który miał się wkrótce rozpocząć, czego marka nie chciała przegapić.

To był trudny czas i ogromny wysiłek naszego zespołu, ale udało nam się dotrzymać terminów. Ten projekt jest naszym osobistym rekordem, jeśli chodzi o czas realizacji, co więcej, jest to jedno z najszybszych wdrożeń w Europie - Borys Skraba, Strix CEO

Skupienie na personach

Przygotowując się do procesu projektowania, stworzyliśmy Persony (każdy segment klienta został przypisany do innej osoby z unikalnym imieniem, nazwiskiem i historią). Tak powstał Adam (początkujący fan motoryzacji o niskich dochodach), Łukasz (początkujący fan motoryzacji o wysokich dochodach) oraz Mariusz i Kuba (doświadczeni motocykliści o podobnych dochodach).

Persony są bardzo ważne, pozwalają nam wcielić się w potrzeby grupy docelowej. Dzięki temu projektanci lepiej wiedzą, dla kogo tworzą platformę.

Priorytetyzacja funkcji

Stworzyliśmy listę funkcji sklepu internetowego dla naszych person. Podczas tego procesu rozważaliśmy, jak będą się poruszać po stronie. Jakie są ich oczekiwania? Co może im pomóc w znalezieniu tego, czego szukają? Narzędzie Product Information Canvas pomogło nam usystematyzować naszą wiedzę i pomysły w tym zakresie. Musieliśmy również zdecydować, którą z tych funkcji włączyć do MVP. Po wspólnej dyskusji z naszymi programistami podjęliśmy ostateczną decyzję.

Architektura informacji

Stworzenie wykresu drzewka architektury informacji (flowchart AI) pomogło nam w określeniu wszystkich podstron, które musimy zaprojektować, ich zawartości oraz relacji między sobą.

Następnie wzięliśmy ołówki w dłoń i indywidualnie naszkicowaliśmy wygląd poszczególnych stron serwisu. Te pomysły zostały skonfrontowane na wspólnym spotkaniu i połączone w jeden, spójny projekt makiety.

Wiele firm pomija całą fazę przedprojektową. Moim zdaniem to ogromny błąd. Nawet w bardzo krótkim czasie jesteśmy w stanie solidnie się przygotować do stworzenia dobrego serwisu, zgłębić grupę docelową, zastanowić się, na czym powinniśmy się skupić podczas projektowania, co chcemy osiągnąć. Takie postępowanie pozwoli zminimalizować ryzyko różnych problemów w przyszłości - Marcin Piwowarczyk, Commerce Design Director, Strix VP

Design i copywriting

Projektowanie graficzne rozpoczęliśmy od zapoznania się z brandbookiem. Całość musiała być spójna zarówno w kanale online, jak i offline, czyli dużej sieci sklepów stacjonarnych.

I’M Inter Motors jest firmą odważną i otwartą, dlatego postawiliśmy na odważny copywriting. Koresponduje on zarówno z nowoczesnym stylem marki, jak i naciskiem na bycie w społeczności.

Skosy i kolorystyka podkreślają dynamiczny charakter marki. One również zostały odpowiednio wykorzystane w designie. Każdy zaprojektowany ekran poddawany był pod design review, czyli ocenę całego zespołu. Jeśli zaistniała taka konieczność, wprowadzaliśmy poprawki i kontynuowaliśmy pracę.

Prototyp

Całość została zaprezentowana klientowi w postaci prototypu w programie InVision. Dzięki temu możliwe było jego zdalne oglądanie i komentowanie. Ponadto wszystkie zmiany wprowadzane do projektu graficznego mogły być płynnie i na bieżąco wyświetlane na prototypie. Projektowanie w programie Sketch pozwala uniknąć sytuacji, w których część projektu jest już gotowa, a mimo to klient musi czekać na udostępnienie mu wersji, którą może obejrzeć.

Wdrożone rozwiązania

• Cloudinary - zintegrowaliśmy się z zewnętrznymi zasobami mediów oraz dodaliśmy opcję przełączania się między natywną galerią Magento 2 a mediami z zewnętrznych źródeł.
• Baza RODO - zintegrowaliśmy się z zewnętrznym serwisem dostarczonym przez klienta, przechowującym dane dotyczące zgód RODO.
• Paragony - napisaliśmy moduł umożliwiający dodanie obiektu graficznego paragon i zapisanie go w bazie danych, wraz z danymi tekstowymi. W przypadku wgrania przez klienta pliku PDF jest on automatycznie konwertowany do pliku jpg.
• Importer - umożliwiliśmy wgranie arkusza (np. w pliku csv) z produktami, które następnie zostają przesłane do Magento 2. Importer dokonuje również kompletacji produktu konfigurowalnego na podstawie produktów prostych oraz umożliwia klientowi ich aktualizację. W zadanych odstępach czasu następuje automatyczna aktualizacja cen i stocków na podstawie udostępnionego przez klienta widoku bazy danych.
• Obsługa cache - stworzyliśmy funkcjonalność kolejkowania czyszczenia full page cache - zbieramy wszystkie żądania czyszczenia cache i uruchamiamy je w jednym momencie.
• Usługa SMS - zintegrowaliśmy z infobip SMS-ami poprzez REST API
• Smile Elastic Search - zaimplementowaliśmy wtyczkę rozszerzającą możliwości wyszukiwania i filtrowania.
• Przelewy24 - integracja z usługą płatniczą.
• Ansible deployment - stworzyliśmy procedurę z wykorzystaniem technologii ansible, pozwalającą na uproszczenie i automatyzację procesu deploymentu.
• Gatling - napisaliśmy różne scenariusze i stworzyliśmy testy obciążeniowe i wydajnościowe.