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

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:

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.

Podsumowanie

Ten odcinek B2B Master Class pokazuje, że sukces wdrożenia platformy B2B nie zależy wyłącznie od technologii – zależy od dobrego doświadczenia użytkownika i przemyślanego interfejsu, które od początku służą realnym celom biznesowym.

Kluczowy wniosek jest taki, że dobry projekt zaczyna się od analityka i danych, a nie od grafiki. Makiety w Figmie, decyzje o modelu wdrożenia – custom, pudełkowym czy hybrydowym – oraz podejście MVP pozwalają szybciej testować, wdrażać i uczyć się na realnych zachowaniach użytkowników, zanim projekt pochłonie duży budżet.

W świecie B2B design to nie estetyka – to strategiczne narzędzie sprzedaży, które decyduje o tym, czy klient dokończy zamówienie, czy wyjdzie z platformy sfrustrowany.