W trzeciej i ostatniej części serii o migracji eCommerce omówimy temat integracji zewnętrznych, które są często niezwykle cennymi elementami sklepów eCommerce. Ułatwiają one wiele procesów i poprawiają doświadczenia klientów, oferując dodatkowe funkcje i możliwości, których platforma eCommerce sama w sobie może nie wspierać. Dodatkowo opiszemy także jak przygotować projekt sklepu internetowego.


Spis treści


Integracje z systemami zewnętrznymi

We współczesnym cyfrowym świecie, strony eCommerce muszą być elastyczne i zdolne do płynnej interakcji z różnymi systemami zewnętrznymi, takimi jak bramki płatnicze, oprogramowanie do zarządzania zapasami czy systemy zarządzania relacjami z klientami (CRM). Integracje zewnętrzne wymagają jednak dokładnych informacji na temat sposobu, w jaki łączą się one z wybraną platformą eCommerce. Jak wspomniano w pierwszym blogu z tej serii, każda platforma jest inna, więc gotowe funkcje i możliwości integracji mogą się znacznie różnić. 

Integracja z systemami zewnętrznymi zazwyczaj są najtrudniejszą częścią szacowania kosztów migracji z powodu braku dokumentacji danego rozwiązania lub informacji o przesyłaniu danych między systemem eCommerce, a integracją zewnętrzną i odwrotnie. 

Na przykład, weźmy pod uwagę System Planowania Zasobów Przedsiębiorstwa (ang. Enterprise Resource Planning), który łączy się z systemem eCommerce. Aby pomyślnie zaimplementować go w nowym sklepie eCommerce, deweloperzy muszą wiedzieć, jak te systemy wymieniają dane między sobą i jaki typ danych jest wymieniany.

Najlepszym sposobem na integrację systemów zewnętrznych z nową stroną eCommerce jest zrozumienie, jak dotychczasowy sklep internetowy był połączony z systemami zewnętrznymi i co można zmienić lub poprawić w tej kwestii. 

Podczas migracji każda planowana integracja powinna być dokładnie przeanalizowana. Zdefiniuj jasny cel każdej integracji oraz rozważ nowe systemy, które mogą usprawnić działanie sklepu. Dobrze zintegrowane systemy ułatwiają wprowadzenie nowych funkcji i technologii, zapewniając, że sklep eCommerce pozostaje konkurencyjny i może być dostosowywany do zmieniających się trendów rynkowych oraz preferencji klientów.

Proces designu podczas migracji sklepu internetowego

Po przygotowaniu strategii integracji z systemami zewnętrznymi, kolejnym istotnym aspektem migracji strony internetowej jest planowanie jej wyglądu. Warto zauważyć, że proces tworzenia projektu to często moment, w którym klient odkrywa, że na stronie brakuje niektórych funkcji kluczowych dla jej prawidłowego działania. Zacznijmy od wyjaśnienia roli designu w projekcie:

Rola designu strony eCommerce podczas migracji platformy

Projekt strony eCommerce to nie tylko jej wygląd, ale także sposób, w jaki poszczególne elementy działają w sklepie internetowym. Stanowi on połączenie między użytkownikiem a stroną. Migracja eCommerce to doskonała okazja, aby przeanalizować, które elementy dobrze działały w kontekście sprzedaży online i powinny być wdrożone na nowej stronie, a które obszary sklepu były problematyczne i mogą zostać poprawione. Ponadto migracja strony na inną platformę eCommerce wymaga dostosowania szablonów do nowej platformy. W trakcie tego procesu firmy eCommerce mogą również zastanowić się nad danymi, które wcześniej zostały pominięte, ale także wymagają migracji.

Warto zauważyć, że trudno jest migrować stronę, zachowując ją dokładnie taką samą. Każda platforma jest inna i różnią się one nieco pod względem odczytu danych, formatowania treści i wspierania różnych funkcjonalności.

Jednakże, projektowanie pomaga połączyć wymagania biznesowe z potrzebami klientów. Uwzględnia ono technologiczne możliwości i ograniczenia danej platformy. Dzięki temu proces projektowania pozwala uzyskać pełny obraz sytuacji dla wszystkich stron uczestniczących w projekcie eCommerce. Jest to również czas na ponowne przemyślenie wizualnej identyfikacji marki.

Design strony eCommerce powinien być zarówno atrakcyjny wizualnie, jak i intuicyjny oraz praktyczny.

Proces migracji nie powinien negatywnie wpływać na przyzwyczajenia i preferencje klientów na stronie – może to bowiem wpłynąć na wskaźniki konwersji. Aby lepiej to zobrazować, wyobraźmy sobie scenariusz, w którym popularna księgarnia internetowa przeprojektowuje swoją stronę. Wcześniej łatwo dostępny pasek wyszukiwania jest teraz ukryty w menu, a znane kategorie zastąpiono mniej intuicyjnymi. Stali klienci, przyzwyczajeni do starego układu umożliwiającego szybkie wyszukiwanie i zakupy, mogą być sfrustrowani dodatkowym czasem i wysiłkiem potrzebnym do znalezienia ulubionych gatunków czy autorów.  

Jak proces designu pomaga w przygotowaniach do migracji eCommerce

1. Patrząc na front-end strony, łatwo możemy dostrzec, co należy dodać, zmienić lub usunąć. Wprowadzanie zmian na początku jest prostsze niż modyfikowanie kodu w trakcie migracji. Implementacja nowych funkcjonalności jest łatwiejsza, ponieważ możemy je najpierw zobaczyć, a potem zdecydować, czy chcemy je zachować. Pozwala to na całościowe spojrzenie na sklep eCommerce, umożliwiając przejrzenie wielu obszarów strony, takich jak koszyk, proces realizacji zamówienia, strona główna i inne kluczowe sekcje.

2. Dokumentacja projektu pomaga deweloperom we wdrażaniu szablonów i utrzymaniu spójności w projekcie, ponieważ dostarcza informacji o komponentach, kolorach, czcionkach, ikonach itp. Dzięki temu deweloperzy nie muszą się domyślać, jak dany element będzie współpracował z innymi (np. funkcjonalność “hover”), co znacznie skraca czas i koszty projektu. Style Guide umożliwia łatwe wprowadzanie zmian i rozwijanie strony w przyszłości, zapewniając dokładną dokumentację różnych części strony.

3. Projekty wersji desktopowej i mobilnej pozwalają na przemyślane i spójne doświadczenie użytkownika, niezależnie od urządzenia, na którym klient przegląda sklep. Dzięki nim cały zespół wie, jak sklep będzie wyświetlany na różnych rozdzielczościach ekranu. Wersja desktopowa zapewnia pełen obraz funkcji, układu i funkcjonalności strony, umożliwiając dokładne zbadanie interfejsu użytkownika i ogólnego doświadczenia użytkownika. Ocena wersji mobilnej uwzględnia unikalne wyzwania i możliwości związane z mniejszymi ekranami i interakcjami dotykowymi, co pozwala na optymalizację nawigacji, list produktów i procesów zakupowych dla mniejszych ekranów.

Przykłady stron eCommerce

Jak wygląda proces projektowania w BitBag’u

proces projektowania eCommerce w BitBag'u

1. Przygotowanie 

Pierwszym krokiem w projektowaniu strony internetowej jest zebranie informacji o projekcie eCommerce. W BitBag robimy to w formie warsztatów. Warsztaty to czas, kiedy „przepytujemy” klienta, zadając różne pytania dotyczące nowego sklepu internetowego, takie jak „Jaka jest grupa docelowa?”,  “Jakie są ich potrzeby?” oraz „W jakim kierunku powinien podążać projekt?”. Zrozumienie celów biznesowych i potrzeb klientów jest tutaj kluczowe. Aby to osiągnąć, firma może, na przykład, porównać swoją stronę z tymi, które lubi lub które mają być inspiracją dla projektu. Na tym etapie warto również omówić mocne strony strony internetowej, co działa dobrze, co można poprawić i jakie aspekty wyróżniają ją na tle konkurencji.

2. Wireframing

Kolejnym zadaniem jest przygotowanie „szkieletu” strony internetowej. Ten etap, zwany również „wireframingiem”, polega na stworzeniu wizualnego schematu lub szkieletu układu i struktury strony internetowej. Tutaj analizowane i planowane jest rozmieszczenie kluczowych funkcji i komponentów strony eCommerce.

3. Projektowanie

Po określeniu celu projektu i ustaleniu spójnej wizji strony, czas na pracę kreatywną. Nasza nowa strona eCommerce otrzymuje szczegółowe elementy, w tym kolory, wysokiej jakości obrazy i typografię, aby stworzyć wizualnie atrakcyjną reprezentację biznesu eCommerce.

4. Style Guide 

Podczas pracy nad projektem strony internetowej tworzony jest również Style Guide. Jest to dokumentacja wizualna, której rola, jak wspomniano wcześniej, jest bardzo ważna. Style Guide pomaga utrzymać spójność projektu w różnych elementach strony internetowej i dostarcza cennych informacji dla deweloperów. Zawiera zazwyczaj czcionki, kolory, wzorce interfejsu użytkownika, bibliotekę komponentów i wiele więcej.

Ile kosztuje stworzenie własnej witryny eCommerce?

Podsumowanie

Tworzenie designu strony to bardzo ważny proces, który czasami jest niedoceniany przez sklepy interentowy. Dostarcza niezwykle cennych informacji dla wszystkich stron zaangażowanych w projekt eCommerce – właściciele firm widzą, jak będzie wyglądała strona, deweloperzy backendowi widzą, jak powinna działać, a deweloperzy frontendowi, jak ją zaimplementować. Dzięki procesowi designu wszyscy są na tym samym poziomie i mogą ustalić spójną wizję projektu. 

Dobrze przemyślany, atrakcyjny i spójny projekt daje użytkownikom poczucie profesjonalizmu, co zwiększa zaufanie do marki i pomaga wyróżnić się na tle konkurencji.