Połączenie zaawansowanych procesów sprzedaży znanych w handlu B2B, z prostymi i szybkimi zakupami, które spotykamy w e‑commerce B2C może być dużym wyzwaniem. Scalenie tych dwóch środowisk wiąże się ze stworzeniem zupełnie nowego UX, a dodatkowo w takich projektach pojawia się konieczność implementacji rozbudowanej wyszukiwarki i dostosowanie front-endu do wymagań PageSpeed Insights.
Podczas wdrożenia nowego frontu dla jednego z czołowych dostawców profesjonalnego wyposażenia dla gastronomii i branży HoReCa w Polsce zmierzyliśmy się właśnie z wyzwaniem. Ze względu na zapisy umowy o poufności (NDA) nie możemy ujawnić nazwy Klienta. Możemy jednak pokazać, jak wykorzystaliśmy architekturę Headless PWA oraz możliwości AtomStore do stworzenia nowoczesnego środowiska sprzedaży B2B i B2C.
Nowy front-end to coś więcej niż zmiana wyglądu
Nasz klient od wielu lat rozwijał sprzedaż internetową, obsługując zarówno firmy z branży gastronomicznej, jak i klientów indywidualnych zainteresowanych profesjonalnym wyposażeniem do restauracji, kuchni i hoteli. Po latach funkcjonowania dotychczasowego sklepu podjęto decyzję o kompleksowej zmianie front-endu i przejściu na architekturę Headless/PWA.
Projekt zbiegł się z odświeżeniem identyfikacji wizualnej firmy, dlatego nie chodziło jedynie o zaprojektowanie nowych widoków sklepu. Konieczne było stworzenie od podstaw spójnego doświadczenia użytkownika, które będzie odpowiadać nowemu wizerunkowi marki. Jednocześnie musiał on uwzględnić specyficzne potrzeby dwóch bardzo różnych grup odbiorców.
Klient B2C oczekuje przede wszystkim prostego wyszukiwania, czytelnej prezentacji produktu i szybkiego zakupu. Użytkownik B2B może natomiast kompletować duże zamówienie, analizować parametry techniczne urządzeń czy korzystać z indywidualnych warunków handlowych.
Największe wyzwania projektu
Nowy sklep miał być nie tylko szybszy, nowocześniejszy i atrakcyjniejszy wizualnie. Projekt wymagał przemyślenia całego doświadczenia zakupowego oraz sposobu, w jaki platforma wspiera klientów i zespół handlowy.
Przed zespołem AtomStore postawiono następujące cele:
- Stworzenie hybrydowego modelu B2B+B2C – wdrożone rozwiązanie musiało pozwalać na obsługę skomplikowanych procesów biznesowych przy jednoczesnym zachowaniu prostoty zakupów dla klienta indywidualnego.
- Zaprojektowanie UI zgodnego z nową identyfikacją wizualną firmy – nowy front-end miał podkreślać profesjonalny i nowoczesny charakter marki w branży HoReCa.
- Przygotowanie spójnego UX dla różnych grup docelowych – wdrażana platforma wymagała zaprojektowania nowej ścieżki zakupowej, wygodnej zarówno dla biznesu, szefów kuchni i klientów indywidualnych, którzy dopiero rozwijają swoje kulinarne umiejętności.
- Przejście na nowoczesną architekturę Headless PWA – oddzielenie front-endu od back-endu i zaprojektowanie go z myślą o użytkownikach mobilnych. Zaprojektowanie platformy zgodnie z zasadą mobile-first, pozwoliło zatrzeć granicę między stroną internetową a natywną aplikacją mobilną.
- Zwiększenie wydajności i maksymalizacja wskaźników PageSpeed Insight – zapewnienie wysokiej wydajności szczególnie na urządzeniach mobilnych i przygotowanie platformy do wymagań nowoczesnego SEO.
- Zaprojektowanie nowej ścieżki zakupowej i ulepszonej ekspozycji produktów – budowanie koszyka uwzględniającego złożone scenariusze logistyczne i zakupowe oraz uproszczenie porównywania produktów o wielu parametrach przez dostosowanie platformy do obsługi rozbudowanego katalogu produktowego.
- Wsparcie i automatyzacja pracy – drożenie funkcji przyspieszających składanie dużych zamówień B2B i utworzenie środowiska wspierającego pracę zespołu handlowego,
Rezultatem miał być e‑commerce, który pozostaje intuicyjny dla klienta indywidualnego, ale jednocześnie oferuje zaawansowane narzędzia potrzebne profesjonalnym kupującym.
Headless PWA jako technologiczny fundament nowego e‑commerce
Nowy front został zbudowany w architekturze Headless Front PWA. Oddzielenie warstwy prezentacji od back-endu AtomStore pozwoliło uzyskać większą elastyczność w projektowaniu doświadczeń użytkownika. Nie wpłynęło to na rozbudowane mechanizmy sprzedażowe działające po stronie platformy.
PWA (Progressive Web App) pozwala połączyć możliwości serwisu internetowego z doświadczeniem charakterystycznym dla aplikacji. Szczególne znaczenie ma to na urządzeniach mobilnych, które są dziś jednym z podstawowych narzędzi wykorzystywanych również przez klientów biznesowych.
Architektura Headless pozwoliła zespołowi projektowemu skoncentrować się na szybkości, ergonomii i indywidualnych wymaganiach UX. Jednocześnie zachowany został stabilny back-end odpowiedzialny za procesy sprzedażowe, ofertowanie, obsługę klientów czy integracje.
UX i UI zaprojektowane dla dwóch światów
Jednym z najbardziej wymagających etapów projektu było przygotowanie UX i UI. Nowy front-end powstawał równolegle ze zmianą identyfikacji wizualnej firmy, dlatego konieczne było przeniesienie nowego języka marki do środowiska e‑commerce. Projekt od początku realizowany był w podejściu mobile-first. Jednocześnie interfejs musiał uwzględniać różnice pomiędzy zakupami B2C i B2B.
W przypadku profesjonalnego wyposażenia decyzja zakupowa często wymaga analizy wielu parametrów technicznych, porównania produktów, sprawdzenia warunków dostawy czy konsultacji dodatkowych usług. Dlatego zamiast upraszczać sklep poprzez ograniczanie informacji, skupiliśmy się na takim zaprojektowaniu interfejsu, aby rozbudowane dane były łatwe do odnalezienia i nie komplikowały podstawowej ścieżki zakupowej.
Szybsze dotarcie do właściwego produktu
W przypadku szerokiej linii produktowej i asortymentu o rozbudowanej specyfikacji technicznej wyszukiwarka staje się jednym z najważniejszych elementów całego e‑commerce. Wdrożone rozwiązanie prezentuje użytkownikowi podpowiedzi już podczas wpisywania zapytania. Wyniki nie ograniczają się wyłącznie do produktów, ale obejmują również odpowiednie kategorie oraz treści poradnikowe publikowane na blogu.
Uzupełnieniem wyszukiwarki są rozbudowane filtry na listach produktów. Pozwalają one zawęzić ofertę według parametrów istotnych dla konkretnej grupy urządzeń i znacznie szybciej dotrzeć do produktów odpowiadających wymaganiom użytkownika.
Szczególnie ważnym elementem jest również porównywarka produktów. W branży profesjonalnego wyposażenia różnice pomiędzy urządzeniami mogą dotyczyć wielu parametrów technicznych, dlatego możliwość zestawienia ich w jednym widoku znacząco ułatwia podjęcie decyzji zakupowej. Porównywarka została zaprojektowana ze szczególnym uwzględnieniem wygody korzystania z niej na smartfonach.
Karta produktu, która wspiera decyzję zakupową
W nowym projekcie karta produktu przestała pełnić rolę wyłącznie katalogową. Jej zadaniem jest dostarczenie użytkownikowi możliwie kompletnego zestawu informacji potrzebnych do podjęcia decyzji. Wdrożyliśmy rozbudowaną warstwę rich content oraz galerię pozwalającą prezentować zarówno wysokiej jakości zdjęcia, jak i materiały wideo.
Na karcie produktu znalazły się również opinie użytkowników, FAQ oraz porady ekspertów. Dzięki temu klient może znaleźć odpowiedzi na część pytań bez konieczności kontaktowania się z działem sprzedaży.
Dla klientów biznesowych istotne są także mechanizmy związane z warunkami handlowymi. Karta może prezentować między innymi zniżki ilościowe oraz minima logistyczne, dzięki czemu kupujący od razu zna warunki związane z większym zamówieniem.
Koszyk przygotowany na bardziej złożone zamówienia
Sprzedaż profesjonalnego wyposażenia wiąże się ze znacznie bardziej skomplikowaną logistyką niż w typowym sklepie B2C. Jedno zamówienie może obejmować produkty dostępne w różnych terminach, urządzenia wielkogabarytowe oraz dodatkowe usługi. Dlatego przebudowany został również nowy koszyk. Podczas zamówienia produkty mogą być grupowane w paczki według przewidywanej daty dostawy, dzięki czemu klient jeszcze przed finalizacją zamówienia otrzymuje czytelną informację o sposobie jego realizacji.
Do produktów lub całego koszyka można również dodawać usługi dodatkowe. Platforma obsługuje także zestawy produktowe oraz rozwiązania finansowe istotne w sprzedaży B2B, w tym leasing, kredyt i płatności odroczone. W efekcie checkout obsługuje zarówno stosunkowo prosty zakup pojedynczego produktu, jak i znacznie bardziej złożone zamówienie inwestycyjne klienta biznesowego.
Funkcje, które przyspieszają zakupy B2B
Składający zamówienia handlowcy często wiedzą dokładnie, czego potrzebują. W takim przypadku przeglądanie kolejnych kategorii i ręczne dodawanie kilkudziesięciu pozycji do koszyka nie ma sensu. Dlatego wdrożony został mechanizm importu koszyka pozwalający szybko utworzyć duże zamówienie na podstawie przygotowanej wcześniej listy produktów.
Platforma umożliwia również przełączanie sposobu prezentowania cen netto i brutto. To pozornie niewielka funkcja, która w praktyce znacząco zwiększa wygodę korzystania ze sklepu przez użytkowników biznesowych, nie komplikując przy tym zakupów klientom B2C. Takie rozwiązania pokazują jedno z podstawowych założeń całego projektu: funkcjonalności B2B nie powinny utrudniać korzystania ze sklepu pozostałym użytkownikom.
E‑commerce jako narzędzie pracy handlowca – system SFA
Nowa platforma nie została zaprojektowana wyłącznie dla klientów. Ważnym elementem projektu było również stworzenie środowiska wspierającego codzienną pracę zespołu handlowego. System SFA (Sales Force Automation) zapewnia przedstawicielom handlowym dostęp do informacji związanych z obsługiwanymi klientami, w tym zamówień, faktur oraz reklamacji. Jedną z najważniejszych funkcji jest zaawansowany mechanizm ofertowania zintegrowany bezpośrednio z koszykiem. Handlowiec może przygotować indywidualną ofertę dla klienta, która następnie będzie wykorzystana w procesie zakupowym na platformie.
SFA zapewnia również dostęp do raportów i statystyk dotyczących sprzedaży oraz poszczególnych klientów. Dzięki temu e‑commerce staje się nie tylko kanałem przyjmowania zamówień, ale również narzędziem wspierającym aktywną sprzedaż i zarządzanie relacjami B2B.
Optymalizacja PageSpeed i architektura przygotowana pod nowoczesne SEO
Jednym z kluczowych celów technologicznych była wydajność nowego front-endu. Po optymalizacji platforma osiąga wyniki na poziomie 85–95 punktów w Google PageSpeed Insights. Wysoka wydajność ma bezpośrednie znaczenie dla komfortu użytkowników, szczególnie korzystających ze sklepu na urządzeniach mobilnych.
Nowa architektura została również przygotowana zgodnie z wymaganiami współczesnego technicznego SEO. Obejmuje to rozwiązania wspierające prawidłowe indeksowanie oraz prezentowanie treści sklepu wyszukiwarkom.
Projekt uwzględnia również rosnące znaczenie AEO (Answer Engine Optimization). Rozbudowane FAQ, treści eksperckie, uporządkowana struktura informacji oraz powiązanie contentu z produktami tworzą fundament pod widoczność nie tylko w klasycznych wynikach wyszukiwania, ale również w środowisku wyszukiwarek i narzędzi wykorzystujących AI.
Efekty biznesowe wdrożenia
Nowy front-end stworzył technologiczny fundament pod dalszy rozwój sprzedaży internetowej klienta oraz umożliwia lepsze wykorzystanie możliwości platformy AtomStore.
Najważniejsze efekty projektu to:
- połączenie sprzedaży B2B i B2C w ramach jednego, spójnego doświadczenia zakupowego,
- wdrożenie nowoczesnej architektury Headless PWA,
- dostosowanie e‑commerce do nowej identyfikacji wizualnej marki,
- uproszczenie wyszukiwania i porównywania technicznego asortymentu,
- usprawnienie składania dużych i bardziej złożonych zamówień B2B,
- rozwój możliwości sprzedażowych zespołu dzięki systemowi SFA,
- obsługa zaawansowanych scenariuszy logistycznych i finansowych,
- wysoka wydajność front-endu potwierdzona wynikami PageSpeed,
- przygotowanie platformy pod współczesne SEO i rozwój AEO,
- stworzenie skalowalnego środowiska gotowego na dalszy rozwój funkcjonalny.
Podsumowanie
Transformacja e‑commerce nie zawsze wymaga wymiany całej platformy. W przypadku naszego Klienta kluczowe było połączenie stabilnego i rozbudowanego zaplecza AtomStore z całkowicie nową warstwą doświadczenia użytkownika.
Architektura Headless PWA pozwoliła stworzyć szybki i elastyczny front-end odpowiadający potrzebom klientów B2C i B2B oraz pracownikom zespołu handlowego.
W efekcie powstał e‑commerce, który nie jest wyłącznie kolejnym kanałem sprzedaży. To kompleksowe środowisko wspierające proces zakupowy od wyszukania i porównania produktu, przez przygotowanie indywidualnej oferty i finansowanie, aż po logistykę oraz obsługę posprzedażową.
Projekt pokazuje również, że zaawansowane funkcje B2B i prosty UX znany z najlepszych sklepów konsumenckich nie muszą się wykluczać. Odpowiednio zaprojektowana architektura pozwala połączyć oba te światy w ramach jednej platformy e‑commerce.
Planujesz połączyć sprzedaż B2B i B2C lub chcesz unowocześnić frontend bez wymiany całej platformy? Porozmawiajmy o możliwościach wykorzystania AtomStore Headless PWA w Twoim e‑commerce.
