70% nárůst poptávek z webu a 95 místo 30 uzavřených obchodů měsíčně. To jsou výsledky téměř rok trvající práce na proměně webu edera.cz. Co všechno jsme pro to udělali?

Důkaz na začátek. Petr Kašpar je ředitel divize telekomunikačních služeb Edery

Redesign webu začíná byznysem. Nikoli grafikou, ani pocitem „máme starý web“

Proč vůbec měnit web, když poptávek chodí dost, web fyzicky funguje a lidi si nestěžují? Třeba proto, že většina poptávek z webu jde „přes referenci“, takže lidi stejně hledali Ederu. A že jen malé procento lidí jsou „ti z ulice“, kteří prostě hledají poskytovatele internetu. Měli jsme ale i dost dalších silných motivů:

  • web není přizpůsobený mobilům a přitom jejich podíl na návštěvnosti už přesáhl 15 %
  • neodpovídá brandu – sjednocujeme CI, připravujeme polepy aut
  • neukazuje silné stránky firmy, neprezentuje služby, kterými Edera vyniká nad konkurencí
  • uniká spousta lehce dosažitelných SEO příležitostí, např. stránky místních lokalit a naopak je na webu dost přebytečného SEO obsahu
  • poptávek není nikdy dost (nebo lépe: konverzní poměr webu je podprůměrný, přestože jsme meziročně zvedli počet poptávek o 25 % díky lepšímu SEO a PPC)
Screenshot původního webu edera.cz
Původní web edera.cz

Cíle, výstupy a dopady, aneb co jsme chtěli změnit

Cíle redesignu jsou taková paní Columbová webových agentur. V prezentacích a nabídkách o nich mluví a píšou a při realizaci je nikdo neviděl. My jsme si jasně řekli, že chceme (cíle):

  1. o 50 % víc poptávek
  2. získávat podklady pro rozšíření služeb – jinak řečeno sbírat adresy, kde lidé hledají připojení (jak se později ukázalo, toto byla nejdůležitější informace, která nám pomohla udržet projekt v chtěných kolejích)

Našich 13 kroků redesignu

  1. cíle redesignu
  2. kvalitativní průzkum mezi zákazníky (19 hloubkových rozhovorů a pár kavárenských a hospodských povídání)
  3. průzkum mezi zaměstnanci o vnímání značky (protože mě zajímalo, jestli firmu vnímají stejně)
  4. sestavení person a uživatelských scénářů
  5. analýza dat ze stávajícího webu – které stánky se podílí na konverzích, co lidi hledají
  6. analýza PPC a SEO pro návrh obsahu a struktury webu
  7. zjednodušená obsahová strategie a struktura webu
  8. obsahové wireframy stránek, tedy žádné lorem ipsum, ale „hotové texty“
  9. vypracování zadávací dokumentace, funkčních specifikací pro výběrové řízení
  10. výběr dodavatele, úpravy zadání
  11. výroba webu (grafika, programování, kódování, copywriting, focení)
  12. uživatelské testování
  13. nasazení webu, analytiky, průběžné úpravy

TIP: Podrobně o návrhu (nového) webu píše Honza Kvasnička na svém blogu.

Informace od lidí jsou neocenitelné

Potřebovali jsme zjistit, na co lidi při výběru poskytovatele internetu slyší nebo jaké mají zkušenosti s konkurencí. O co se zajímají, jak reálně postupují i nakolik je web důležitý při rozhodování.

Rozhodli jsme se pro hloubkové rozhovory a trochu nemetodicky jsme omezili respondenty jen na zákazníky Edery. Proč? Protože jsme chtěli informace od lidí, kteří za a) opravdu někdy poskytovatele internetu hledali a za b) nám dají zpětnou vazbu o fungování služby a chování Edery ke svým zákazníkům.

Jako první krok jsme na základě obchodních zkušeností, průzkumu konkurence a projití různých diskusí stanovili základní hypotézy:

  • H1: Lidé mají tak nízké technické znalosti a neznají pojmy, že dokáží porovnat nabídky pouze podle ceny nebo absolutního čísla
  • H2: Existuje významná psychologická bariéra odchodu od poskytovatele, se kterým jsou lidé nespokojení
  • H3: Web hraje významnou roli při rozhodování o poskytovateli
  • H4: Lidé nemají reálnou představu o rychlosti připojení k internetu

Které hypotézy rozhovory potvrdily či vyvrátily třeba poznáte z webu edera.cz. Můžu jen dodat, že pojmy jako 20 Mb/s, upload, download, FUP nebo agregace lidem moc neřeknou. Na druhou stranu velmi dobře rozumí tomu, že v šest večer přijdou z práce, nejede jim internet a na servisní lince poskytovatele to nikdo nebere.

Průzkum bez hypotéz je jako silnice bez značek. Když se nebudete ptát, tak dojedete leda do …

Pro rozhovory s lidmi jsme připravili sadu asi 20 otevřených otázek (možná spíše témat k hovoru). Zajímaly nás zkušenosti s jinými poskytovateli, k čemu lidé internet využívají nebo kdo se doma stará o počítač.

Ukázka dotazů na respondenty
Ukázka dotazů na respondenty. Formulace u rozhovoru vždy přizpůsobím.

Z rozhovorů nám vyplynuly škatulky zákazníků. Ty následující jsem původně chtěl použít pro popis person, ale nedopadlo to. Nakonec posloužily jen pro prezentaci zjištění. Se skrytým Ice-breakerem.

Jaké škatulky uživatelů (průběžně) vznikaly
Jaké škatulky uživatelů (průběžně) vznikaly

Jedno nepřekvapení z rozhovorů: lidé nezálohují. Kromě jednoho pána, který zálohuje fotky bytu na gmail. Aby měl důkaz pro pojišťovnu, kdyby vyhořel.

Tvrdá data jsou tvrdá data. Vivat Analytics, Sklik & AdWords

Nevyužít data za ty roky provozu webu by byl hřích i pro nevěřícího. Nám analýza pomohla:

  • Určit vzorce vyhledávání klíčových slov a podle toho optimalizovat stránky a vytvořit informační architekturu. A že slov jako „internet polabiny“ můžou být stovky.
  • Neztratit externí odkazy tím, že zrušíme nebo zapomeneme přesměrovat odkazované stránky.
  • Zbavit se balastních stránek, které kdysi vznikly pro SEO, ale které nikdy nepřinesly jedinou konverzi ani se na ní nepodílely.

Mimochodem objem „balastních stránek“ nejlépe ilustruje výrazný pokles návštěvnosti „doprovázený“ významným nárůstem poptávek.

Nárůst konverzí při snížení návštěvnosti po redesignu

Persony a scénáře pomůžou s konceptem i ověřením návrhu

Na rovinu, person jsme měli spíše takovou light verzi. Přece jen když jako firma fakt cílíte na všechny (ano, Edera má zákazníky ve věku 18 – 84 let, různých vyznání, příjmů i sexuální orientace), tak z 19 rozhovorů 5 skutečných person neuděláte. Na druhou stranu na zpracování životních situací a přípravu uživatelských scénářů to stačí docela dobře.

Příklady životních situací, které je potřeba webem pokrýt:

  • Stavím rodinný domek v Němčicích. Chci připojení na net, ideálně i s TV. Slyšel jsem o Edeře a firmě X. U koho to bude dobré? Stabilní?
  • Budu se stěhovat. Potřebuji ukončit službu.
  • Nejede mi internet! Pomoc!
  • Jsem grafik na volné noze, stěhuji se do Pardubic, s přítelkyní hledáme pronájem. Potřebuju net s vysokým uploadem, aspoň 5 mega bez agregace, často posílám velká data pryč.
  • Když mi spadne internet, poskytovateli se pořádně nedovolám a nebo to řeší týden. Chci lepšího.

Až s těmito podklady zpracováváme obsahový koncept webu a wireframy. Definovali jsme si jednoduché základní principy:

  • „prodáváme“ internet, nikoli TV – ta je pouze bonus k internetu, samostatně ji neprodáváme, nepodporujeme
  • důvodem pro Ederu je servis, nikoli cena
  • všude tlačíme telefon, protože chceme s lidmi raději mluvit, než si psát. Na podpoře to usnadní porozumění problému a v obchodě také člověku líp sedneme do chutí
  • všude jsou fotky lidí, protože nejsme žádná 2men show majitele a technika, ani anonymní UPC nebo O2. A lidem aspoň ukážeme, koho si pustí domů na instalaci
  • všude chceme zadat adresu, nechceme totiž lidi lákat na super rychlé připojení po optice a nakonec jim v obci X dát významně pomalejší „bezdrát“
  • přizpůsobíme web mobilům, nejen responzivitou, ale hlavně obsahem
  • dostaneme do webu co nejpodrobněji lokality, kde připojujeme lidi k internetu
  • zaměříme web na koncové uživatele, firemní zákazníky úplně pomineme
Připojené lokality vedeme až na úroveň čísla popisného

Zabili jsme taky „spoustu dobrých nápadů“ jako:

  • jedno (společné) vyhledávací pole pro obsah a lokality – aby se z jednoho políčka hledal kontakt na podporu stejně jako dostupnost internetu v Hrobu (obec u Pardubic). Proč jsme to nechtěli? Nedovedu si představit, jak bychom spolehlivě vybrali správnou odpověď
  • jednodušší formulář, bez kontaktních údajů, kompletní adresy. Raději místo toho co nejvíce údajů předvyplňujeme.
  • dát automaticky každému nabídku „30 dnů zdarma“ (protože při řádově stovkách instalací měsíčně je s tím spojená velká administrativa
  • zadávání adresy pomocí geolokace, protože není spolehlivá na úroveň č. p. a hlavně člověk nemusí hledat poskytovatele internetu z místa chtěného připojení

Výběr dodavatelů

Vybrat copywritera bylo jednoduché. Šel jsem rovnou pro Pavla Šenkapouna, protože má výsledky a navíc Ederu zná.  Na focení jsme přizvali Martina Pibyla, se kterým jsem se kdysi seznámil při uživatelském průzkumu pro časopis FotoVideo.

Výběr webaře – volné zadání na pevných základech

Účelem zadávačky bylo zahájit komunikaci s dodavateli. A nechat jim volný prostor pro kreativitu, hledání chyb a nalézání lepších řešení. My jsme přece nepobrali všechnu moudrost světa. I proto dostali „jen“ 90% wireframy. Ostatně můžete si srovnat zadání a výslednou stránku (www.edera.cz/pripojeni/pardubice/belehradska), nejsou úplně totožné. Hlavně díky copywriterovi.

Ukázka obsahového wireframe v zadávací dokumentaci.
Ukázka wireframe v zadávací dokumentaci. 0 % Lorem Ipsum.

Ale pozor. Nepleťte si volné zadání s volnou rukou. Veškeré návrhy na úpravy jsme tvrdě konfrontovali se zjištěními z výzkumu a s cíli webu. Jako nejdůležitější se pak ukázal cíl „sbírat adresy, kde se lidi chtějí připojit“. To nám zabránilo používat číselníky, našeptavače a všelijak „usnadňovat“ lidem zadávání adres. A ano, určitě by to šlo (s vyšším rozpočtem) technologicky vyřešit.

Nastavení standardů

Ale to nebylo v zadání“ vs. „tak to přece má standardně fungovat„. To jsou asi nejčastější věty mezi dodavatelem a klientem při ladění nebo předávání webu. Vždycky z nich plyne nespokojenost. Předcházeli jsme tomu odkazem na obecně známé řešení. Třeba pro nastavení SEO takto:

Administrace webu podporuje SEO nejméně v rozsahu, jako např.  Yoast wordpress plugin či All in one SEO pack. Zejména podle definované masky generuje HTML elementy jako Title, description, nadpisy H1..H3, nadpisy formulářů. Podporuje mikroformáty dle standardu schema.org, generuje automaticky sitemap.xml. Generuje „čisté“ URL adresy, podporuje správu 301 redirectů stránek.

Atypické požadavky v zadávačce

Grafiku webu může dodat webové studio a nebo ji necháme zpracovat samostatného grafika. Proč? Protože z praxe vím, že dobří grafici a dobří programátoři se ne vždy potkají ve stejné firmě. Samozřejmě je pak riziko, že se bude trochu hůř komunikovat a prodlouží se termíny.

S tím souvisely i požadavky na určení konkrétního grafika a jeho (nikoli firemních) referencí. Dál jsme chtěli také popsat proces přípravy grafiky. Tady jsem si celkem naběhl, prakticky nikdo to nepochopil. Přitom jsem chtěl jen něco ve smyslu: dáme Skype s grafikem, uděláme moodboardy, grafik zadá fotografovi, co a jak má nafotit.

Přenositelnost řešení k jinému dodavateli. Mít web na uzavřeném řešení má zásadní nevýhodu: když chcete od firmy odejít, tak musíte vyrobit jinde web od nuly. Do této situace jsme se nechtěli dostat. Takže požadujeme řešení na technologii, do které dokážou zasáhnout jiní programátoři a kterou si můžeme převést na jiný hosting.

A které webařské firmy jsme oslovili?

Jak vítěze z WEBTOP100 (Giant, Sherwood, Aitom), tak zdatné freelancery nebo pár studií na doporučení z druhé ruky. Nabídku jsme chtěli do 14 dnů, vybízeli jsme k osobní konzultaci (to využily jen 3 firmy!) A na rovinu, nabídky ostatních nás už moc nezajímaly.

Pro zajímavost – nabídky byly v rozmezí 100 – 450 tisíc Kč, platební podmínky 10 – 50% záloha a doplatek po spuštění. Nabídky samotné grafiky pak 25 – 60 tisíc Kč.

Ukázka hodnocení nabídek
Sumář informací z nabídek

Proč jsme vybrali Blueberry

  • ptali se. Pořád se ptali. A už rovnou během přípravy nabídky přicházeli s dobrými nápady
  • dali reálný harmonogram
  • líbil se mi přístup k výrobě webu
Jak v Blueberry připravují weby
Jak v Blueberry připravují weby
  • uvedli čtyři konkrétní reference. Zavolal jsem dvěma lidem a ti potvrdili info o průběhu prací, dodržování termínů a dohod

Výroba a testování webu

Nejvíc jsme se nadřeli na logice vyhledávání podle adres. (kromě grafiky samozřejmě, to je peklo vždycky). Prakticky na každé stránce webu vyzýváme člověka k ověření dostupnosti připojení. Může dojít k těmto situacím:

  • hledanou obec vůbec nepokrýváme
  • v obci máme jak připojení po optice, tak bezdrátové
  • v obci je jen bezdrát
  • v místě je bezdrátové připojení, ale pro tu konkrétní adresu není dostupné (není vidět na vysílač)
  • v místě je optika dostupná v budoucnu nebo „na poptávku“

Cílem je, abychom při každém hledání poskytli správnou informaci. Jaká jsou úskalí?

  • překlepy v názvu obce, ulice
  • různě používané názvy, např. kpt. Bartoše vs. kapitána Bartoše
  • člověk zadá ulici, ale ne číslo popisné v ulici, kde máme připojení po optice
  • člověk hledá připojení v místě, které ještě nemá přidělenou adresu (nově stavěné bytové domy)
  • nesprávně identifikovaná obec (třeba Barchov je v okrese Pardubice a taky Hradec Králové)

Povídání o výrobě je na samostatný článek, třeba ho spáchá Jiří Brhel z Blueberry. Za mě byla podstatná jedna věc: stal jsem se jedinou kontaktní osobou za Ederu. Výjimku tvořily věci smluvní. Tak jsme drželi konzistenci zadání, nepustili nevhodné úpravy a taky ušetřili spoustu dohadů a času lidem z Edery.

Samozřejmě jsme testovali

Ještě na ladicí verzi webu jsme udělali pár uživatelských testování. Jednoduše jsem si v mé oblíbené kavárně odchytával na pár minut lidi se svým počítačem nebo chytrým mobilem. Dostávali jednoduchý úkol: říct kde bydlí, jaké mají nároky na připojení k internetu, ověřit si dostupnost a zajistit si nabídku na testovaném webu.

K tomu jsme díky videím v Hotjaru odhalili jednu docela závažnou chybu: Lidé nápovědný text považovali za vyplněné pole. A pak vyhledávání nenacházelo chtěné.

Pozor, nápovědný text mohou lidé brát jako vyplněné pole

Co to všechno stálo času?

Začali jsme v dubnu 2015 a nový web jsme spustili v březnu 2016. Za mě

  • 120 hodin průzkumů a přípravy zadání
  • 15 hodin výběru dodavatele
  • 30 hodin konzultací během výroby

Co jsem se naučil

  • zeptat se byť jen jednoho zákazníka posune web víc, než ptát se 10 kolegů
  • testování není nikdy dost a je potřeba využívat více nástrojů / postupů
  • najít si jasné byznys zadání a cíl pomůže udržet projekt na kolejích a zbaví se nevhodných „nápadů“