Hlavné konverzné stránky 06
- Domovská stránka
- Prehľad funkcií
- Interaktívny cenník
- Návody
- Kontakt a demo
- Centrum Builder Resources
Prípadová štúdia · SaaS / technológie pre stavebníctvo
Z exportu z Webflow na rastovú SaaS platformu s vlastným kódom
Web25 vyvinul kompletný marketingový web Smart Builder 360 pre SaaS na riadenie stavebných projektov z Ohia. Pôvodný základ z Webflow sme presunuli na vlastnú platformu v HTML, CSS a JavaScripte, ktorú sami udržiavame. Jej úlohou je vysvetliť zložitý produkt, získať dôveru a premeniť stavebníkov na používateľov skúšobnej verzie.
Vývoj na mieru
HTML · CSS · JavaScript
Migrácia z Webflow
Konverzné UX pre SaaS
smartbuilder360.com ↗
Smart Builder 360 · Ohio, USAWebflow → vlastný kód
46indexovaných podstránok webu
10landing pages pre funkcie
196evidovaných vydaní
31stránok opravených v jednom mobilnom nasadení
Úloha
Vysvetliť seriózny SaaS produkt ľuďom, ktorí by radšej stavali
Smart Builder 360 spája rozpočty, špecifikácie, ponuky, výber materiálov, zmenové objednávky, bankové čerpania, sledovanie financií a plánovanie do jedného systému pre menšie firmy stavajúce rodinné domy.
Web musel rozsiahlu, prepojenú aplikáciu preložiť do jednoduchej reči pre stavebné firmy, ktoré nemajú čas na softvérový žargón. Každá stránka musela rýchlo odpovedať na tri otázky: čo to rieši, ako to zapadá do spôsobu práce stavebníkov a čo mám urobiť ďalej?
Nešlo o jednu landing page. Vznikla priebežne rastúca digitálna platforma, ktorá zahŕňa hlavné predajné stránky, desať stránok o funkciách produktu, logiku cenníka, návody, získavanie dopytov, vyhľadávateľnú knižnicu zdrojov, porovnávací obsah, technické základy SEO a priebežné vydania.
Spolupráca na dizajneUI/UX dizajn od Minerva Visuals
Navštíviť Minerva Visuals ↗
Minerva Visuals navrhli vizuálnu podobu webu. Web25 ju preniesol do responzívneho a udržiavateľného produkčného systému a rozšíril ju na celý web.
Priebeh migrácie
Zachovať vizuálnu ambíciu a zároveň prevziať kontrolu nad kódom
Audit pôvodného webu vo Webflow
Skôr než sme zmenili spôsob nasadzovania, zmapovali sme každú šablónu, responzívny breakpoint, spoločný navigačný vzor, interakciu, súbor, konverznú cestu a staršiu závislosť.
Vyňatie a stabilizácia front-endu
Web sme presunuli do samostatnej kódovej základne s HTML pre jednotlivé stránky, spoločným CSS, správaním v JavaScripte, lokálnymi súbormi, vlastnými fontmi a nasadzovaním cez správu verzií.
Prestavba znovupoužiteľného systému
Navigáciu, výzvy na akciu, karty, akordeóny, vzory pre funkcie, cenové bloky, rozloženie článkov aj obsah pätičky sme zjednotili, aby sa dala každá zmena bezpečne nasadiť na desiatky stránok.
Rozšírenie nad rámec pôvodného page buildera
Nové produktové stránky, animované makety rozhrania, filtrovanie zdrojov, výpočty cien, štruktúrované dáta a procesy pre dopyty sme písali priamo v kóde namiesto čakania na postup v page builderi.
Prevádzka ako živej SaaS platformy
Web sa dnes vyvíja cez evidované vydania: nové príbehy funkcií, konverzné experimenty, mobilné opravy, novinky v produkte, stránky so zdrojmi aj technické vylepšenia môžu ísť von priebežne.
Informačná architektúra
Nie jedna stránka, ale celý ekosystém na získavanie zákazníkov
Výsledná architektúra prepája všeobecné vysvetlenie produktu s cielenými vyhľadávaniami konkrétnych funkcií, porovnaním cien, zaškolením, podporou a rastúcou knižnicou zdrojov pre stavebníkov.
Detail produktu 10
- Rozpočty a cenové ponuky
- Špecifikácie a výber materiálov
- Ponuky a zmenové objednávky
- Formuláre bankových čerpaní
- Plánované vs. skutočné náklady
- Výkazy a plánovanie
Zachytenie dopytu 26
- Vzdelávacie príručky pre stavebníkov
- Porovnania softvéru
- Prevádzkové šablóny
- Obsah o asociáciách v Ohiu
- Zdroje pre rast firmy
- Landing pages pre konkrétne problémy
Dôvera a prevádzka 04
- Prehľad produktu
- Odporúčací program
- Ochrana osobných údajov
- Obchodné podmienky
- Prechod na prihlásenie do portálu
- Prechod na registráciu skúšobnej verzie
Rozprávanie o produkte
Desať prepojených modulov, každý s jasným dôvodom existencie
Web funkcie len nevymenúva. Každý modul spája s finančným, prevádzkovým alebo komunikačným problémom, ktorý menší stavebník pozná zo stavby.
01Finálny výber materiálov
02Špecifikácie
03Správa ponúk
04Cenové ponuky
05Rozpočtovanie projektov
06Plán vs. skutočnosť
07Zmenové objednávky
08Formuláre bankových čerpaní
09Výkazy projektov
10Plánovanie
Vývoj na mieru
Časti, ktoré zo statického webu urobili fungujúcu rastovú platformu
Interaktívny SaaS cenník
Karty mesačných a ročných plánov počítajú cenu v reálnom čase podľa počtu používateľov a doplnku Digital Signatures vrátane aktualizovanej ročnej úspory.
Vyhľadávateľná knižnica zdrojov
Štítky kategórií, okamžité vyhľadávanie v názvoch, hlásenie pri nulových výsledkoch a priame odkazy cez parametre v URL umožňujú prechádzať zdroje pre stavebníkov bez opätovného načítania stránky.
Automatizácia dopytov
Kontaktné a kampaňové formuláre overujú vstupy, dávajú prístupnú spätnú väzbu o stave a kvalifikované dopyty posielajú do automatizovaného procesu.
Konverzné prechody
Marketingové stránky čisto nadväzujú na externý SaaS portál pre prihlásenie a registráciu skúšobnej verzie. Odkazy na demo posúvajú záujemcov, ktorí sa rozhodujú dlhšie, rovno do rezervácie termínu v kalendári.
Štruktúrované dáta o produkte
Schémy pre softvér, ponuku, článok, drobčekovú navigáciu a FAQ pomáhajú vyhľadávačom pochopiť aplikáciu aj obsah, ktorý ju podporuje.
Prístupné natívne vzory
Akordeóny v FAQ využívajú jednoduché natívne správanie prehliadača. Popisky, live regióny, stavy fokusu a štýly pre dotykové zariadenia zlepšujú použiteľnosť.
Responzívny vývoj
Najťažšia práca sa často skrývala v posledných piatich percentách
Veľké statické migrácie môžu na jednej obrazovke vyzerať hotovo a inde pritom skrývať vážne chyby. Responzívnu kvalitu sme brali ako inžiniersku úlohu pre celý systém, nie ako záverečnú vizuálnu kontrolu.
Konflikt vo vrstvení (z-index) posúval otvorené mobilné menu za obsah článku. Opravu sme otestovali a nasadili na všetky dotknuté šablóny.
Široké porovnávacie tabuľky spôsobovali, že sa celé stránky posúvali do strán. Každú tabuľku sme ohraničili, aby navigácia aj rozloženie stránky zostali stabilné.
Podčiarknutia pri prejdení myšou z desktopu mohli po ťuknutí na mobile zostať visieť. Breakpointy pre dotykové zariadenia teraz odstraňujú správanie, ktoré na dotykovú obrazovku nepatrí.
Karty s názvami článkov na menších obrazovkách zakrývali takmer celú fotografiu. Responzívny výrez teraz zachováva kontext aj čitateľnosť.
Karty s výhodami si vyžiadali niekoľko kôl úprav, kým sa na mobile pri orientácii na šírku vyriešilo orezávanie, medzery, poradie a prekrývanie šípok.
Náhľady zdrojov, ktoré sa v Safari posúvali, sme opravili bez zmeny rozložení, ktoré už v iných prehliadačoch fungovali stabilne.
Rozsah vývoja
Ručne udržiavaná kódová základňa pripravená na priebežné vydávanie
Produkčný repozitár dnes obsahuje takmer 50,000 riadkov značkovania stránok, viac ako 15,000 riadkov spoločných štýlov, 267 lokálnych mediálnych súborov a 339 sledovaných súborov projektu. Tento rozsah riadime cez správu verzií a malé vydania, ktoré sa dajú skontrolovať, nie cez neprehľadné úpravy v page builderi.
V rámci 196 evidovaných vydaní práca zahŕňala tvorbu stránok, positioning produktu, responzívne opravy, logiku cenníka, vyhľadávanie zdrojov, automatizáciu dopytov, analytiku, štruktúrované dáta, upratanie kanonických URL, údržbu sitemapy a priebežné rozširovanie obsahu.
Viditeľnosť vo vyhľadávaní · od apríla 2026
Vývojový základ už podporuje organickú návštevnosť
SEO sme začali v apríli 2026. Prvé údaje zo Search Console ukazujú, že nová platforma začína získavať stabilnú viditeľnosť, zatiaľ čo práca na obsahu a technickej stránke pokračuje.
Google Search Console · 1. apríla – 29. augusta 2026
118organických kliknutí
11.5Kzobrazení vo vyhľadávaní
1%priemerné CTR
19.3priemerná pozícia
Celý príbeh SEO si zaslúži vlastnú prípadovú štúdiu
Ďalej zdokumentujeme ročnú stratégiu, technické opravy, architektúru stránok postavenú na vyhľadávaní, obsahový systém a rast, ktorý stojí za týmito číslami.
Technológie platformy
Účelné nástroje prepojené vlastným kódom
HTML5CSS3JavaScriptVercelGoogle AnalyticsTag ManagerJSON-LDPabblyGoogle CalendarSaaS portál
Tvorte s Web25
Potrebujete web, ktorý udrží krok so seriózným SaaS produktom?
Zo zložitých platforiem robíme jasné cesty zákazníka a staviame kód, obsahový systém aj proces vydávania, vďaka ktorým môžu ďalej rásť.
Prebrať váš SaaS projekt