Případová studie redesignu webu Anglo-American University s nárůstem leadů o 107 %

Mezinárodní škola Anglo-American University se nachází ve Vrtbovském paláci v centru Prahy. Univerzita měla problém se stávajícím technickým řešením a potřebovala přejít na jiný systém. Mimo změnu CMS a nárůstu sběru leadů o 107 % se nám povedlo webem vyřešit několik dalších problémů, které jsme odhalili až díky uživatelskému výzkumu. Pojďte si přečíst, jak provést úspěšný redesign, když si nemůžete dovolit udělat chybu.

Popsat detailně 1 : 1 postup celého návrhu webu by vydalo spíše na knihu. Ačkoliv je článek poměrně dlouhý, obsahuje zjednodušení a vynechání některých činností.

Každý projekt vyžaduje postup ušitý na míru. Proto tento, prosím, neberte dogmaticky. Zvolené činnosti pro AAU nemusí dávat smysl pro každý projekt a určitě se nejedná o jediné univerzální řešení.

Výzkum je zásadní krok návrhu úspěšného webu a univerzita mu chtěla nějaký čas věnovat. Zaměřili jsme se primárně na těchto 5 oblastí:

Informace od lidí jsou neocenitelné, proto jsou nejzákladnější formou výzkumu tzv. hloubkové rozhovory. Cílem rozhovorů je dostat se do hlav uživatelů, pochopit, jak v kontextu s produktem přemýšlejí, co řeší za problémy, a zjistit podněty, které nás dříve nenapadly.

Aby rozhovor, který zpravidla trvá do 60 minut, neodbočil do nerelevantních témat, máme vždy předem připravený scénář. Scénář obsahuje okruhy témat a otázek, které pro projekt budou přínosem.

Vyrazil jsem do terénu a strávil nějaký čas v prostorách univerzity zpovídáním zaměstnanců. Zajímal mě hlavně pohled od lidí ze studijního, vedení školy, ale i pohled lidí z marketingového oddělení.

Příklady některých zajímavých zjištění:

Dále jsem šel vyzpovídat naše studenty. Zvolil jsem svou oblíbenou formu, spojení 20–30 minutového rozhovoru a testování webu ve zbylém čase. Testující má před sebou mobil či počítač a snaží se splnit předem definované úkoly na webu. Říká nahlas, co se mu zrovna honí hlavou, a sledujeme, kde narazí na problém.

Provedl jsem celkem 12 rozhovorů. První skupina byla ze 6 „nováčků“, kteří nastoupili na školu zhruba před měsícem. Druhou skupinu tvořili studenti, kteří zde již pár let studují. Proč zrovna tyto dvě skupiny?

Příklady některých zajímavých zjištění:

Tvrdá data jsou tvrdá data. Kvalitativní výzkum (rozhovory a testování) je sice potřeba, samotný ale nestačí. Podněty jsem čerpal z Google Analytics a jako doplněk jsem použil HotJar.

Google Analytics všichni známe, ne vždy ale víme, kam se podívat. Jaká data nám pomohou při návrhu nového webu? Určitě se dokážeme podívat, jaké jsou nejnavštěvovanější stránky, jak lidé procházejí web či z jakých částí webu uživatelé nejčastěji stránky opouští. Chtěl bych ale přiblížit 2 neocenitelné pomocníky, které Google Analytics defaultně neměří a je nutné je nastavit.

Vlastní dimenze a seskupení obsahu

Univerzita měla téměř 2 tisíce URL adres. Analyzovat jednotlivé stránky je ale nereálné. Pro tyto případy je v Google Analytics neocenitelným pomocníkem funkce „Seskupení obsahu“. Umožní sloučit typově stejné stránky do celků a vyhodnocovat stovky stránek najednou.

Dokážeme se tak snadno podívat na důležitost jednotlivých částí webu, odkud lidé nejčastěji provádějí konverzi a z jaké stránky. Například vidíme souhrně všechny články blogu, adresáře, události nebo prodejní stránky se studiem.

Vlastní události

Přes Google Tag Manager lze do Google Analytics snadno posílat události. Sledovat můžeme cokoliv, ale při redesignu webu mě nejčastěji zajímá kliknutí na určité prvky na stránce.

Například na stránce jsou 3 stejná tlačítka „koupit“, jenom umístěná na různých místech. Pomocí událostí zjistíme konkrétní počet kliků na každém tlačítku. Při redesignu se potom nestane, že například odstraníme sice na první pohled nesmyslný prvek, který ale na stávajícím webu dobře funguje.

Nástroje, jako je HotJar nebo Smartlook, jsou užitečné doplňky. Tvoří teplotní mapy ukazující, kam uživatelé klikají, videonahrávky uživatelů a další. Tyto nástroje samy o sobě moc užitečné nejsou, pokud nevíte, na co koukat. Například z Google Analytics zjistíme, že velký odpad uživatelů je na stránce registrace či na mobilu v Safari. Díky těmto informacím se můžeme cíleně zaměřit na tato problémová místa.

V rychlosti se dotknu i marketingu, protože web nestojí ve vzduchoprázdnu. Uživatelé na web přicházejí s různou mírou informovanosti, v různé rozhodovací fázi a obsah na vstupní stránce by na to měl pamatovat.

Při návrhu je důležité mít data o tom, z jakých zdrojů uživatelé přichází, na jaké stránky nejčastěji dopadají a co zrovna může uživatele zajímat. Uvedu příklad dvou různých návštěvníků:

Detailně jsem procházel přímou i nepřímou konkurenci. Na konkurenci se dá koukat z různých úhlů pohledu. Pro účely redesignu mě hondně zajímala struktura webu a názvosloví kategorií. Zajímalo mě, jak vypadá komunikace při žádosti o studium, marketingové aktivity, a v neposlední řadě inspirace na funkce a prvky, které nás nenapadly.

Jedním ze zásadních faktorů, jak uživatelé snadno dojdou k hledaným informacím, je intuitivní struktura webu. Stejně jako v supermarketu se produkty člení na různá oddělení, aby je člověk dokázal snadno a rychle najít. Na webu zohledňujeme logické pojmenování stránek, rozčlenění a provázanost mezi sebou.

Dobré UX sice vyžaduje, aby všechny informace byly snadno vyhledatelné a logicky uspořádané, zároveň by ale mělo respektovat obchodní cíle, například nějaké stránky jsou pro nás důležitější a chceme je mít co nejvíce na očích. Co by mělo do návrhu struktury také vstupovat?

Starý web AAU měl přes 2 000 stránek a výslednou podobu jsme zachycovali do myšlenkové mapy. Při přechodu na jiné CMS bylo zvláště důležité zachytit starou strukturu, na žádnou stránku nezapomenout a případně vypustit ty, které na novém webu již nejsou potřeba.

Strukturu jsme navrhli, ale měli jsme pochybnosti ohledně pojmenování sekcí v hlavní navigaci. Rozhodli jsme se ji otestovat online nástrojem Optimal Workshop, pomocí kterého jsme uživatelům ukázali strukturu webu a zadávali jim otázky.

Sledovali jsme úspěšnost, kolik % uživatelů je schopno jednotlivé sekce na webu najít, a snažili jsme se odhalit možné nedostatky. Ptali jsme se například: „Kde byste hledali informaci o podmínkách přijetí?“ nebo „Kde byste hledali otevírací dobu studijního oddělení?“

U projektu zůstávám až do konce – dozoruji implementaci, připomínkuji výstup vývojáře, grafika, kontroluji rychlost, zobrazení na různých zařízeních a web finálně testuji.

Grafiku vytvářel ostřílený Martin Valas. U grafického designu je potřeba myslet na to, že grafika je primárně funkční záležitost, která má plnit obchodní cíle. Názory líbí a nelíbí zde nemají co dělat.

Než se Martin pustil do kreslení webu, bylo nutné revidovat současný vizuální styl. Také jsme zkoumali, jestli značka působí a vizuálně komunikuje, co chceme. V neposlední řadě musí reflektovat situaci na trhu a dostatečné odlišení konkurence. K tomuto se používá moodboard, který dopředu definuje vizuální styl, barevnost či typografii.

Web běží na WordPressu, vývoj zajistil Adam Laita. Proč jsme pro AAU zvolili právě WordPress? Jaké to přináší výhody a nevýhody?

Včasné spuštění podobně velkého projektu si nedovedu představit bez správného projektového řízení. Toto je často podceňované. Na projektech to vidím opakovaně. Tvořit web znamená značné množství činností, lidí a externích specialistů. Některé výstupy je často nutné zpracovávat paralelně.

Tvorba obsahu a textů se často podceňuje. Přejde se frází „to se pak nějak napíše“ a je to právě jeden z nejčastějších důvodů, proč se projekt spustí pozdě. Tvorba textů je časově náročná a je potřeba jí připravovat paralelně během tvorby webu.

V neposlední řadě se nesmí zapomenout na včasnou komunikaci s marktingovým týmem, SEO specialistou či analytikem. Od všech zapojených stran je potřeba při spuštění nového webu součinnost.