Zpět na seznam článků

Případovka: Hypoteční kalkulačka a snížení ceny za konverzi o 50 %

Jak jedna řádka téměř poslala celý projekt do kopru a 6 změn, které znamenaly snížení ceny za konverzi na polovinu.

Pripadovka-penize-nahled

Před rokem mě oslovili z penize.cz, zda bych jim nepomohl zlepšit hypoteční kalkulačku. Začali jsme klasicky UX analýzou, bez které už téměř nikdy nezačínám projekt.

Původní stav

Tohle byla úvodní stránka kalkulačky:

Původní verze kalkulačky hypoték

Hlavní zjištění:

  1. Chybí social proof.
  2. Lidem není jasné, která dlaždice je zaškrtnutá (typ hypotéky).
  3. Hodně lidí kliká na lištu s LTV, která není klikací.
  4. Není jasné, jaká fixace má nejlepší úrok, lidi tak skáčou od výsledků zpět do kalkulačky a upravují parametry (tzv. poggo-sticking).
  5. Po kliknutí na tlačítko se ukazuje na 5-10 sekund animované kolečko, než se ukáží výsledky.
    loading animace na usetri.penize.cz
    Více o optimalizaci nahrávání.
  6. Je špatně nastavená analytika a nesledují se správně všechny cíle (kliknutí na tlačítko, vyplnění formulářů, odkrytí výsledků).

Po kliknutí na tlačítko Porovnat nabídky na ukáže stránka s kontaktními údaji a skrytými výsledky (omluvte zhoršenou kvalitu, lepší nemám).

Popup s kontakty

Hlavní zjištění:

  1. Neukazujeme přesná čísla, ale pořadí ji i tak užitečné. Zde se klasicky pere cíl uživatele a cíl zadavatele. Uživatel by chtěl vidět výsledky, zadavatel potřebuje kvůli byznys modelu kontakt.
  2. Polovina lidí odchází bez vyplnění kontaktních údajů, ptáme se na 4 údaje (psč v předchozím kroku, celé jméno, e-mail a telefon), ale stačí nám jen telefon.
  3. Cca třetina lidí kliká na textový odkaz pro úpravu parametrů (i ve chvíli, kdy nevidí přesné výsledky). Hypotéza je taková, že jim stačí vidět pořadí bank, nebo chtějí změnit parametry.
  4. Textace v popupu je poněkud nešikovná: Kontaktovat vás můžeme proto, abychom vám poradili, co je pro vás nejlepší.

Když to shrnu, tak největší zjištěné problémy byly:

  • Ptáme se na 4 údaje, ale stačí nám jen jeden – telefon. Mimochodem byl docela boj přesvědčit klienta, abychom se ptali jen na telefon. I přes to, že zmenšení počtu formulářových polí je nejjistější způsob zlepšení konverze (průměrné zlepšení 7,6 % na základě 10 předchozích AB testů).
  • Dlouhá doba před ukázáním výsledků – 5-10 sekund je hodně. Navrhoval jsem posílat průběžně data z vyplňovaného formuláře a počítání na pozadí, ale bylo to technicky náročné. Tak jsem navrhl ukazovat, které nabídky bank právě kontrolujeme a počítáme. Protože se ukázalo, že lidi preferují si počkat, pokud za vás někdo pracuje spíš, než když se neukazuje nic.
  • Úprava parametrů a nahrávání výsledků je nešikovné. Nutíme lidi, aby skákali mezi výsledky a zadáním a pokaždé čekali 5-10 sekund.
  • Máme špatně nastavenou analytiku. Takže nemůžeme věřit číslům nebo nám část dat chybí.
  • U popupu s kontakty neřešíme obavy, že vás budeme opakovaně obtěžovat a volat vám.
  • První dojem je relativně špatný, důvěryhodnost vyšla 2,8 (známkováno jako ve škole).

S ohledem na to, že ještě pořád nemám křišťálovou kouli, tak často navrhuji více variant. A pak zjišťujeme, která je z nich nejlepší. Ať už AB testem, preferenčním testem nebo jinou metodou.

Upravená původní verze s kontakty

Tahle varianta byla spíš kosmetickou úpravou stávajícího stavu. Přidal jsem social proof nahoře, a kontaktní formulář dal – po vzoru konkurence – nad tlačítko.

Kompaktní kalkulačka jen s telefonem

Wireframe s kompaktní kalkulačou a pouze telefonem

U této varianty jsme udělali vyplňování údajů kompaktnější, abychom měli CTA tlačítko na první obrazovce.

Kompaktní kalkulačka a popup s kontakty

Wireframe s popupem

Kompaktní verze kalkulačky s kontakty v popupu, nakonec jen s telefonem.

Výsledky vyhledávání hypotéky na stejné stránce

Wireframe s výsledky vyhledávání hypotéky

Výhodou tohoto řešení je to, že při změně parametrů se vám automaticky přepočítají výsledky. Nemusíte tak skákat tam a zpátky.

Grafika

Zatímco nám Adam Jurák pomáhal s opravou Google Analytics, tak jsme se pustili do grafiky.

Kontrola, AA test a SMS ověření

Klient grafiku naprogramoval, já si následně pomocí AA testu ověřil správnou implementaci, statistickou odchylku a další věci. Zjistil jsem ale, že z nějakého důvodů hapruje tzv. hiding snippet – část kódu, která schovává původní variantu do doby, než se nahraje nová. Občas se stalo, že se nenahrála žádná varianta a já tak čuměl na bílou stránku. Velký špatný.

Takže jsme to schovávání vyhodili. Říkal jsem si, to je drobnost, uživatel prostě na sekundu dvě uvidí starou variantu a pak se mu nahraje nová. No big deal.

Mezitím nám do toho klient hodil trochu vidle, protože tam přidal SMS autorizaci mobilu. Nicméně to přidal do obou variant, takže statisticky to bylo vlastně v pořádku.

Penize.cz sms ověření

Výsledky testování

A pak jsme spustili AB test. A varianta byla původní, B námi navržená nová. Byl jsem si hodně jistý, že to máme v kapse. Udělali jsme všechno správně a web zlepšili.

A… šul nul. Test nedospěl do statistické jistoty.

1. ab test

Testování mě naučilo pokory, ale tady jsem opravdu věřil, že to zlepšíme. Takže byl čas na to zkontrolovat, zda jsme neudělali někde chybu. Zkontroloval jsem:

  1. Implementaci Google Analytics.
  2. Implementaci Google Optimize.
  3. Nastavení cílů a měření v interním nástroji klienta.
  4. Heatmapy a funnely jednotlivých variant v Hotjaru.
  5. Výsledky uživatelského výzkumu.

A nic. Všechno vypadalo v pořádku. „No tak to mi nalaď mokrý dudy,“ říkal jsem si. A pak mi vylučovacím způsobem došlo, že jediný rozdíl je v tom, že nemáme implementovaný ten hiding snippet, nad kterým jsem mával rukou.

Takže jsme prohodili varianty. A teď byla nová verze, B stará. A spustili jsme test znova. Bylo důležité dodržet co nejvíce stejný počet návštěv jednotlivých variant, jako jsme měli v předchozím testu, abychom pak neporovnávali jablka a hrušky.

A výsledek druhého AB testu s prohozenými variantami?

2. ab test

Poměrně výrazně z toho vyplývá, že nová verze stránky je lepší. Teď už šlo jen o to oba testy z pohledu statistiky vyhodnotit tak, jako by to byl jeden test. Ano – není to úplně košer – ale je to to nejlepší z toho, co jsme měli k dispozici.

Se statistickou jistotou 99 % jsem tak schopen říct, že nová varianta je lepší než stará. A to o průměrně 23,5 %.

Ohlas zákazníka

Projektová manažerka Bára Dugová k tomu říká:

Jsme moc rádi, že jsme Ondru na pomoc s UX oslovili. Hned od začátku jednal jako profík a svou původní vášeň pro architekturu nezapře. Pod jeho vedením jsem se naučila spoustu věcí, třeba kreslit wireframy nebo vyslýchat cizí lidi na testování. A měl se mnou svatou trpělivost :-) Ale vážně, Ondra je profesionál, který nám pomohl zlepšit konverzní poměr tam, kde jsme v to už ani doufali. Jeho úspěšný návrh jsme ihned aplikovali na další formuláře a cenu za konverzi jsme díky tomu dotlačili téměř na polovinu původní částky. Děkujeme za špičkovou spolupráci, Ondru rozhodně doporučujeme.

A Martin Vlnas, ředitel penize.cz doplňuje:

Ondra splnil, co slíbil, jen to trvalo déle. Část viny za prodlevy neseme my, část Ondra. Zázraky se ale taky nedělají na počkání :).

Po roce přišla ještě jedna pochvala:

Téměř po roce redesignu děláme vyhodnocení a musíme uznat, že všechny kroky, které jsme podnikli, byly správné. Aktuálně nás předaný lead stojí do 500 Kč na všech kanálech, což je takový malý zázrak. Pro srovnání: před redesignem to bylo nad 1000 Kč a někdy i mnohem více . Tak ještě jednou moc děkujeme za pomoc.

Závěr

Sherlock Holmes v knize Berylová korunka praví: „Vyloučíme-li vše, co nepřichází v úvahu, zůstane potom pravda, i když vypadá jakkoli nepravděpodobně.“

Závěr pro geeky

Pro kolegy, co se též rochní v AB testech bych tedy doporučil neignorovat problikávání původního obsahu stránky (FOOC – flash of original content), a důsledně aplikovat hiding snippet (v Google Optimize) nebo obdobnou technologii v ostatních nástrojích. Protože první dojem si děláte během 0,05 sekundy, ale původní obsah vidíte cca 1-2 sekundy (Google Optimize má defaultně nastaveny 4 sekundy. A čtyřsekundové zpomalení stránek znamená průměrně 4-8 % konverze dolů!).

 

 

Související články

Clint-wtf

Nákupní persony – kdo je váš typický zákazník?

Jak přijít o 180 000 000 dolarů kvůli jedné rozbité kytaře

Bullet-train

Počkat! Nahrávám… lidi jsou čím dál míň trpěliví

Farenheit

Web design je mrtvý! Ale prdlačky

Smysluplná debata

  • Hele clanek super jako vzdy – akorat by me zajimalo jak si dosel u te duveryhodnosti na to cislo 2.8. Co to je za test? Diky.

    • Ondřej Ilinčev
      Ondřej Ilinčev

      Nechal jsem na usabilityhub.cz lidi známkovat důvěryhodnost u testu prvního dojmu.

  • Lukáš K.
    Lukáš K.

    Ahoj Ondro,
    díky za článek. Aktuálně řešíme něco podobného (vše se zdá být ok, nemáme implementovaný anti-flicker) a chtěli bychom vyzkoušet prohozené varianty v Google Optimize. Můžu se zeptat, jak se ti podařilo dostat upravenou variantu na první místo jako Original Variant v GO? Mně původní varianta v GO upravit nejde, můžu přidávat pouze další varianty…

    Díky
    L.

    • Ondřej Ilinčev
      Ondřej Ilinčev

      Nasadíš novou verzi na ostrý web a z té původní verze uděláš Bčko :).

  • Pochopil jsem správně, že jsi u problému FOOC šel cestou, kdy se nezobrazuje několik vteřin nic (a na mobilu s horším připojením to může být ještě o dost víc)? V závěru zmiňuješ, že zpomalení může mít zásadní vliv na konverzi, ale stejně jsi to tak nakonec udělal?

    Zrovna jsem nedávno řešil podobný problém – byl sem přesvědčený, že FOOC může zásadně ovlivňovat výsledky, a zároveň jsem si nemohl dovolit riskovat snížení konverze kvůli pomalemu načítání (produktova stranka na velkem eshopu s mnoha views měsíčně).

    To me vlastně dostalo do patové situace, kde jsem nakonec rozhodl, že Google Optimize je ve standardním JS provedení nepoužitelný, a má smysl pouze jako platforma pro vyhodnocování ručně napojených server-side rendered testů… Jak to tedy řešíš ty? Nepřijde ti to jako zásadní problém (tedy to použití hiding snippetu) ?

    • Ondřej Ilinčev
      Ondřej Ilinčev

      Vteřiny to doufám nebudou, typicky je to 250-500 ms. Což je i tak dost. Optimize v poslední době dost ten script zrychlil, ale já jsem hodně skeptický ohledně jeho statistického enginu, příliš mnoho AA testů vychází nestandardně. Samozřejmě ideální je server-side testing, ale to znamená o dost větší nároky na developery. Takže ano, je to problém a z pohledu statistiky je optimální to běžet na serveru.

      • Tak u mě to byl asi specifický případ složité stránky, a bylo to na průměrném internetovém připojení :(

        Takže i když to není ideální řešení, je Google Optimize s hiding snippetem stále tvůj nejčastěji používaný nástroj, nebo jsi narazil na něco vhodnějšího (když tedy pomineme developersky náročnější custom server-side testování)?