Powrót do Bloga

Jak zaprojektować platformę B2B? Kluczowe zasady UX/UI, Custom vs. Pudełko

Miniatura 30. odcinka „Jak dobrze zaprojektować platformę B2B?” z serii B2B Master Class.

B2B Master Class z Filipem Proficem

W tym odcinku B2B Master Class Tomasz Grzemski (CEO Macopedia) rozmawia z Filipem Proficem, UX Leadem w Macopedii, na temat kluczowych zasad projektowania interfejsów i doświadczeń użytkowników w złożonym świecie B2B. Dobre wdrożenie platformy B2B w dużej mierze zależy od intuicyjnego interfejsu (UI) i odpowiednio zaprojektowanej ścieżki (UX). Z rozmowy dowiesz się, jak wygląda proces projektowania, dlaczego analityk jest ważniejszy niż designer na początku projektu, oraz jak zminimalizować ryzyko wdrożenia, wybierając odpowiedni model (Custom, Pudełko czy Hybryda).

Kluczowe punkty odcinka

  • UI (User Interface) to warstwa wizualna, kolory i umieszczenie elementów – wizytówka biznesu.
  • UX (User Experience) to logika i odczucia użytkownika, to jak prosto i intuicyjnie przechodzi on przez system, minimalizując zakłopotanie.
  • Proces projektowania platformy B2B powinien rozpoczynać się od analityka, który definiuje cele biznesowe, a nie od samego grafika, co pozwala zaoszczędzić dużo pieniędzy.
  • W B2B kluczową rolę pełni opis produktu, który musi być najbardziej rozbudowany, ponieważ biznes analizuje te dane pod kątem konkurencyjności.
  • Wdrożenie w podejściu MVP (Minimum Viable Product) jest najbezpieczniejszą opcją biznesową, ponieważ umożliwia testowanie i łatwe, tańsze zmiany na wczesnym etapie.
  • Figma jest obecnie dominującym narzędziem do projektowania, które pozwala na tworzenie klikalnych prototypów (wireframów), dzięki czemu klienci mogą zobaczyć, jak działa nawigacja przed rozpoczęciem Developmentu.

UX vs UI – kluczowe różnice i ich rola w B2B

W projektowaniu interfejsów używa się dwóch głównych terminów: UI i UX. UI (User Interface) to warstwa wizualna, czyli to, co użytkownik widzi – kolory, rozmieszczenie elementów, dostosowanie przestrzeni, co można nazwać wizytówką firmy. UX (User Experience) to głębsza warstwa; to, co użytkownik czuje i to, co projektanci chcieliby mu przekazać, aby system był prosty i intuicyjny. Przykładem UX jest mikrointerakcja po kliknięciu „Dodaj do koszyka” – jeśli nic się nie wydarzy, użytkownik czuje się zakłopotany i może wyjść ze sklepu. Celem UX jest to, aby użytkownik zawsze wiedział, w którym momencie jest i co właśnie robi.

Proces projektowania UX/UI w B2B

Proces projektowania rozpoczyna się od ustalenia celu – czy chodzi o odświeżenie istniejącego e-commerce, czy o gruntowną przebudowę/budowę od zera. W przypadku projektów bardzo złożonych, takich jak integracja e-commerce, aplikacji handlowców i CRM-u, proces zaczyna się od analityka, a nie od projektanta. Analityk odpowiada za wyciągnięcie wszystkich biznesowych wniosków, które potem kształtują design.

Kolejnym etapem jest wireframing (makiety, wframy), czyli wstępne wizualizowanie wyników analizy. Stosuje się makiety low-fi (najczęściej biało-szare). W tym etapie, designer jest w stanie zaoszczędzić klientowi dużo pieniędzy, ponieważ zmiany wprowadza się na makietach, a nie na „żywym organizmie” (kodzie deweloperskim). Makiety pomagają w zwizualizowaniu danych, które w Excelu są dla większości osób niezrozumiałe. To na podstawie makiet zapadają najważniejsze taktyczne decyzje, w jakim kierunku idzie projekt i jak będzie wyglądał na różnych urządzeniach.

Obecnie dominującym programem do projektowania jest Figma. Figma pozwala na udostępnianie treści klientom, prototypowanie klikalnych makiet i łatwe testowanie nawigacji.

B2B vs. B2C – kluczowe różnice w projektowaniu UX

Projektowanie UX/UI różni się znacząco w zależności od modelu biznesowego:

Aspekt ProjektowaniaB2C (Customer)B2B (Business)
Główny celKlient ma dokonać szybko zakupu (koszyk, checkout, sukces).Zakup jest złożony, zaangażowanych jest wiele osób decyzyjnych (znajdujący, przełożony, decydent).
Karta ProduktuWiększą wagę mają wizualizacje (zdjęcia, promocje, CTA).Opis produktu musi być najbardziej rozbudowany, ponieważ biznes analizuje dane pod kątem konkurencyjności.
Wsparcie SprzedażyStosowanie upsell/cross-sell po akcji (np. dodanie etui/ubezpieczenia po dodaniu laptopa do koszyka).Najważniejsza jest pełna specyfikacja i informacja biznesowa.

W B2B często pojawia się wyzwanie połączenia wielu źródeł informacji (np. cena na stronie, cena w ofercie handlowca) i odpowiednia segmentacja klientów. Kluczowe jest również dostosowanie do urządzeń mobilnych, ponieważ pracownicy (dyrektorzy, elektrycy, handlowcy) często podejmują decyzje na telefonie (np. na spotkaniu, na budowie, w drodze), a brak responsywności może przerwać proces zakupowy.

Podejścia do wdrożenia platformy B2B: custom, pudełko czy hybryda

Budżety i zasoby determinują wybór podejścia do designu i wdrożenia. Wyróżnia się trzy główne kategorie:

  1. Customowe (Pełna personalizacja): Projektowanie od analizy do wdrożenia, w pełni dostosowane do procesów klienta. Jest to rozwiązanie najdroższe.
  2. Pudełkowe (Gotowe rozwiązanie): Zakup gotowej technologii (np. Magento, OroCommerce). Jest mniej kosztowne, ale firma musi być gotowa dostosować swoje procesy do funkcjonalności dostępnych w standardzie.
  3. Hybrydowe: Kupno gotowego rozwiązania (np. 60% funkcjonalności) i dewelopment customowych elementów (40%). Może być droższe niż Custom, jeśli konieczna funkcjonalność jest bardzo trudna do wdrożenia w danym stacku technologicznym (np. przebudowa checkoutu w trudnym pudełku).

Filip Profic zaleca stosowanie podejścia MVP (Minimum Viable Product). Wypuszczenie na rynek produktu spełniającego najważniejsze potrzeby (np. obsługa zamówień) pozwala na szybkie rozpoczęcie zarabiania przez platformę. Po wdrożeniu MVP można zbierać feedback, robić ankiety i obserwować rynek, a następnie dorzucać kolejne funkcjonalności. Takie iteracyjne podejście jest bezpieczniejsze i tańsze.

Wyzwania UX/UI na platformach B2B: Opór i Subiektywność

Kluczowym wyzwaniem jest czynnik ludzki i subiektywność. Właściciele firm często traktują platformę jako wizytówkę i chcą mieć duży udział w jej projektowaniu. W efekcie często pojawiają się prośby o zmiany subiektywne, np. „większe logo”.

Designer musi:

  1. Kierować się danymi (np. testami A/B), ponieważ logo samo w sobie nie sprzedaje.
  2. Zrozumieć intencję klienta (np. dlaczego chce większe logo – być może chodzi o to, by klienci bardziej przyzwyczajali się do marki, a nie tylko o rozmiar).
  3. Wiedzieć, kiedy zejść z idealnego UX na rzecz lepszej ścieżki biznesowej, która jest kluczowa dla firmy.

Zmiany wywołują opór, ponieważ ludzie nie lubią, kiedy muszą zmienić przyzwyczajenia do starych schematów (np. filtrowanie zawsze po lewej stronie). Kluczowe jest przepracowanie tej zmiany na warsztatach z zarządem. Pozytywne feedbacki od kontrahentów (np. szybki proces zapłaty, faktura na mailu) budują zaufanie do nowego rozwiązania.

Podziękowania

Dziękujemy Filipowi Proficowi, UX Leadowi w Macopedii, za udział w cyklu B2B Master Class i niezwykle praktyczną rozmowę o tym, jak projektować nowoczesne i intuicyjne platformy B2B. Ten odcinek pokazuje, że sukces wdrożenia nie zależy wyłącznie od technologii, lecz od dobrego doświadczenia użytkownika (UX) i przemyślanego interfejsu (UI), które wspierają realne cele biznesowe.

Dzięki doświadczeniu Filipa Profica mogliśmy zajrzeć „od kuchni” w proces projektowania — od analizy biznesowej, przez tworzenie makiet w Figmie, aż po decyzje dotyczące wyboru modelu wdrożenia (custom, pudełkowy czy hybrydowy). To rozmowa, która uświadamia, że dobry projekt zaczyna się od danych, a nie od grafiki, a podejście MVP (Minimum Viable Product) pozwala szybciej testować, wdrażać i uczyć się na realnych zachowaniach użytkowników.

To kolejny odcinek B2B Master Class, który podkreśla, że w cyfrowym świecie B2B design to nie tylko estetyka, lecz strategiczne narzędzie sprzedaży i budowania przewagi konkurencyjnej – tam, gdzie biznes spotyka technologię i użytkownika.

Powiązane treści

Poznaj sprawdzone strategie, architektury oraz konkretne platformy, które gwarantują intuicyjne i zyskowne doświadczenia Twoich użytkowników. Poniższe materiały pomogą Ci podjąć mądrą decyzję dotyczącą technologii nowego e-commerce, upewniając się, że spełni ona specyficzne wymogi Twojej branży.

  • Dedykowane platformy B2B (Custom) – tworzenie oprogramowania na zamówienie – Zobacz naszą ofertę. Dowiedz się, jak projektujemy systemy "szyte na miarę", które idealnie odzwierciedlają unikalne procesy biznesowe i wymagają pełnej personalizacji interfejsu (UX/UI), o której mowa w podcaście.
  • Platforma B2B za 59 000 zł – start sprzedaży hurtowej w 12 tygodni – Poznaj nasz unikalny pakiet wdrożeniowy MVP, idealny dla firm, które chcą szybko i w kontrolowanym budżecie wejść w cyfrowy handel. Zobacz, jak dzięki gotowemu, "pudełkowemu" rozwiązaniu na silniku OroCommerce możesz przetestować rynek w zaledwie 3 miesiące, minimalizując technologiczne i finansowe ryzyko.
  • Case study Swiss Rotors: Customowy konfigurator B2B i nietypowa ścieżka zakupowa zintegrowana z systemami Odoo – Przeczytaj historię klienta, dla którego standardowy koszyk to było za mało. Jest to idealny, praktyczny dowód na mądre stosowanie opcji "Custom" wspominanej przez Filipa Profica, w której to nietypowy proces zakupowy dyktował budowę dedykowanego interfejsu (UI).
  • Bartek Piotrowski o wdrożeniu systemu B2B: od strategii MVP po cały ekosystem sprzedażowy – Posłuchaj rozmowy stanowiącej merytoryczną kontynuację dzisiejszego odcinka. Dowiesz się w niej, dlaczego budowanie od razu "idealnej rakiety" to ogromne ryzyko budżetowe i jak strategia Minimum Viable Product pozwala na tańsze, rynkowe testowanie założeń graficznych i biznesowych.
  • Tymoteusz Motylewski tłumaczy twardy, technologiczny wybór architektury: Headless czy klasyczny Monolit? – Obejrzyj dyskusję CTO Macopedii o zapleczu IT. Zrozumiesz, w jaki sposób oderwanie warstwy wizualnej (Frontendu) od silnika ułatwia pracę projektantom UX/UI oraz zapewnia Twoim klientom ekstremalnie szybkie ładowanie witryny, o którym wspominał Filip Profic.