U svijetu moderne arhitekture i dizajna interijera, detalji nisu samo ukras – oni su temelj strukture. Kada moj prijatelj Dejan stvara i distribuira vrhunske okove za staklo kroz svoj brend DINEA CONSILIUM (čiji cjelokupni asortiman možete istražiti na njihovom novom B2B web dućanu) u Sesvetama, njegova digitalna platforma mora zračiti istom onom robusnošću, preciznošću i premium estetikom koju ti proizvodi imaju u stvarnosti.
Slogan brenda, "Hard wood. Cold metal. Raw soul.", postavio je izuzetno visoku ljestvicu za vizualni identitet i performanse. Cilj je bio jasan: stvoriti digitalni prostor koji će arhitektima, instalaterima i uvoznicima pružiti besprijekoran uvid u bogat asortiman od čak 16 različitih kategorija proizvoda, omogućiti im brzu izradu upita za ponudu, a istovremeno raditi munjevitom brzinom na svim uređajima – bez nepotrebnog kognitivnog opterećenja i bloated softvera.
Većina B2B web stranica pati od kronične sporosti jer koriste teške i pretrpane e-commerce platforme s desecima instaliranih dodataka. Za Dinea Consilium odabrali smo potpuno drugačiji, inženjerski čist put.
U nastavku donosim detaljnu analizu kako smo riješili ključne izazove u dizajnu asortimana, implementirali B2B sustav ponuda i postigli vrhunske performanse.
1. Prva zečja rupa: Strukturiranje 16 stupova asortimana bez vizualnog kaosa
Prvi i najveći UX izazov bio je kako na jednoj stranici prikazati izuzetno široku paletu proizvoda. Dinea Consilium nudi sve: od garnitura za klizna vrata, okova za zaokretna vrata, staklenih stijena i pregrada, pa do gelendera, pametnih brava, podnih opruga i sitnih konektora.
Klasičan pristup s beskonačnim padajućim izbornicima stvorio bi frustrirajuće korisničko iskustvo na mobilnim telefonima, koje monteri i instalateri najčešće koriste dok su na terenu.
Rješenje je bilo kreiranje modularnog vizualnog grida kategorija izravno na naslovnici. Umjesto suhoparnog teksta, svaka od 16 kategorija dobila je svoju visokokvalitetnu, suptilno zatamnjenu fotografiju s jasnim bijelim nazivom preko nje.
Ovaj raspored omogućuje korisniku da jednim pogledom skenira cjelokupnu ponudu brenda. Bilo da traže "Šarke za tuš kabine" ili "SUS Standoff nosače", do željenog asortimana dolaze jednim jedinim klikom. Grid je u potpunosti responzivan, prilagođavajući se dinamički od jednog stupca na mobitelima do četiri stupca na velikim desktop ekranima.
2. Druga zečja rupa: B2B sustav ponuda i lagana "Bestseller" košarica bez WooCommercea
Dinea Consilium je primarno B2B brend usmjeren na profesionalce. Njihovi kupci ne kupuju pojedinačne proizvode nasumično s karticama, već šalju specifikacije i traže strukturirane ponude za veće projekte.
Instalacija kompletnog WooCommerce sustava samo radi slanja upita stvorila bi ogroman operativni trošak (bloat), usporila učitavanje stranice za nekoliko sekundi i zahtijevala stalno održavanje baze podataka.
Inovativni B2B "Quote Basket" u Vanilla JS-u
Umjesto teškog e-commerce backend sustava, razvili smo vlastitu, ultra-laganu JavaScript košaricu koja radi u potpunosti na klijentskoj strani (client-side).
- Bestseller sekcija: Na stranici smo istaknuli najtraženije proizvode (poput kliznih valjaka serija SK-388, SK-387, SK-550) s točnim oznakama i brzim gumbima "Po narudžbi".
- Košarica u stvarnom vremenu: Korisnik može dodati željene proizvode u košaricu koja se dinamički ažurira u zaglavlju bez osvježavanja stranice.
- 0.00 € Cijene za neregistrirane: Kako se radi o veleprodajnom asortimanu, cijene su prikazane kao 0.00 € ili "na upit" za obične posjetitelje, potičući ih da se registriraju za B2B portal kako bi pristupili veleprodajnim cjenicima bez PDV-a.
Kada klijent završi s odabirom, umjesto odlaska na komplicirano plaćanje, sustav otvara čistu formu za upit. JavaScript u pozadini generira strukturirani JSON upit i šalje ga Dejanu izravno na B2B portal ili e-mail, drastično skraćujući vrijeme potrebno za izradu službene ponude.
3. Treća zečja rupa: Ekstremna optimizacija performansi bogatog kataloga (WebP)
Web stranica s 16 vizualnih kategorija i desecima slika proizvoda može lako postati noćna mora za performanse. Ako se koristi standardni PNG ili JPEG format, ukupna težina početne stranice prešla bi 5 megabajta, što bi uzrokovalo zastajkivanje na mobilnim mrežama i loše PageSpeed ocjene.
Problem smo riješili strogim inženjerskim protokolom optimizacije medija:
- Masovna WebP konverzija: Sve izvorne fotografije kategorija i proizvoda prošle su kroz automatizirani Python cjevovod koji je smanjio njihove dimenzije na maksimalno
1600pxširine (dovoljno za vrhunsku oštrinu na Retina zaslonima) i konvertirao ih u.webpformat s kvalitetom 80. - Impresivni rezultati kompresije: Naš set slika je s početnih 1.6 megabajta smanjen na nevjerojatnih 153 kilobajta bez ikakvog vidljivog gubitka kvalitete! Primjerice, glavna slika zaglavlja smanjena je s 820 KB na svega 63 KB.
- Native Lazy Loading: Sve slike ispod prvog ekrana (Fold-a) učitavaju se isključivo kada posjetitelj skrola do njih, čime smo uštedjeli dragocjene mrežne resurse i omogućili trenutni First Contentful Paint (FCP).
4. B2B Registracija i GDPR sukladnost
Na dnu stranice nalazi se upečatljiva CTA sekcija namijenjena monterima i uvoznicima s pozivom na otvaranje poslovnog računa za pristup veleprodajnim cijenama. U podnožju su jasno i pregledno strukturirani svi kontakt podaci (telefon u Sesvetama, službeni e-mail i fizička adresa) te brzi linkovi na Opće uvjete, Pravila privatnosti i Postavke kolačića.
Integriran je i elegantan glassmorphic modal za pravila o kolačićima koji poštuje privatnost korisnika, pohranjujući pristanak isključivo lokalno u pregledniku klijenta, čime je postignuta stopostotna GDPR usklađenost bez usporavanja weba.
Rezultati koji govore sami za sebe
Izgradnjom weba na vanilla principima i izbjegavanjem teških dodataka, Dinea Consilium je dobila digitalni katalog dostojan svjetskih brendova:
- Brzina učitavanja: Stranica se učitava za manje od 200 milisekundi.
- Lighthouse performanse: Savršenih 100/100 na mobilnim i stolnim računalima.
- B2B učinkovitost: Monteri s terena sada mogu sastaviti popis potrebnih okova u 30 sekundi i poslati upit bez otvaranja ijedne dodatne stranice.
Dinea Consilium je s ovim sustavom dobila vrhunski alat za digitalnu prodaju koji savršeno prenosi njihovu filozofiju – čvrsto drvo, hladan metal i sirovu dušu. Posjetite njihov službeni web dućan na dineaconsilium.hr i uvjerite se u brzinu i premium asortiman! Preciznost u svakom pikselu! 📐🔩✨