Modernizacja strony WWW Sykomat

Kompleksowa przebudowa platformy sprzedażowo-wizerunkowej dla lidera rynku wnętrzarskiego

Branża: wnętrza, B2C / B2B

Czas realizacji: 5 miesięcy

Zakres: badania UX, architektura informacji, projekt UI, development backend + frontend, optymalizacja wydajności

Technologie: Laravel, Alpine.js, Tailwind CSS, MySQL, Git, Figma

Wprowadzenie

Sykomat to firma z ponad 35-letnią historią, specjalizującą się w sprzedaży i doradztwie związanym z drzwiami, podłogami, oknami oraz elementami wykończenia wnętrz. Sieć 5 salonów stacjonarnych w aglomeracji warszawskiej, bogaty katalog produktów oraz wysoka renoma wśród klientów indywidualnych i partnerów biznesowych wymagały nowoczesnej platformy internetowej, która odda skalę działalności oraz usprawni obsługę użytkowników.

Celem projektu było stworzenie wydajnej, nowoczesnej i modularnej strony internetowej, która:

• podkreśli profesjonalny wizerunek marki premium,
• uprości prezentację szerokiego katalogu produktów,
• ułatwi kontakt i obsługę zapytań,
• wspomoże sprzedaż oraz współpracę z architektami i partnerami B2B,
• będzie łatwa w zarządzaniu i skalowalna technologicznie w kolejnych latach.

Wyzwania

Analiza dotychczasowej strony wykazała szereg barier dla użytkowników oraz ograniczeń technologicznych:

Brak spójnego UX i przejrzystości informacji

Oferta Sykomat jest szeroka — drzwi, podłogi, listwy, akcesoria, tarasy, okna. Użytkownicy zgłaszali:

• trudności w wyszukaniu właściwiej kategorii,
• brak logicznej struktury i filtrowania,
• mało użyteczne karty produktów.

Brak czytelnej ścieżki do zakupu lub kontaktu

Proces użytkownika był zbyt skomplikowany i nie prowadził płynnie:

przeglądam → wybieram → kontaktuję się → otrzymuję wycenę.

Przestarzałe technologie utrudniające rozwój

Dotychczasowa strona nie była oparta na nowoczesnych frameworkach, co:

• komplikowało dodawanie nowych sekcji,
• utrudniało optymalizację SEO i wydajności,
• ograniczało przyszłe wdrożenia (e-commerce, konfigurator).

Brak dedykowanej sekcji dla partnerów B2B

Sykomat intensywnie współpracuje z architektami, projektantami i deweloperami. Strona nie wspierała tego modelu pracy.

Cele projektu

Wspólnie z klientem zdefiniowaliśmy cele biznesowe, UX i technologiczne:

Biznesowe

• zwiększenie liczby zapytań ofertowych,
• poprawa konwersji ze strony produktowej do kontaktu,
• wzmocnienie wizerunku firmy premium,
• wsparcie sprzedaży w salonach stacjonarnych,
• ułatwienie współpracy B2B.

UX/UI

• zaprojektowanie przejrzystej struktury kategorii i nawigacji,
• uproszczenie kart produktu,
• wdrożenie intuicyjnych filtrów,
• pełna responsywność i mikrointerakcje,
• przyspieszenie procesu kontaktu.

Technologiczne

• stworzenie elastycznego i bezpiecznego systemu backendowego (Laravel),
• zapewnienie szybkiego i lekkiego frontendu (Alpine.js + Tailwind),
• zaprojektowanie skalowalnej bazy danych (MySQL),
• wprowadzenie kontroli wersji i CI/CD (Git),
• przygotowanie fundamentów pod przyszłe moduły (e-commerce, panel B2B).

Proces projektu

Badania i analiza UX

W ramach warsztatów i analizy zebraliśmy:

• mapy potrzeb użytkowników (klient indywidualny / B2B),
• istniejące problemy z nawigacją,
• dane o najczęściej odwiedzanych sekcjach,
• bariery konwersji na starej stronie.

Powstały persony UX:

• Remontujący właściciel mieszkania,
• Klient budujący dom,
• Architekt / projektant,
• Deweloper / partner biznesowy.

Architektura informacji i prototypy w Figma

Zaprojektowaliśmy kompletną architekturę informacji, w tym:

• nową strukturę kategorii produktów,
• zoptymalizowaną ścieżkę kontaktową,
• sekcję B2B z dedykowaną ofertą i możliwością szybkiego zapisu,
• nowe karty produktów z czytelną specyfikacją.

Powstały prototypy:

• low-fidelity – do testów UX
• high-fidelity – gotowe UI

Efektem był spójny design system:

• typografia premium,
• stonowana paleta kolorów,
• modularne komponenty UI w stylu nowoczesnych showroomów wnętrzarskich.

 

Development (Laravel + Alpine + Tailwind)

Backend (Laravel)

Zaimplementowaliśmy:

• system zarządzania treścią (CMS) oparty o moduły Laravel,
• moduł katalogu produktów,
• moduł galerii i zdjęć wysokiej rozdzielczości,
• moduł zapytań ofertowych,
• system partnerów B2B,
• API pod przyszłe funkcje e-commerce.

Wyeliminowaliśmy „twardo kodowane” elementy — teraz każdy moduł jest dynamiczny.

Frontend (Alpine.js + Tailwind CSS)

Frontend zbudowaliśmy w modelu:

• lekki,
• szybki,
• bez zbędnych zależności,
• płynny w interakcjach użytkownika.

Użycie Tailwind pozwoliło na:

• jednolity styl wizualny,
• szybkie iteracje,
• doskonałą wydajność.

Alpine.js odpowiada za:

• filtry produktów,
• dynamiczne rozwijacze,
• animacje przejść,
• modale i interaktywne galerie.

Baza danych (MySQL)

Zaprojektowana od nowa:

• optymalizacje zapytań,
• indeksy,
• logika relacji między kategoriami i produktami,
• moduł zdjęć i wariantów produktów.

Dzięki temu panel zarządzania jest szybki nawet przy dużej liczbie produktów.

CI/CD i praca zespołowa (Git)

Wdrożono:

• pełne repozytorium Git (GitHub/GitLab),
• code review,
• gałęzie dev → stage → prod,
• automatyczne testy,
• bezpieczny deployment.

Najważniejsze funkcjonalności

Zaawansowany katalog produktów

• rozbudowane kategorie (drzwi, podłogi, akcesoria itd.),
• filtry (kolor, typ, kolekcja, przeznaczenie),
• selekcja zdjęć,
• sekcja “Specyfikacja techniczna”.

Uproszczony proces kontaktu

• szybkie zapytanie z poziomu produktu,
• formularz wieloetapowy,
• automatyzacja przekierowania do odpowiedniego działu.

Sekcja B2B

• opis współpracy,
• prezentacja korzyści,
• formularz zgłoszeniowy z dedykowanymi polami,
• przygotowanie pod panel logowania partnerów.

Ekspozycje salonów

• interaktywna mapa,
• szczegółowe karty salonów,
• harmonogramy pracy.

Blog i inspiracje

Możliwość dodawania:

• poradników dla klientów,
• inspiracji wnętrzarskich,
• aktualności.

Rezultaty

Efekty biznesowe

• +61% więcej zapytań ofertowych w pierwszych 3 miesiącach,
• +47% dłuższy średni czas sesji (lepsze UX),
• +38% większy ruch organiczny,
• -52% niższy współczynnik odrzuceń,
• wzrost liczby partnerów B2B kontaktujących się przez stronę.

Efekty technologiczne

• strona gotowa pod e-commerce i konfigurator produktów,
• pełna kontrola nad treściami dzięki modułowemu backendowi,
• szybkie ładowanie (loading < 1,1 s na mobile),
• możliwość łatwego skalowania i dodawania nowych modułów.

Efekty wizerunkowe

• nowoczesny i spójny design premium,
• prezentacja firmy jako lidera branży,
• lepsza ekspozycja produktów w formie katalogu showroomowego.

Wnioski i dalszy rozwój

Nowa platforma Sykomat stała się solidną bazą do dalszych inwestycji technologicznych. Zaplanowane kolejne etapy:

1. Panel logowania partnerów B2B
2. Konfigurator drzwi / podłóg
3. Pełny moduł e-commerce
4. Integracja z systemem ERP
5. Zaawansowane statystyki i marketing automation

Projekt udowodnił, że połączenie odpowiedniej strategii UX z nowoczesnym stackiem (Laravel + Alpine + Tailwind) może diametralnie zwiększyć efektywność biznesową firmy działającej w branży wnętrzarskiej.