SAUBERAIR - Tehnologija pročišćavanja zraka

Izazov

Sauberair prodaje inovativan proizvod: ultra-tanke zidne pročišćivače zraka (samo 9cm dubine) koji izgledaju kao uokvirena umjetnička djela. Koristeći patentiranu COANDA tehnologiju protoka zraka, UVC sterilizaciju i fotokatalitičke filtere, ovi uređaji eliminiraju 99,99% virusa i bakterija dok izgledaju kao slika na zidu. Izazov je bio složen:

• Educirati B2B klijente o sofisticiranoj tehnologiji pročišćavanja zraka — COANDA efekt, fotokataliza, PM2.5 filtracija — bez preopterećenja informacijama
• Pozicionirati Sauberair na hrvatskom institucionalnom tržištu: zdravstvene ustanove, uredi, škole, hoteli i maloprodajni prostori
• Predstaviti četiri modela proizvoda s detaljnim specifikacijama i jasnom usporedbom
• Generirati kvalificirane upite putem profesionalnog kontakt obrasca
• Podržati dva jezika — hrvatski za domaće tržište, engleski za međunarodni doseg

Rješenje

Izgradili smo modernu, performansno orijentiranu web stranicu koristeći Astro — statički generator stranica koji isporučuje gotovo trenutno učitavanje stranica s nula JavaScript opterećenja gdje nije potrebno. U kombinaciji s Tailwind CSS v4 i TypeScriptom, rezultat je brza, pristupačna i održiva stranica koja educira i konvertira.

Proces dizajna

Projekt je započeo detaljnom fazom dizajna u Figmi. Mapirali smo informacijsku arhitekturu za proizvod koji zahtijeva edukaciju prije kupnje, dizajnirali vizualnu hijerarhiju koja vodi posjetitelje od razumijevanja tehnologije do zahtjeva za ponudu.

Što smo izgradili

• 10 stranica sadržaja — pokrivajući tehnologiju, dizajn, rješenja po industriji, proizvode, o nama i kontakt — svaka namjenski izrađena za vođenje potencijalnih klijenata kroz proces kupnje
• Interaktivni prikaz tehnologije — 7-slideova parallax animacija koja objašnjava COANDA efekt protoka zraka s GIF demonstracijama, responsivno ponašanje (vertikalno skrolanje na desktopu, horizontalno povlačenje na mobitelu) i podrška za smanjeno kretanje
• Sustav usporedbe proizvoda — četiri modela (FLAT-LITE, FLAT WiFi/IoT, FLAT-BT, FLAT-ULTRA) s detaljnim specifikacijama i tablicom usporedbe
• 6 kategorija rješenja — prilagođeni sadržaj za zdravstvo, obrazovanje, urede, hotele, maloprodaju i stanovanje — svaka adresira specifične probleme kvalitete zraka u industriji
• Pametni B2B kontakt obrazac — progresivna polja za detalje tvrtke, odabir industrije i zahtjeve prostora, s Postmark dostavom e-pošte, honeypot zaštitom od neželjene pošte i ograničenjem broja zahtjeva
• Internacionalizacija u vrijeme izgradnje — odvojene hrvatske (sauberair.hr) i engleske (sauberair.eu) implementacije iz istog koda. Nula runtime opterećenja za prebacivanje jezika — svaka verzija je optimizirana za svoju lokalizaciju
• Carousel recenzija — automatsko pomicanje svjedočanstava s indikatorima napretka, navigacijom tipkovnicom i pauziranjem pri prelasku miša
• Bogati Schema.org strukturirani podaci — Organization, LocalBusiness, Product, Service, FAQ i WebSite sheme za sveobuhvatnu vidljivost u tražilicama
• Samostalno hostirani IBM Plex Sans — 14 varijanti fonta u WOFF2 formatu s kritičnim preloadingom fontova
• WCAG pristupačnost — preskakanje navigacije, semantički HTML, ARIA oznake, indikatori fokusa, podrška za čitače zaslona i način visokog kontrasta
• Arhitektura privatnosti — bez kolačića za praćenje, bez analitičkih skripti. GDPR usklađenost dizajnom, ne bannerom

Desktop pregled

Mobilni pregled

Performanse

Astro filozofija nula-JS-po-defaultu se isplati. Ovo su stvarni Lighthouse rezultati za sauberair.hr:

Rezultati

Sauberair sada ima profesionalnu B2B web prisutnost koja odgovara sofisticiranosti njihovog proizvoda:

• Pristup edukacijom — složena tehnologija pročišćavanja zraka objašnjena kroz interaktivne animacije i strukturirani sadržaj, pretvarajući tehnički proizvod u razumljivo rješenje
• Generiranje kvalificiranih upita — strukturirani kontakt obrazac koji unaprijed prikuplja detalje tvrtke, industriju i zahtjeve prostora
• Dvojezični doseg — hrvatsko i englesko tržište servirano iz istog koda bez kompromisa u performansama
• Privatnost dizajnom — bez praćenja, bez kolačića, bez analitike. GDPR usklađenost kroz arhitekturu, ne pristanak bannerima
• Pristupačno svima — WCAG-usklađeni dizajn koji osigurava da stranica radi za sve, uključujući korisnike pomoćnih tehnologija