Zaprojektowaliśmy i wdrożyliśmy technocenter.pl, katalog sprzętu IT dla firm zbudowany w Next.js. To nie jest typowy sklep z koszykiem: klientami są działy zakupów, które wysyłają listy sprzętu, zamawiają przez PO i płacą na fakturę.
W tym case study pokazujemy, jak takie wymagania przełożyliśmy na UX, architekturę pod SEO i technologię.
Klient i założenia projektu
Technocenter to warszawski dostawca laptopów, komputerów, monitorów, sprzętu do sal konferencyjnych i sieci. Model sprzedaży jest prosty: klient wysyła listę, w dzień roboczy w ciągu 30 minut dostaje ofertę z ceną netto i terminem przy każdej pozycji, a potem akceptuje ją mailem albo zamówieniem z systemu zakupowego.
Z tego wynikały założenia projektu:
- Wygląd na poziomie dużych firm. Strona miała przekonywać działy zakupów korporacji, a nie klientów detalicznych.
- Ceny netto na pierwszym planie. Kwota brutto jest widoczna, ale drugorzędna.
- Zapytanie zamiast płatności online. Klient B2B potrzebuje oferty, faktury i często odroczonego terminu płatności.
- Katalog zasilany danymi z hurtowni. Produkty, ceny i stany pochodzą z feedów kilku dostawców, bez ręcznego wprowadzania.
- SEO od pierwszego dnia. Struktura strony miała odpowiadać na to, jak firmy szukają sprzętu w Google.
- Wersja angielska. Część klientów to firmy międzynarodowe z centralą za granicą.
Lista zapytania zamiast koszyka
Najważniejsza decyzja dotyczyła ścieżki zakupu. Zamiast koszyka i bramki płatności każdy produkt ma przycisk „Dodaj do zapytania”, a lista trafia do handlowca jako gotowe zapytanie ofertowe.
Działy zakupów rzadko kupują pojedyncze produkty z katalogu. Częściej mają własną listę w Excelu, dlatego formularz przyjmuje pliki xlsx, csv, pdf i docx do 10 MB. Dla firm, które dopiero ją przygotowują, udostępniliśmy wzór zapytania ofertowego do pobrania.
Osobną sekcję zaprojektowaliśmy dla działów zakupów:
- dane rejestrowe z przyciskiem kopiowania NIP,
- vendor pack w PDF do rejestracji dostawcy w systemie zakupowym,
- wniosek o limit kupiecki, czyli zakup z odroczonym terminem płatności,
- informacja o zamówieniach przez PO i obsłudze po angielsku.
Architektura pod SEO
Firmy nie szukają w Google „notebooków 15,6 cala”, tylko laptopów dla firm, sprzętu dla nowego pracownika albo wyposażenia biura. Dlatego strukturę strony zbudowaliśmy wokół intencji zakupowej B2B, a nie wokół drzewa kategorii hurtowni.
| Typ strony | Przykłady | Na jakie zapytania odpowiada |
|---|---|---|
| Kategorie | laptopy, komputery, monitory, akcesoria, serwery i NAS | ogólne zapytania produktowe z dopiskiem „dla firm” |
| Serie producentów | Lenovo ThinkPad, Dell Pro, HP EliteBook, MacBook | zapytania o konkretne linie biznesowe |
| Usługi | zaopatrzenie IT, onboarding pracowników, praca zdalna, leasing | potrzeby, a nie produkty |
| Branże | software house, media i wideo, centra usług wspólnych, startupy | zestawy sprzętu dla konkretnych zespołów |
| Miasta | Warszawa, Kraków, Wrocław, Poznań, Trójmiasto i 4 kolejne | zapytania lokalne |
| Poradnik | jaki laptop dla firmy, ThinkPad vs Dell Pro vs EliteBook, leasing czy zakup | pytania na etapie wyboru |
Każda usługa ma własny landing. Przykładem jest strona sprzęt IT dla biura, która opisuje wyposażenie nowego lokalu od stanowisk po sieć i druk. Strony są ze sobą powiązane linkami: kategoria prowadzi do poradnika, poradnik do konkretnej serii, a każda podstrona do formularza zapytania.
Strona główna zawiera też sekcję FAQ z pytaniami, które działy zakupów zadają najczęściej: o fakturę VAT, termin dostawy, wysyłkę do UE i limit kupiecki.
Technologia i wydajność
Frontend zbudowaliśmy w Next.js. Przy katalogu z tysiącami produktów i dziesiątkami stron docelowych liczyła się szybkość ładowania i pełna kontrola nad tym, co widzi robot Google.
- Dane z kilku hurtowni. Katalog zasilają feedy kilku dystrybutorów, połączone w jedną bazę. Ten sam model od różnych dostawców ma jedną kartę produktu, a stany i ceny aktualizują się codziennie.
- Obrazy. Zdjęcia produktów są konwertowane do WebP i serwowane z osobnego CDN, a grafiki serwisu zapisaliśmy w AVIF. Next.js dopasowuje rozmiar obrazu do ekranu.
- Wyszukiwarka. Kupujący, który zna model, nie musi przechodzić przez kategorie.
- Wersja angielska. Ta sama struktura w języku angielskim, dla firm międzynarodowych i central zagranicznych.
Dzięki takiej architekturze dodanie nowej kategorii, branży czy miasta nie wymaga przebudowy serwisu. To ważne, bo strona ma rosnąć razem z ofertą klienta.
Wnioski dla sklepów B2B
Sklep B2B to inny produkt niż sklep detaliczny, nawet jeśli sprzedaje te same rzeczy. Z projektu Technocenter wynikają cztery zasady, które stosujemy przy kolejnych wdrożeniach:
- Ścieżka zakupu musi pasować do procesu klienta. Jeśli firma kupuje przez zapytanie i PO, koszyk z płatnością kartą jest przeszkodą.
- Dział zakupów to osobny odbiorca. Dane rejestrowe, vendor pack i warunki płatności powinny być dostępne bez dzwonienia do handlowca.
- Struktura strony to strategia SEO. Strony usług, branż i miast odpowiadają na zapytania, których nie obsłuży sama kategoria produktów.
- Katalog musi żyć sam. Integracja z hurtowniami jest warunkiem, a nie dodatkiem, gdy oferta liczy tysiące pozycji.
Planujesz sklep internetowy dla klientów biznesowych albo aplikację dedykowaną do obsługi zamówień? Zobacz nasze realizacje i wyceń projekt.
