Dobra strona producenta nie zaczyna się od hasła „jesteśmy innowacyjni”, tylko od odpowiedzi na proste pytania: co to jest, z czego jest zrobione i jak to zamówić. Dla marki ECODDC z Bydgoszczy przygotowaliśmy taki serwis: ecoddc.pl. To strona firmowa producenta ekologicznych organizerów biurkowych z tektury falistej, w której produkt, materiał i kontakt są o jedno kliknięcie od siebie. W tym case study pokazujemy, jak zaprojektowaliśmy ją dla odbiorców biznesowych.
W skrócie: strona firmowa producenta ekologicznych organizerów biurowych
- Klient: ECODDC, producent organizerów biurkowych z tektury falistej BC, Bydgoszcz
- Branża: produkty biurowe, ekologiczny design, sprzedaż do firm
- Zakres: projekt graficzny, strona wielopodstronowa (strona główna, dwie karty produktów, o nas, kontakt), formularz zapytań, baner cookies, strony prawne
- Technologie: HTML5, CSS3, JavaScript, PHP (obsługa formularza)
- Adres strony: ecoddc.pl
Wyzwanie: wyjaśnić nietypowy materiał i pokazać produkt dla firm
Organizer z tektury brzmi dla wielu osób jak rozwiązanie tymczasowe. Tymczasem według opisu na stronie O nas marka chce pokazać, że tektura falista BC może być trwałym, estetycznym elementem stanowiska pracy. Strona musiała więc zrobić dwie rzeczy jednocześnie: zbudować zaufanie do materiału i pokazać produkt tak, by dało się go wyobrazić na własnym biurku.
Dochodziły do tego cechy, które w komunikacji łatwo się rozmywają: obróbka CNC, filozofia Zero Waste, możliwość recyklingu i personalizacja kolorystyczna. Gdyby wszystko trafiło na jedną stronę bez porządku, odbiorca nie odróżniłby produktu od haseł marki. Z briefu wynikały cztery wymagania:
- jasne rozdzielenie marki i dwóch produktów: EcoStack i StarLinkPanel,
- konkretne dane techniczne zamiast ogólników,
- prosta droga do zapytania o produkt lub personalizację,
- lekka, szybka strona, która dobrze wygląda na telefonie i komputerze.
To nie jest typowa strona usługowa. ECODDC sprzedaje fizyczne produkty, dlatego cały układ serwisu podporządkowaliśmy prezentacji produktu, a nie katalogowi usług.
Jak pracowaliśmy nad projektem
Zaczęliśmy od uporządkowania materiałów klienta: opisów produktów, zdjęć i parametrów. Z nich powstał układ informacji, w którym strona główna tłumaczy ideę marki, a każdy produkt dostaje własną podstronę ze specyfikacją i galerią. Następnie przygotowaliśmy projekt graficzny oparty na spokojnej zieleni i naturalnych kolorach tektury, wdrożyliśmy go w kodzie i przetestowaliśmy na różnych szerokościach ekranu. Na końcu sprawdziliśmy formularz, baner cookies i podstrony prawne.
Rozwiązanie: strona, która sprzedaje produkt przez wyjaśnienie
Serwis składa się ze strony głównej, kart produktów EcoStack i StarLinkPanel, podstrony O nas oraz kontaktu. Menu jest krótkie, a przycisk kontaktu wyróżniony w nagłówku, więc odwiedzający nie musi szukać, jak się odezwać.
Strona główna: trzy filary marki i dwa produkty
Pierwszy ekran pokazuje produkt w realnym otoczeniu i dwa przyciski do kart produktów. Niżej strona prezentuje trzy filary marki: technologię CNC, Zero Waste i recykling. Podano je krótko, w trzech kafelkach, a dopiero po nich następują produkty. Odwiedzający rozumie więc najpierw ideę, a potem widzi, jak przekłada się ona na konkretne wyroby.
Schemat Zero Waste zamiast długiego opisu
Zamiast akapitu o ograniczaniu odpadów przygotowaliśmy prosty schemat: wejściem jest arkusz tektury BC, a wyjściem panel StarLinkPanel i trzy dodatkowe organizery (na tablet lub telefon, na kable i na długopisy). Według strony to z wolnych przestrzeni arkusza powstają te dodatkowe produkty. Taka wizualizacja tłumaczy koncepcję w kilka sekund.
Karty produktów ze specyfikacją i galerią
Każdy produkt ma własną podstronę z opisem, listą cech, tabelą danych technicznych i galerią zdjęć powiększanych w lekkim lightboxie. Na karcie EcoStack podano na przykład, że moduł na przybory ma 25 warstw tektury, a moduł na przewody 6 warstw, oraz że moduły można układać jeden na drugim lub obok siebie. Całość uzupełnia proces „Jak to działa?” w trzech krokach: wybór modułów, wybór koloru i ułożenie według potrzeb.
Formularz zapytań z wyborem produktu
Na stronie kontaktowej znajduje się formularz: imię, e-mail, opcjonalnie telefon i firma, lista produktów (EcoStack, StarLinkPanel, oba, personalizacja lub inne zapytanie) oraz wiadomość. Obok są dane kontaktowe firmy i mapa. Formularz wysyła się bez przeładowania strony, a użytkownik od razu widzi potwierdzenie albo komunikat o błędzie.
Personalizacja kolorystyczna jako element oferty
Według strony produkty są kaszerowane papierem w wybranym kolorze, a na stronie głównej pokazano paletę: kraft, niebieski, terakotę, zieleń, fiolet, róż, grafit, słomkowy i beż. Pod paletą jest zachęta do zapytania o inny kolor. To prosty sposób, by pokazać możliwość dopasowania produktu do identyfikacji wizualnej firmy bez budowania konfiguratora.
Podstrona O nas: filozofia marki w jednym miejscu
Treści o wartościach marki nie zostały rozproszone po całym serwisie. Na stronie O nas zebraliśmy filozofię firmy, opis materiału BC i listę tego, co według marki ją wyróżnia: autorską metodę klejenia naprzemiennego, łączniki w kształcie gwiazdy w StarLinkPanel, personalizację oraz zamknięty obieg materiałów. Dzięki temu strona główna i karty produktów pozostają zwięzłe, a ktoś, kto chce wiedzieć więcej, ma dokąd pójść.
Responsywność i dostępność
Układ dopasowuje się do szerokości ekranu dzięki zestawowi reguł CSS dla telefonów i tabletów. Zdjęcia w dolnych sekcjach ładują się leniwie, więc pierwszy ekran nie czeka na całą galerię, a użytkownicy, którzy w systemie wyłączyli animacje, nie dostają ruchomych efektów. Przyciski lightboxa mają opisy dla czytników ekranu, a pola formularza etykiety.
SEO, RODO i bezpieczeństwo
Każda podstrona ma własny tytuł i opis meta, strona główna ma adres kanoniczny i znaczniki Open Graph, dzięki czemu link wygląda dobrze po udostępnieniu. Nie obiecujemy pozycji w Google, bo zależą od wielu czynników poza kodem, ale treść jest uporządkowana i opisana tak, by wyszukiwarka mogła ją zrozumieć.
- RODO: formularz wymaga zgody na przetwarzanie danych w celu odpowiedzi na zapytanie; strona ma politykę prywatności i regulamin.
- Cookies: baner z opcjami „Akceptuję wszystkie”, „Tylko niezbędne” i „Zarządzaj ustawieniami” oraz link do zmiany preferencji w stopce.
- Formularz: walidacja po stronie serwera, ukryte pole przeciw botom oraz odrzucanie znaków nowej linii w polach trafiających do nagłówków wiadomości.
Technologie
Strona nie korzysta z WordPressa. To statyczne podstrony HTML5 ze stylami CSS, jednym plikiem JavaScript (animacje pojawiania się sekcji, lightbox, wysyłka formularza i obsługa cookies) oraz skryptem PHP, który odbiera formularz i wysyła wiadomość na skrzynkę firmy. Mapa kontaktowa ładuje się leniwie, a czcionki pochodzą z Google Fonts. Taki wybór ma sens przy kilku stałych podstronach: jest szybko, prosto i tanio w utrzymaniu.
Dlaczego własna strona, a nie tylko katalog produktów
Producent, który opisuje swoje produkty wyłącznie w ofertach na portalach, oddaje kontrolę nad tym, jak są prezentowane, i konkuruje ceną z podobnymi pozycjami. Własna strona pozwala opowiedzieć historię materiału i procesu, pokazać dane techniczne w układzie, który wybiera marka, i przyjmować zapytania bezpośrednio, bez pośrednika. W przypadku ECODDC to szczególnie ważne, bo wartość produktu leży w sposobie jego powstawania, a to trudno zmieścić w standardowym opisie z marketplace’u.
Efekt
Klient dostał stronę, która jasno rozdziela markę i dwa produkty, tłumaczy nietypowy materiał i prowadzi do zapytania. Nie podajemy liczb sprzedaży ani odwiedzin, bo ich nie publikujemy. Efekt jakościowy widać w samej strukturze: każda informacja ma swoje miejsce, a droga od zdjęcia produktu do formularza to kilka kliknięć. Deklaracje o ekologii i recyklingu pochodzą od marki i tak je prezentujemy. Strona jest gotowa na rozbudowę: kolejne produkty można dodać jako nowe karty w tym samym układzie, bez przebudowy całości.
Dla kogo takie rozwiązanie
Takie podejście sprawdzi się u producentów i małych manufaktur, które mają jeden do kilku produktów, sprzedają firmom i potrzebują strony tłumaczącej technologię lub materiał. Jeśli produkt wymaga ustaleń przed zakupem, na przykład koloru, wymiarów czy ilości, formularz zapytań jest lepszy niż koszyk. Zobacz też nasze usługi.
Strona producenta dla firm: jak pokazać materiał i skłonić do zapytania
ECODDC to według opisu marka z Bydgoszczy, która sprzedaje organizery z tektury falistej firmom. Taka oferta wymaga strony, która tłumaczy materiał, pokazuje dane techniczne i zbiera zapytania, a nie imituje sklepu. Sprawdza się tu kolejność: najpierw idea marki, potem produkty, wreszcie formularz z wyborem produktu i personalizacji. Przy sprzedaży B2B klient często potrzebuje ustaleń przed zakupem, na przykład koloru czy ilości, więc zapytanie bywa lepsze niż koszyk.
Ta strona jest statyczna, bez WordPressa, i to rozsądny wybór przy kilku stałych podstronach: jest szybka i prosta w utrzymaniu. Jak szybkość wpływa na odbiór witryny, wyjaśnia artykuł o optymalizacji szybkości stron WordPress. O prezentacji produktu na ekranach różnej wielkości piszemy w tekście o projektowaniu stron internetowych. Podobną filozofię lekkiej wizytówki znajdziesz w realizacji strony producenta soków Sokoniada.
Chcesz wiedzieć, ile kosztuje taka strona? Użyj kalkulatora wyceny, przejrzyj usługi lub skontaktuj się z nami.
FAQ
Czy strona producenta produktów dla firm musi mieć sklep internetowy?
Nie zawsze. ECODDC pokazuje produkty, parametry i możliwość personalizacji, a zamówienie zaczyna się od zapytania z formularza. Przy produktach dopasowywanych do firmy, na przykład kolorem, taki model bywa wygodniejszy niż koszyk, bo najpierw trzeba ustalić szczegóły.
Dlaczego ta strona nie działa na WordPressie?
Serwis ma kilka stałych podstron i niewiele treści zmieniających się w czasie, więc statyczny HTML z jednym skryptem PHP do formularza w zupełności wystarcza. Jest szybki, prosty w utrzymaniu i ma mniejszą powierzchnię ataku niż rozbudowany CMS. Gdy treści zaczną przybywać, można go przenieść na WordPress.
Jak opisywać produkt ekologiczny, żeby nie przesadzić z deklaracjami?
Warto trzymać się tego, co producent potrafi uzasadnić: materiał, sposób produkcji, możliwość recyklingu. Hasła takie jak „100% ekologiczne” na stronie ECODDC to deklaracje marki i tak je traktujemy. Za rzetelność twierdzeń odpowiada firma, a my dbamy o ich czytelną prezentację.
Co daje formularz zapytania zamiast samego adresu e-mail?
Formularz od razu zbiera potrzebne informacje: dane kontaktowe, firmę i produkt, którego dotyczy pytanie. Dzięki temu pierwsza odpowiedź może być konkretna. Dodatkowo działa walidacja po stronie serwera, zgoda RODO i ukryte pole przeciw botom.
Ile trwa przygotowanie takiej strony wizytówkowej dla producenta?
Czas zależy od liczby produktów, gotowości zdjęć i tekstów oraz tego, czy potrzebna jest dodatkowa funkcja. Dlatego nie podajemy sztywnych terminów bez rozmowy. Po krótkim briefie potrafimy określić zakres i harmonogram dla konkretnej firmy.
Szukasz strony dla producenta lub marki produktowej? Zobacz nasze usługi, sprawdź inne realizacje albo napisz do nas, a przygotujemy propozycję dopasowaną do Twojej firmy.
