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

Pro univerzitu jsem navrhoval kompletně nový web. Redesign se povedl a pomohl škole zlepšit další KPI, nejenom nábor studentů.

Img-kejska-aau Cesestudy_mockup

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.

Jak spolupráci hodnotí klient?

The new website made a big impact on UX and lead generation of AAU website. Thanks to great UX all key metrics improved, our lead generation efforts increased by 107% with a significant drop in CPLA.

The whole AAU community was very excited about the speed and the design of the website and there was literally no negative feedback from any stakeholders. I would definitely recommend David and his team for anyone looking to seriously improve their website performance.

Aau_200
Wf_540x200 - reference

Andy Jezdej
Marketing manager

Campusvisuals1-1 Campusvisuals1-1

Než se pustíte to čtení

💡 Článek jsem sepsal primárně pro ty, kteří chtějí vidět reálnou práci UX designéra. Pokud budete přemýšlet nad redesignem či optimalizací svého webu, na konci uvidíte wireframe, to je ale pouze špička ledovce, které předchází spousta práce.

Č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í.


1. Pochopení problému a záměru

Byl jsem postaven před realizaci již předem interně stanoveného problému. AAU řešila primárně velký technologický dluh, neflexibilního developera a tedy nutnou změnu CMS. Můj úkol měl být dohlédnout na přechod z pohledu UX se slovy „Web funguje, nechceme ho téměř vůbec měnit. Chceme akorát hezčí grafiku a více poptávek“.

Řešíme tedy správný problém?

Web je od toho, aby primárně pomáhal podnikání jako celku, ne jenom „mít web“. Spolupráci vykopávám zasláním dotazníku obsahujícím 41 otázek, odpovědi mi pomáhají detailně pochopit klientovo podnikání a trh. Na co se třeba ptám? Například na cílovou skupinu, pozici na trhu, business model, jaké studijní programy jsou pro nás obchodně nejzajímavější, naše silné a slabé stránky a další desítky otázek.

„David se hodně ptá a snaží se pochopit jádro problému. Hned od začátku nám bylo jasné, že ví o čem mluví a nechce nám pouze vytvořit web, ale celkově posunout náš business.

David Lipka, Vice President AAU

Na vyplněný dotazník navazuje série menších workshopů. Kde odpovědi z dotazníku rozvíjíme, brainstormujeme, snažíme se popsat, co nás na opravdu pálí a co by web měl pomoct vyřešit.

Questionare-1 Wf_540x200 - reference
Vstupní dotazník obsahující 41 otázek
Reserach Wf_540x200 - reference
Úvodní workshopy a brainstormingy

Špatně definované zadání

Na projektech běžně řeším průnik mezi zájmy firmy a zákazníků. U AAU jsme narazilo na často i více protichůdných zájmů, museli jsme myslet na zájmy majitelů školy, vedení, akademické půdy, studijního oddělení a zájmy reálných studentů.

Na základě schůzek se zástupci všech 5 skupin bylo jasné, že původní zadání nestačí – to vzešlo primárně od vedení školy, které se nezamýšlelo nad problémy a potřebami ostatních skupin.

Na povrch vyplynulo také několik zásadních neznámých, na které jsme nebyli schopni interně odpovědět. Bylo jasné, že původní zadání stojí na špatných základech a je potřeba přepracovat. Nejdříve jsme se ale museli podívat na data, dostat se hlouběji do hlav našich uživatelů a definovat proč vlastně nový web děláme.

2. Uživatelský výzkum a analýza dat

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:

  1. Rozhovory se zaměstnanci školy
  2. Testování a rozhovory se studenty
  3. Webová analytika
  4. Analýza marketingových aktivit
  5. Analýza konkurence

💡 Tyto kroky nemusí probíhat chronologicky po sobě. Naopak, doplňují se a čerpají jeden z druhého. Například z podnětů od konkurence a Google Analytics čerpáme hypotézy do scénářů rozhovorů a testování.


1. Rozhovory se zaměstnanci školy

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.

Welcome Welcome
Prostory AAU
Script Best-customer-interviews-tips-techniques-3db10
Příklad scénáře

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í:

  • Studijního oddělení mělo problém při náboru nových studentů. Žádost o studium pro mezinárodní studenty je časově náročná, je nutné doložit desítky dokumentů a vyměnit si desítky e-mailů. Problém s nepřehledností, ztraceným časem a vysokou chybovostí při veškeré komunikaci e-mailem.
  • Na webu s více než 2 000 stránkami jsou informace jsou často nekonzistentní a je časově náročné je aktualizovat. Například při změně popisu studijního programu je nutné text upravit na několika místech.
  • Opakují se až nepochopitelné dotazy od studentů, na které by měli studenti znát či najít v pořádku odpověď. Web tyto informace obsahoval, ale očividně na špatném místě.
  • Při žádosti o změnu obsahu webu, například medailonek profesora je neskutečně vytěžovaný marketingový tým, jedině oni mají možnost tyto údaje změnit.

2. Testování a rozhovory se studenty

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.

Students Wf_540x200 - reference
Studenti Anglo-American University
Cafe
Rozhovory jsem dělal ve školní kavárně

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?

  • Nováčci budou mít více v paměti dle čeho školu vybírali a jak probíhal celý proces náboru.
  • Od stávajících studentů zase mohu čekat věrohodnější zpětnou vazbu na univerzitu, jak web při studiu využívají, co oceňují nebo naopak co jim vadí.

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

  • Velký vliv mají při výběru školy rodiče. Ti často neumí anglicky a webu nerozumí. Moc je nezajímají přesné osnovy či akreditace, ale jestli je Praha bezpečná nebo jestli se tam dostanou na návštěvu.
  • Studenti často neměli jako primární zájem studium konkrétního oboru „chci studovat právo“, ale spíše „chci studovat v Praze“ a hledám jaké jsou možnosti.
  • Studenty hodně zajímal sociální život, informace o Praze a jaký je poměr a poměr holky kluci na škole.
  • Zásadní bylo jak velké jsou třídy (kolik studentů) a jak jsou pestré národnosti.
  • Našli jsme intranet, který studijní oddělení považovalo za důležitý, ale 10 z 12 studentů o něm nemělo tušení.

3. Analýza dat & webová analytika

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.

Co nám řeknou Google Analytics

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.

Contentgroupping All-pages-report-content-group
Návštěvnost jedntolivýh sekcí webu
Flow Grafux-768x654-content
Sloučená cesta zákazníka

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.

Teplotní mapy a videonahrávky

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.

Heamap Wf_540x200 - reference
Teplotní mapy klíčových stránek
Mousetracking
Sledování nahrávek uživatelů

4. Analýza marketingových aktivit

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ů:

  1. Uživatel přijde přes brandovou frázi „Study at Anglo American University„. Tento návštěvník už velice pravděpodobně o škole slyšel. Nemusíme tedy tolik vysvětlovat co jsme za školu, ale spíše ho přesvědčit, aby odeslal odeslat žádost o studium.
  2. Oproti tomu návštěvník, který přijde na obecnou frázi „Study in business in Prague“ naší školu pravděpodobně vůbec nezná, je v rozhodovacím procesu na začátku a nebudeme po něm rovnou chtít odeslat žádost o studium, ale třeba ho můžeme pozvat na den otevřených dveří.
Serrch Cleanshot-2021-09-22-at-065100
Co uživatel hledá a má v hlavě
Ad Cleanshot-2021-09-22-at-065100
Co mu slibuje reklama
Landing Cleanshot-2021-09-26-at-090032
Návaznost na vstupní stránce

5. Analýza konkurence

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.

Komunikace Wf_540x200 - reference
Komunikace školy a automatické e-maily
Ads Aau-e-mailing
Inspirace ohledně názvů kategorií napříč trhem

3. Syntéza a definice problému

Shromáždili jsme poměrně dost kvalitativních a kvantitativních dat. Nyní z nich zbývalo udělat aplikovatelné závěry, seřadit je dle priorit a detailně specifikovat zadání. Ještě jsme se tu nebavili o popisu cílové skupiny, což je zásadní součást zadání a obecně práce na UX. Rád bych zde přiblížil jeden framework, který je velice užitečný a bude dostačovat velkému množství klientů. Tím je Value Proposition Canvas (VPC).

💡 Na projektech se často setkávám s personami, které obsahují nepodstatné informace v kontextu projektu a nejsou založeny na datech. V takovém případě často radím se na persony vykašlat a spíše použít VPC, který bude mít mnohem větší přínos pro projekt.

Value Proposition Canvas (VPC)

U tohoto frameworku se snažíme popsat zákazníky a následně na to hledat řešení – odpovědi na to, jak vaše služba nebo vaše aktivity tyto obavy a potřeby vyřeší. Tento model by vydal na samostatný článek, tak alespoň v rychlosti.

Začínáme vždy od zákazníků, kterým se věnuje pravá strana VPC. Popisujeme jejich potřeby, motivace a obavy.

  • Jobs – Základní potřeby zákazníka, problémy, které se snaží vyřešit a úkoly, co chce splnit.
  • Pains – Co zákazníky trápí, jejich problémy, obavy a negativní emoce.
  • Gains –  Pozitivní přínosy, přání a očekávání, kterých by zákazník rád dosáhl.
Cleanshot-2023-01-08-at-1616512x Cleanshot-2023-01-08-at-1616512x-1
Value Propositon Canvas

Následně se přesouváme na levou stranu se týká samotného produktu/služby a aktivit, které pomáhají řešit zákazníkovi problémy. Tato část tedy obsahuje pole:

  • Product & Service – Co zákazníkům nabízíte.
  • Pain Relievers –  Jak přesně vaše služba pomáhá vyřešit nebo zmírňovat obavy.
  • Gain Creators – Jaké aspekty našeho služby reagují na konkrétní požadované přínosy zákazníka.

Reálný výstup může vypadat podobně jako obrázek níže, kde je pro ilustraci popsaný jak Toyota řeší potřeby cílového zákazníka. Tento model se zpracovávat online i fyzicky u tabule. V ideálním případě chceme mít těchto map více, jeden pro každou cílovou skupinu.

Vpc B6784a9ccdbe87f39caa869dc86dc9f5
Reálně vyplněný Value Proposition Canvas

Re-definice zadání a cílů

Nyní známe cíle webu, co má vyřešit a pro koho jej děláme. Původní zadání znělo hezčí grafika, změnit CMS a získat více poptávek. Po uživatelském výzkumu na nás vyskočilo spousta dalších problémů a potřeb. Nově vypadalo nějak takto, záměrně je zde zjednodušení:

Hlavní cíle

  • Více poptávek a žádostí o studium
  • Sběr leadů a nastavit automatický e-mailing
  • Vyřešit problém časové náročnosti a chaotičnosti žádosti o studium
  • Stabilní a administrovatelné CMS
  • Vytvořit nové vstupní stránky pro jednotlivé programy
  • Oživit grafiku vizuální styl

Vedlejší cíle

  • Zredukovat počet dotazů na studijní oddělení
  • Zlepšit technické SEO
  • Napojení na CRM
  • Udržet nezastarání informace na webu
  • Zlepšit funkci hledání
  • Zapojit studenty do dalších aktivit

4. Struktura webu a obsah

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íprovázanost mezi sebou.

Jak navrhnout dobrou strukturu webu?

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?

  • Zohlednit zmiňované obchodní cíle
  • Potřeby cílové skupiny
  • Potřeby z hlediska SEO a marketingu
  • Data z Google Analytics o současném chování a návštěvnosti
  • Výstup z analýzy konkurence

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.

Aau-structure-1 Wf_540x200 - reference
Náhled struktury zachycené v myšlenkové mapě

Testování struktury

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í?“.

Untitled (3) cropped Wf_540x200 - reference
Aplikace Optimal workshop
Untitled (4) cropped Wf_540x200 - reference
Vyhodnocení testování

5. Design a tvorba prototypu

Až nyní se pouštím do tvorby wireframu, česky drátěného návrhu webu. Wireframe zachycuje detailní kostru webu, měl by být poměrně detailní, reflektovat strukturu a přesné texty. Pro zjednodušení jej lze přirovnat k výstupu návrhu domu, alfa omega celého projektu.

Wireframe zde neřeší barvy a grafickou podobu, ale funkčnost. Řešíme, kde budeme mít dveře, aby se pohodlně otevírali, už je nám ale jedno, jestli budou bílé či dřevěné. Umožní nám to debatovat nad reálným obsahem, ne barvičkami. Grafik tak dostává velice přesné zadání a vývojář zde dokáže odhadnout cenu webu.

Untitled-5 Untitled-6
Příklad wireframe úvodní strany
Untitled-1-2 Untitled-1-2
Řešíme zobrazení na mobil i tablet

Vzniklo 89 wireframů

Detailní prototyp vytvářím v nástroji Figma. Pro AAU vzniklo celkem 89 wireframů, abychom pokryli celý web. Prototyp se vytváří samozřejmě i na mobil a tablet. Výsledný návrh je interaktivní, lze si jej pohodlně projít, představit si jednotlivé interakce a testovat.

Xxx-2 Wf_540x200 - reference
89 wireframů zachycující celý web
Wfmobil Wf_540x200 - reference
Návrhy na mobil a tablet

Myslí se na ty největší detaily

Správný návrh by měl myslet i na největší detaily a drobné interakce. Například co se staně při chybně zadaném e-mailu, jak se chová našeptávač či jak vypadají chybové stránky. Pro ilustraci uvádím dvě zajímavé funkce.

Vyhledávání dle typu obsahu

Pokud hledáte slovo „Business“ (často hledané), tak vyskočí stovky výsledků ve kterých se nelze vyznat. Potřebovali jsme to rozdělit, proto na pozadí se všechny stránky rozdělí na 4 typy obsahu – adresář lidí, události, studijní programy a zbytek stránek.

Nasept Wf_540x200 - reference
Sekce v našeptávači
Frame-3 Wf_540x200 - reference
Filtrace výsledků vyhledávání
Terms Wf_540x200 - reference
Vše podloženo daty

Aplikační proces – žádost o studium

Robustní proces žádosti o studium provede studenty detailní přihláškou, vyžádá si desítky různých podkladů a studijní oddělení nyní ušetří dost času s přihlášením studentů. Tato komunikace dříve fungovala pouze přes e-mail.

Aplication Wf_540x200 - reference
Desítky e-mailů nahradila aplikace
Aplication2 Wf_540x200 - reference
Online stav žádostí
Process Wf_540x200 - reference
Vše zachycuje detailní diagram

Iterování a komentáře

Upravit wireframe oproti naprogramovanému webu je otázka chvíle. Proto už v této fázi bouřlivě debatujeme a návrhy upravujeme. Zde je potřeba zapojit klienta, zákazníky a další členy týmu jako třeba SEO specialistu.

Wireframe by měl také vidět vývojář. Nestane se tak, že si vymyslíme sice krásnou funkci, která bude ale technicky problém udělat a implementace bude velice náročná.

Cleanshot-2023-01-16-at-1745012x Cleanshot-2023-01-08-at-1009442x-1
Invision4 Cleanshot-2023-01-08-at-1009442x-1

Dokumentace a popis funkčnosti

Pouze z wireframů nemusí být jasná veškerá funkčnost. Doprovází jej podrobná dokumentace a popis funkčnosti, který nemusí být na první pohled jasný. Při návrhu webu se vždycky vymyslí spousta funkcí, které ale mohou vývojáře zahltit. K dokumentaci patří prioritizační tabulka. Ne každá funkce má stejnou prioritu, dle možného efektu a ceny na vývoj určujeme priority a případné odsunutí funkcí na pozdější implementaci.

Cleanshot-2023-01-16-at-1724162x Wf_540x200 - reference

6. Implementace

Pro kompletní obrázek uvádím i další kroky v procesu, které jsou sice mimo mé kompetence a náplň práce, jsou ale pro úspěch zásadní a vždy zde působím jako supervizor.

Tvorba grafiky

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.

Cleanshot-2021-08-26-at-081326 Wf_540x200 - reference
Tvorba moodboardu a definice vizuálního stylu
Barvy
Volba barev a defice styleguide
Untitled-3-2 Wf_540x200 - reference
Výsledná grafika zpracovaná na desítky stránek

Tvorba a migrace obsahu

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ě textyobsah. 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.

Kódování a programování

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?

Web postavený na WordPressu se lehce ovládá. Nový obsahový editor Gutenberg umožňuje lehce spravovat všechen obsah webu, včetně sebemenších změn layoutu, což se pro tak obsáhlý web, jako má AAU, hodí.

Na vývoji webu se podílela i společnost Involve.cz, která měla na starosti vývoj aplikačního formuláře, který je velmi důležitým prvkem nejen samotného webu, ale i celého businessu AAU. Kvůli napojení na několik dalších externích služeb jsme nechali formulář vyvinout přímo na míru. Navíc, díky tomu, že Involve spravuje pouze aplikaci a já zase vývoj statických stránek, nedocházelo při vývoji ke kolizím.

Adam Laita, specialista na WordPress

Kontrola a dozor nad spuštěním

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í.

Projektové ří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.

Gantt asana 4 Gantt asana 4
Náhodný příklad gantového diagramu v Asaně

8. Výsledky a čísla

Moje práce na UX zabrala kolem 6 týdnů a celý redesign se povedlo spustit za 8 měsíců od vykopnutí. Na AAU byla časově náročná migrace obsahu a přenos sofistikovaných procesů na pozadí.

Mimo zlepšení hlavní metriky – 107% nárůst odeslaných leadů se nám povedlo vyřešit ale i několik dalších problémů, záměrně vypíchnu i ty, které řeší problém „mimo“ web a jdou mnohem dál:

  • Značné ušetření času studijního oddělení při akvizici nových studentů
  • Zesnadnění práce s obsahem pro administrátory a zamezení duplicitám
  • Zlepšení použitelnosti na mobilu
  • Zpřehlednění dříve nepoužitelného vyhledávání
  • Zrychlení webu, primárně „uživatelských“ metrik TTI (Time to Interactive) a FCP (First Contenful Paint)
  • Lepší marketingové, SEO a analytické možnosti, které vyřešil přechod na jiný systém.

Web by neměl umřít

E-shop či web nevnímejte staticky. Měl by se neustále vyvíjet spolu s firmou. Po spuštění je ideální zase měřit a vyhodnocovat, reagovat na změny na trhu a chování zákazníků. Nicméně realita je taková, že často další rozvoj na nějakou dobu utichne a časem se provede další „sprint“.

Závěr

Pokud jste dočetli až sem, tak máte doufám lepší představu jak pracuje UX designér (nebo alespoň já) a jak může probíhat proces redesignu webu.