Případová studie redesignu webu Anglo-American University s nárůstem leadů o 107 %
Pro univerzitu jsem navrhl nový web a redesign se ukázal jako zásah do černého. Pojďte se inspirovat, jak provést úspěšný redesign a pomocí uživatelského výzkumu dosáhnout skvělých výsledků.
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.
Než se pustíte to čtení
Případovou studii jsem sepsal hlavně 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.
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, nebertedogmaticky. Zvolené činnosti pro AAU nemusí dávat smysl pro každý projekt a určitě se nejedná o jediné univerzální řešení.
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.
Andy Jezdej
Marketing manager
Obsah:
1. Pochopení problému a záměru
Byl jsem postavený před realizaci předem interně stanoveného problému. AAU řešila 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 v první řadě 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 desítkyotá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ádroproblé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.
Obsáhlý vstupní dotazník
Ú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 samozřejmě na zájmy studentů.
Na základě schůzek se zástupci všech 5 skupin bylo jasné, že původní zadání nestačí – to vzešlo 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 a univerzita mu chtěla nějaký čas věnovat. Zaměřili jsme se primárně na těchto 5 oblastí:
rozhovory se zaměstnanci školy,
testování a rozhovory se studenty,
webovou analytiku,
analýzu marketingových aktivit,
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.
Prostory AAU
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ě 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í:
Studijní 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é dotazystudentů, 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 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.
Studenti Anglo-American University
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 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 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.
Návštěvnost jednotlivých sekcí webu
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.
Teplotní mapy klíčových stránek
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írouinformovanosti, 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ů:
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.
Oproti tomu návštěvník, který přijde na obecnou frázi „Study 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ří.
Co uživatel hledá a má v hlavě
Co mu slibuje reklama
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 mě hondně zajímala strukturawebu 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 školy a automatické e-maily
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 personyvykaš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.
Value Propositon Canvas
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.
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 Teslař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ždoucílovouskupinu.
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í a 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.
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í?“
Aplikace Optimal workshop
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. Je tedy alfa omega celého projektu.
Wireframe neřeší barvy a grafickou podobu, ale funkčnost. Umožní nám to debatovat nad reálným obsahem a představit si, jak bude celý webu vypadat. Grafik tak dostává velice přesné zadání a vývojář zde dokáže odhadnout cenu webu.
Příklad wireframe úvodní strany
Řešíme zobrazení na mobil i tablet
Vzniklo 89 wireframů
Pro zachycení celého webu AAU vzniklo celkem 89 wireframů. Prototyp se vytváří samozřejmě i na mobil a tablet. Výsledný návrh je interaktivní, lze si jej pohodlně proklikat a reálně si představit jednotlivé funkce.
89 wireframů , které zachycující celý web
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 často používané slovo „Business“, vyskočí stovky výsledků, ve kterých se nelze vyznat. Potřebovali jsme uživatelům nejdříve naservírovattonejdůležitější – studijní programy. Proto se na pozadí všechny stránky rozdělí na 4 typy obsahu – studijní stránky, adresář osob, události a zbytek stránek.
Sekce v našeptávači
Filtrace výsledků vyhledávání
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.
Desítky e-mailů nahradila aplikace
Online stav žádostí
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á.
Diskuse v prototypu
Sledování postupu prací
Dokumentace a popis funkčnosti
Wireframy samy o sobě nedokážou plně odhalit veškerou funkcionalitu. Doprovází je podrobná dokumentace jak se má web chovat.
Při návrhu webu se vždy vymyslí spousta funkcí, ale ne všechny mají stejnou prioritu. K tomu slouží prioritizačnítabulka. Dle možného přínosu a ceny na vývoj určujeme priority a případné odsunutí funkcí na pozdější implementaci.
Dokumentace
6. Implementace
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.
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, cochceme. 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.
Tvorba moodboardu a definice vizuálního stylu
Volba barev a definice styleguide
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í.
Adam Laita, specialista na WordPress
Projektové řízení
Včasné spuštění podobně velkého projektu si nedovedu představit bez správného projektového řízení. Toto je častopodceň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.
Příklad Gantt diagramu v Asaně
7. Výsledky a čísla
Moje práce na UX zabrala zhruba 8 týdnů. 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ácesobsahem 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, zlepšení „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 spuštěním umřít. Měl by se neustále vyvíjet spolu s firmou, nechceme ho nechat roky zastarávat a poté udělat zase větší refresh. Po spuštění je ideální opět vyhodnocovat, reagovat na změny na trhu a chování zákazníků.
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. Jak jsem psal již výše, každý projekt vyžaduje postup ušitý na míru, proto tyto kroky neberte dogmaticky.
Líbí se vám, jak pracuji? Potřebujete pomoci s vaším webem nebo e-shopem?Rád pomohu i vám. Napište mi na info@davidkoci.cz nebo mě můžete sledovat na Linkedinu.
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.
Andy Jezdej
Marketing manager
Další případovky
Redesign e-shopu Helveti s 34% nárůstem konverzního poměru