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 studujících, malé studijní skupiny a individuální přístup.

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.

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. Jde však pouze o špičku ledovce, které předchází spousta práce.

Článek je zjednodušený. 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 přeskočení některých činností, které s redesignem webu souvisí.

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


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

Byl jsem postavený před realizaci 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ým úkolem bylo dohlížet 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. Nejde jen o to „mít web“. Spolupráci vykopávám zasláním dotazníku, který obsahuje 41 otázek. Díky odpovědím můžu 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 na 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ů. Zde odpovědi z dotazníku rozvíjíme, brainstormujeme, snažíme se popsat, co nás opravdu pálí a co by měl web 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 často narazili i na více protichůdných zájmů. Museli jsme myslet na zájmy majitelů školy, vedení, akademické půdy, studijního oddělení a na 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 jej 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 se uvolila mu nějaký čas věnovat. Zaměřili jsme se na těchto 5 primárních oblastí:

  1. rozhovory se zaměstnanci školy,
  2. testování a rozhovory se studenty,
  3. webovou analytiku,
  4. analýzu marketingových aktivit,
  5. analýzu 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 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.

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

Vyrazil jsem do terénu a strávil 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ů. Další problém oddělení vidělo v nepřehlednosti, ztraceném čase a ve vysoké chybovostí při veškeré komunikaci e-mailem.
  • Na webu s více než 2 000 stránkami jsou informace č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 studentů, na které by měli studenti znát nebo bez problémů najít odpověď. Web tyto informace obsahoval, ale očividně byly 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ě jeho členové totiž 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 moji oblíbenou formu, spojení 20–30 minutového rozhovoru a ve zbylém čase testování webu. 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. 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 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?

  • Nováčci budou mít více v paměti, podle č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. Zjistím, jak web při studiu využívají, co oceňují nebo co jim naopak 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 spíše to, jestli je Praha bezpečná nebo jestli se tam dostanou na návštěvu.
  • Primární zájem studentů nebyl zrovna o konkrétní o obor (například o práva), ale spíše o to, že chtěli studovat v Praze, a tak hledali, jaké mají možnosti.
  • Studenty hodně zajímal sociální život, informace o Praze a jaký je poměr holky/kluci na škole.
  • Zásadní pro ně bylo, jak velké jsou třídy (kolik studentů) a studenti jakých národností se ve škole vzdělávají.
  • 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 sice potřeba, samotný ale nestačí. Podněty jsem čerpal primárně z Google Analytics a jako doplněk jsem použil HotJar.

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

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

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.

Teplotní mapy a videonahrávky

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.

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

  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. Chceme ho spíše přesvědčit, aby odeslal žádost o studium.
  2. Oproti tomu návštěvník, který přijde na obecnou frázi „Study in business in Prague„, naši školu pravděpodobně vůbec nezná, je v rozhodovacím procesu na začátku a nebudeme po něm rovnou chtít, aby odeslal žádost o studium. Můžeme ho třeba 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 úhlů pohledu. Pro účely redesignu jsem primárně koukal na strukturu 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.

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 zde 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ě 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, která se týká samotného produktu/služby a aktivit, které pomáhají řešit zákazníkovy 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 vaší 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ává online i fyzicky u tabule. V ideálním případě chceme mít těchto map více, jednu 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. Víme, 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čila spousta dalších problémů a potřeb. Nově vypadalo zadání nějak takto, záměrně je zde jen 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 a 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í informací 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 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?

  • Zohlednění zmiňovaných obchodních cílů.
  • 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 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 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í?“

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ě podrobný, reflektovat strukturu a přesné texty. Pro zjednodušení jej lze přirovnat k výstupu návrhu domu. Je tedy 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íraly, ale už je nám jedno, jestli budou bílé či dřevěné. Umožní nám to debatovat nad reálným obsahem, ne nad 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 jej.

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

Myslí se i na ty nejmenší detaily

Správný návrh by měl myslet i na nejmenší detaily a drobné interakce. Například: co se stane 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 se na pozadí všechny stránky rozdělí na 4 typy obsahu – adresář osob, 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, kterou ale bude problém technicky udělat a její 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í je sice podrobná dokumentace a popis funkčnosti, ale ten nemusí být na první pohled jasný. Při návrhu webu se vždy 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, ale pro úspěch jsou zásadní. Působím při nich tedy 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, bylo nutné revidovat současný vizuální styl. Také jsme zkoumali, jestli značka působí a vizuálně komunikuje, co chceme. K tomuto se používá 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 definice 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. Bylo potřeba 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é frází „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. Formulář 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.cz 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ž mě přivádí k dalšímu zásadním bodu – projektovému řízení.

Projektové řízení

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

Toto je často podceňované. Na projektech to vidím 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 zhruba 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 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 náboru nových studentů.
  • Usnadně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í opět 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.