Případová studie: jak redesign ve Webflow zvedl poptávky dema z 1,2 % na 3,7 %

Kontext: web, který se musel stát nástrojem růstu

Oscilar je SaaS pro prevenci podvodů. Jak firma rostla, web měl jediný úkol: přivádět víc poptávek dema. Vizitka už nestačila.

S Oscilarem jsem pracoval jako přímý dodavatel. Celý projekt najdete na stránce případové studie Oscilar. Tady se chci věnovat jedné věci: jak testování fungovalo a co si z něj můžete odnést.

Pro pořádek. Uvedu ověřené výsledky a obecný postup, který používám. Nebudu předstírat, že si pamatuji každý jednotlivý test. Cílem článku je proces, ne seznam barev tlačítek.

Co jsme měřili

Jedna hlavní metrika: konverze poptávek dema, tedy podíl návštěvníků, kteří o demo požádají. Vše ostatní sloužilo jako podpůrný signál.

• Konverze poptávek dema (hlavní): na začátku 1,2 %.
• Průměrná doba návštěvy (podpůrná): prozkoumávají lidé web, nebo odcházejí?
• Míra odskočení (podpůrná): je stránka na první pohled relevantní?

Proč jen jedna hlavní metrika? Když sledujete deset cílů, každý test v něčem vyhraje. Vyberte jedno číslo spojené s tržbami a ostatní použijte jen k pochopení, proč se pohnulo.

Před prvním testem si také zapisuji výchozí stav a datum, kdy byl změřen. Zní to samozřejmě, ale mnoho týmů to přeskočí a pak nedokážou prokázat, že se něco zlepšilo. Výchozí stav změní „cítím, že je to lepší“ na číslo, které obhájíte před zakladatelem i klientem.

Měření držím záměrně nudné: jedna konverzní událost pro poptávku dema, jedna jasná definice návštěvníka a každý týden stejný pohled v reportu.

Proces testování: jak přistupuji k A/B testování ve Webflow

U Oscilaru jsme analyzovali, co konverzi brzdí, navrhli několik variant řešení a iterativně je testovali proti sobě. Níže je obecný postup, který používám na projektech ve Webflow. Berte ho jako popis mé práce, ne jako záznam jednotlivých experimentů Oscilaru.

1. Začněte diagnózou

Dřív než cokoli navrhnete, zjistěte, kde návštěvníci odpadají. Analytika, nahrávky relací a zdravý rozum většinou ukážou stejné problémy: nejasný slib, slabé CTA, zbytečné tření, pomalé stránky.

2. Napište hypotézu

Ne „zkusme zelené tlačítko“. Napište: „Návštěvníci nad ohybem nechápou, co děláme, takže konkrétnější nadpis zvýší počet poptávek dema.“ Hypotéza říká, co změnit a jaký výsledek by vás vyvrátil.

3. Měňte jednu věc najednou

Když změníte nadpis, layout a formulář zároveň, nezjistíte, co zabralo. Jeden experiment, jedna změna. Je to pomalejší, ale pokaždé se něco naučíte.

4. Hlídejte velikost vzorku a signifikanci

Test potřebuje dost návštěvníků a dost času, než vyhlásíte vítěze. Většina nástrojů ukazuje statistickou jistotu a běžnou konvencí je počkat na 95 %. Netestujte jen do chvíle, kdy jedna varianta vede, a nechte test běžet po celé týdny, aby se započítalo chování ve všední dny i o víkendu. Weby s nízkou návštěvností potřebují trpělivost nebo větší změny v jednom testu.

5. Nasaďte vítěze a testujte znovu

Vítěz se stane novým základem. Další hypotéza na něj navazuje. To znamená „iterativně“: řada malých změřených zlepšení místo jednoho velkého redesignu a doufání.

Praktická poznámka k výběru, co testovat: seřaďte nápady podle očekávaného dopadu a pracnosti. Co je snadné nasadit a pravděpodobně pohne číslem, jde první. Velké a nejisté nápady počkají.

Také si vedu prostý záznam experimentů: datum, hypotéza, varianty, výsledek, rozhodnutí. Za půl roku z něj zjistíte, co už jste zkoušeli, a nebudete stejné věci testovat dvakrát. U klienta na paušálu je to zároveň důkaz, že práce přináší výsledky.

Nakonec nepodceňujte kvalitu implementace. Varianta, která bliká při načtení nebo se na některém prohlížeči rozbije, zkresluje výsledek. Proto před spuštěním každé varianty projdu všechny breakpointy a hlavní prohlížeče.

Nástroje, které fungují s Webflow

Webflow má od nedávna vlastní testovací produkt. Podle oznámení Webflow umí Webflow Optimize A/B testování (například nadpisů, obrázků, CTA a formátů obsahu) a personalizaci pro segmenty publika bez kódu. Aktuální podmínky tarifů si ověřte na webu Webflow.

Další možnosti jsou externí:

• Optibase je aplikace pro Webflow určená k A/B testování, popsaná v jejich průvodci. Je to zdroj od dodavatele, tak ho čtěte.
• PostHog má návod na A/B testy ve Webflow pomocí feature flagů a analytiky.
• VWO, AB Tasty a Optimizely jsou nástroje, na které Google odkazuje po ukončení Google Optimize. Nápověda Googlu uvádí, že Optimize skončil 30. září 2023 a že Google s těmito třemi spolupracuje na integraci s Google Analytics.

Moje pravidlo: vyberte nástroj podle návštěvnosti, rozpočtu a týmu. Důležitější než logo je metoda. Dobrá hypotéza v jednoduchém nástroji porazí odfláknutý test v drahém.

Co obvykle zvedá demo konverzi u B2B SaaS webů

Tohle hledám jako první. Jsou to hypotézy k otestování na vašem webu, ne záruky.

• Jasné CTA. Jedna hlavní akce na stránku, pojmenovaná jako výsledek („Domluvit demo“), viditelná bez scrollování a opakovaná tam, kde je čtenář přesvědčen.
• Cílený obsah. Text, který mluví o skutečném problému a roli kupujícího, ne obecný seznam funkcí. U produktu proti podvodům je to nejdřív problém podvodů, až potom produkt.
• Lepší UX. Méně kroků, kratší formulář, navigace, která vede k demu, ne pryč od něj.
• Rychlejší web. Těžké stránky ztratí návštěvníky dřív, než něco přečtou. Pomáhají optimalizované obrázky, úsporné interakce a čistá struktura.
• Důkazy u rozhodnutí. Loga zákazníků, citace a výsledky vedle CTA, ne ukryté na jiné stránce.

U Oscilaru byl výsledek přičten právě této kombinaci: jasná CTA, lepší UX, cílený obsah a rychlejší výkon.

Kde bych testoval jako první

Při omezené návštěvnosti začínám nahoře ve funnelu: nadpis na homepage a hlavní CTA. Tyto dva prvky vidí každý návštěvník. Potom přijde samotná stránka dema, pak formulář. Ceník a produktové stránky následují, až hlavní cesta funguje.

Zvlášť sleduji i mobil. Layout, který konvertuje na desktopu, může na telefonu lidi ztrácet. Ve Webflow snadno zkontroluji všechny breakpointy, než varianta půjde ostře.

Výsledky: z 1,2 % na 3,7 % za čtyři měsíce

Konverze poptávek dema se zhruba ztrojnásobila. Důležitá jsou i čísla o zapojení: delší návštěvy a méně odskoků naznačují, že návštěvníci našli relevantní obsah a procházeli dál, místo aby byli tlačeni do formuláře, který nechtěli.

Jedno upozornění: čísla pocházejí z redesignu a testování dohromady. Nedokážu oddělit, kolik přinesl nový design a kolik jednotlivé experimenty, a nevěřil bych nikomu, kdo tvrdí opak.

Pro agenturu nebo klienta na měsíčním paušálu je zajímavý časový rámec. Čtyři měsíce stačí na sérii testů a zároveň jsou dost krátké, aby se udržel tah. Takový výsledek málokdy vznikne z jednoho šťastného experimentu. Je to složený efekt několika rozhodnutí, každého malého.

Poučení a checklist k použití

1. Vyberte jednu hlavní metriku spojenou s tržbami (poptávky dema, ne zobrazení stránek).
2. Zaznamenejte výchozí stav dřív, než cokoli změníte.
3. Nejdřív diagnostika: zjistěte, kde návštěvníci odcházejí nebo váhají.
4. Každou hypotézu zapište i se změnou a očekávaným efektem.
5. Testujte jednu změnu najednou.
6. Velikost vzorku a délku testu určete předem a nechte běžet celé týdny.
7. Nekončete předčasně jen proto, že varianta vypadá třetí den dobře.
8. Sledujte podpůrné metriky (odskočení, doba návštěvy), abyste pochopili proč.
9. Nasaďte vítěze, zapište výsledek a napište další hypotézu.
10. Držte stránky rychlé. Výsledek testu na pomalé stránce je výsledek o pomalé stránce.

Pokud vedete měsíční paušál pro klienty, je tento checklist zároveň formát reportu: hypotéza, výsledek, další krok. Klienti mu rozumí a paušál se tak snadno obhájí.

Můj pohled

Výsledek Oscilaru není kouzlo. Skok z 1,2 % na 3,7 % vznikl tím, že web je věc, kterou měříte a zlepšujete, ne něco, co spustíte a zapomenete.

Stavím ve Webflow, protože v něm rychle upravím stránku a nasadím variantu bez fronty na vývojáře. Právě rychlost dělá iteraci dostupnou. Test, který se staví tři týdny, se málokdy spustí podruhé.

Moje rada: nezačínejte nástrojem. Začněte jedním číslem, které chcete pohnout, najděte největší překážku a otestujte proti ní svůj nejlepší nápad. Pokud chcete probrat svůj web, ozvěte se mi.

Za nejcennější považuji to, že testování mění debaty. Místo „mně se líbí modrá“ se klient a já bavíme o hypotéze a datech. Rozhodnutí je pak rychlejší a méně osobní.

Časté otázky

AutorPeter CekanakDesignér a Webflow vývojář · white-label partner pro agentury

Od roku 2018 navrhuji a stavím weby ve Webflow pro agentury a startupy — Client-First, GSAP, CMS a AI automatizace. Weby, které jsem postavil, pomohly klientovi k exitu za 10 mil. $ a jednomu SaaS ztrojnásobily poptávky dema.

Webflow Certified ExpertRelume ExpertClient-First