Redesign webu AAU s nárůstem leadů o 107 %

Mezinárodní škola Anglo American University se nachází ve Vrtbovském paláci v centru Prahy. Studenti z celého světa si pochvalují rozmanitou národnost studentů, malé studijní skupiny a individuální přístup ke studentům.

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 univerzitě několik dalších problémů, které jsme odhalili až díky uživatelskému výzkumu.

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

Každý projekt vyžaduje postup ušitý na míru. Postup 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. Univerzita byla otevřená mu nějaký čas věnovat a to primárně těmto 5 oblastem:

Informace od lidí jsou neocenitelné, proto nejzákladnější forma výzkumu jsou tzv. hloubkové rozhovory. Cílem rozhovoru 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ý připravený scénář. Scénář obsahuje okruhy témat a otázek, které pro nás budou pro projekt přínosem.

Vyrazil do terénu a strávil jsem nějaký čas v prostorách Univerzity zpovídáním zaměstnanců. Zajímal mě primárně pohled od lidí ze studijního, vedení školy, ale i 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 mojí oblíbenou formu, spojení 20-30 minutového rozhovoru a ve zbylém čase testujeme web. Testující má před sebou mobil či počítač a snaží se splnit předem definované úkoly na webu, mluví nahlas co se mu zrovna honí hlavou a sledujeme kde narazí na problém. O tom jak detailně testování a výzkum probíhá má skvělý článek Zbyšek Nádeník.

Provedl jsem celkem 12 rozhovorů. První skupina 6 „nováčků“, kteří nově nastoupili na školu zhruba před měsícem. Druhá skupinu tvořili studenti co tu studují už pár let. 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 potřeba, samotné ale nestačí. Podněty jsem čerpal primárně z Google Analytics a jako doplněk z HotJaru.

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 lidi prochází web či z jakých částí webu uživatelé nejčastěji stránky opouští. Chtěl bych ale přiblížit dva neocenitelné pomocníky, které Google Analytics defaultně neměří a je nutné nastavit.

Vlastní dimenze a seskupení obsahu

Univerzita měla téměř 2 tisíce URL adres a analyzovat jednotlivé stránky je nereálné. Pro tyto případy je v Google Analytics neocenitelný pomocník 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 lidi nejčastěji provádí konverzi a jakou stránku. Například vidíme sourhně všechny články blogu, adresáře, událostí nebo prodejních stránek se studiem.

Vlastní události

Přes Google Tag Manageru 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ů ke každému 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ý doplněk. Tvoří teplotní mapy, kam uživatelé klikají, videonahrávky uživatelů a další. Tyto nástroje samo o sobě moc užitečné nejsou, musíte vědět, 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. Koukáme potom cíleně na tyto 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 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 pohledů. Pro účely redesignu jsem primárně koukal na strukturu webu a názvosloví kategorií, jak vypadá komunikace při žádosti o studium komunikace, marketingové aktivity a v neposlední řadě inspirace na funkce a prvky, které nás nenapadli.

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 nalezitelné a logicky uspořádané, zároveň by ale měla 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 žádanou stránku nezapomenout a případně vypustit ty, které na novém webu již nejsou potřeba.

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

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

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, je nutné revidovat současný vizuální styl a zrevidovat, jestli značka působí a vizuálně komunikuje co chceme. K tomu slouží moodboard, který dopředu definuje vizuální styl, barevnost či typografii.

Stávající obsah na webu se musel revidovat a napsat nové texty na nově vzniklé stránky. Jeden z nejčastějších důvodů, proč se projekt spustí pozdě, jsou právě texty a obsah. Texty jsou často podceňované se slovy „to se pak nějak napíše“, ale často brzdí spuštění. Texty je potřeba připravovat paralelně během tvorby webu.

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?

U projektu zůstávám až do konce – dozoruji implementaci, připomínkuji výstup vývojáře, kontroluji rychlost, zobrazení na různých zařízeních a web finálně testuji. Před spuštěním je potřeba provést kontrolu nastavení měření a dalších marketingových nástrojů, což me přivádí k dalšímu zásadním bodu – projektovému řízení.

Podobný projekt si nedovedu představit spustit včas bez správného projektového řízení. Tvořit web znamená velké množství činností, lidí a externích specialistů, které je nutné často zpracovávat paralelně.

Toto je často podceňované, vidím to na projektech opakovaně, nejčastěji se před spuštěním zjistí, že chybí napsat spoustu textu nebo se marketingová agentura či SEO specialista včas nedozví, že se spouští nový web a je potřeba jejich součinnost.