Případová studie
Kamdu: Kam mizí návštěvnost z reklamy?
Modernizovali jsme cestu k objednávce pro generaci iPhonu a Netflixu
O Kamdu
Kamdu je vzdělávací platforma určená studentům, kteří se rozhodují, jaké profesi se chtějí v budoucnu věnovat. Prostřednictvím Kamdu se mohou přihlásit do workshopů vedených profesionály z praxe. Lektoři představí zájemcům svůj obor a dají nahlédnout pod pokličku své práce.
Kamdu jako jediný projekt v ČR pokrývá řadu oborů od vědy a výzkumu přes informační technologie a právo až po marketing, podnikání, obchod či sociální služby.
Průběh realizace
Spolupráce očima klienta
"Měli jsme jistotu, že máte náš projekt opravdu navnímaný. Dostávali jsme relevantní otázky, které mířily k jádru věci a vytáhli jste z nás, co potřebujeme.
V minulosti jsem zažívala stres z toho, že musím za dodavatele hlídat, aby se propsalo vše, co má. Tentokrát jsem měla dojem, že se o projekt téměř nemusím starat."
— popisuje Marie Froulíková, zakladatelka projektu
Marie Froulíková
Zakladatelka Kamdu
„Díky spolupráci se Smootio jsme si i zodpověděli otázky, které nás dříve nenapadli, ale byly důležité pro další vývoj projektu. Dostali jsme se nad rámec webu, např. k obchodnímu modelu nebo pravidlům nákupu."
— doplňuje Vladan Hejnic, donor projektu
Vladan Hejnic
Donor projektu Kamdu
Výchozí situace a zadání
Lidé se na webu Kamdu ztrácí a nedokončí objednávku. Tak znělo první nastínění problému. Objednání workshopu vyžadovalo přejít z webu do objednávkového systému, právě tady jsme očekávali kritické místo.
Celkově nebylo stávající řešení výběru workshopů a procesu objednávky ideální. V začátcích projektu stačilo, ale s postupnou profesionalizací chtěl klient nabídnout mladým lidem ten nejlepší zážitek. Výběr workshopu by měl být jednoduchý a nákup přímočarý.
Představte si, že máte tu nejnáročnější zákaznickou bázi, která vyrostla na Apple, Spotify, Alze, Netflixu a jiných moderních službách. Stejné UX očekávají všude kolem sebe, a to i v Kamdu. Potřebovali jsme cestu webem modernizovat."
Co jsme měli v ruce na začátku
Dva weby – klasický prezentační web Kamdu a separátní web určený pro nákup workshopů. Dále Komunikační strategii, Brand manuál (zejména typografie, barevnost a logotyp) a Social media kit, který definoval tón a formu komunikace na sociálních sítích.
Přístupy do Google Analytics nám umožnily nahlédnout do aktuální výkonnosti stránek, zjistit jak se uživatelé na webu chovají a identifikovat klíčová místa pro optimalizaci z pohledu dat.
Jak jsme na to šli
Než se vrhneme na řešení, ověříme příčiny problému
Museli jsme si ověřit, jestli samotná úprava prezentačního webu skutečně pomůže.
Neexistují ještě jiné faktory, které způsobují, že uživatelé ztrácí zájem mezi prezentačním webem a objednávkovým systémem? A pokud ano, jak je odhalíme a vyřešíme?
1. Úvodní dotazník
Požádali jsme klienta o vyplnění krátkého dotazníku. Ptali jsme se například:
- Co má návštěvník pochopit během 10 vteřin po příchodu na web?
- Kdo je cílová skupina a jaké má motivace?
- Jaké jsou existující limity (technické, obsahové, procesní)?
- Proč jsou v projektu dva oddělené weby?
Z odpovědí jsme sestavili první hypotézy – na koho přesně cílíme, co očekává a jak se chová. Díky dotazníku jsme si také s klientem upřesnili zadání a sladili očekávání.
![]()
Marek Pačes
Produktový designér
„Celý projekt Kamdu odstartoval jednoduchým zadáním – upravit web Kamdu. Ale rychle se ukázalo, že stojíme před mnohem širší výzvou – sjednotit platformy prezentačního webu a objednávkového systému, zjednodušit uživatelskou cestu a vytvořit prostředí, které bude srozumitelné a motivující pro studenty, rodiče i učitele.
Data, dotazníky a workshopy nám pomáhají odhalit skutečné příčiny problému a zadání maximálně upřesnit. Jinak bychom riskovali, že změny nepřinesou očekávaný výsledek."
2. Desk research: Co nám říkají o chování návštěvníků data?
Hypotézy jsme si nejdříve ověřovali pomocí dostupných dat. Analýzu jsme provedli z webové analytiky a dalších podkladů dodaných klientem.
Z dat a podkladů vyšlo:
- Primární cílovou skupinou jsou středoškoláci.
- Jakou tonalitou mluvit na cílovou skupinu a co je pro ní důležité.
- Jakou roli hrají rodiče, školy a pedagogové, a jak jejich potřeby a očekávání promítnout do návrhu webu.
- Jaké procesy má smysl automatizovat (např. generování certifikátů, či komunikaci s účastníky).
- Dva ze tří přístupů pocházely z mobilních zařízení.
Z poznatků jsme připravili základy pro další práci:
- Formulovali jsme naše vlastní hypotézy týkající se cílové skupiny a očekávaných funkcí.
- Popsali jsme vlastnosti různých person (Student, Rodič, Škola), jejich motivace a potřeby.
- Vytvořili jsme user stories.
- Navrhli jsme tzv. minimum viable product – základní strukturu stránek včetně potřebných funkcí.
- Sepsali jsme otázky k funkcím a procesům (proces objednávky, po objednání, po absolvování workshopu), abychom vše následně ověřili na workshopu s klientem a pomocí uživatelského testování.
Workshop
Důležitou částí projektu byl pak tzv. discovery workshop s klientem. Ověřili jsme si a doplnili hypotézy a zodpověděli dotazy, které v této fázi odpověď měly.
Workshop odhalil další požadavky:
- Detail workshopu by měl vypadat jako produktová karta známá z e-shopových řešení, s možností dalšího rozvoje obsahu na kartě.
- Umožnit uživatelům hodnocení workshopu i jeho pořadatele.
- Napojení medailonku workshopu na poradnu, jejímž kurátorem bude samotný lektor workshopu.
- Vyřešit reklamační proces a proces výměny za jiný workshop.
- Automatizace generování certifikátů pro absolventy.
- Důraz na propojenost se sociálními sítěmi.
Znalost našeho odvětví, vzdělávání a komunity, byl jeden z požadavků při výběru dodavatele. A v průběhu se ukázalo, že to bylo dobře. Ocenili jsme, že vedoucí projektu měl ke vzdělávání blízko a pomohl nám domyslet některé detaily."
Strategické rozhodnutí: sjednocení obou webů do jedné platformy
Po workshopu bylo zároveň jisté, že oddělené fungování dvou webů nedává dlouhodobě smysl. Společně s klientem jsme se rozhodli sjednotit oba weby do jedné platformy, která bude moderní, přehledná i konverznější – a zároveň postupně rozšiřitelná.
S ohledem na převahu mobilních přístupů a cílení na studenty jsme zvolili mobile-first přístup. Web by měl zkrátka připomínat mobilní aplikaci. Při navrhování webu jsme tak vycházeli z UX vzorů běžných v mobilních aplikacích – například použití bottom sheet's interakcí namísto klasických pop-up oken.
V této fázi jsme vytřídili ještě několik dalších podnětů:
- Zrušení dosavadního kreditního systému a jeho nahrazení běžnou objednávkou včetně platebního procesu.
- Strukturování nabídky podle semestrů s možností filtrování pomocí kalendáře.
- Zavedení uživatelské zóny jak pro účastníky, tak pro pořadatele workshopů.
- Zavedení konceptu „Kouč ZDARMA" inspirovaného principem dopravy zdarma při určité hodnotě objednávky.
Správný směr vám pomůžeme objevit na Discovery workshopu.
ProzkoumatTvoříme kostru webu – wireframe
Pro mobilní i desktopovou verzi webu jsme navrhli podrobné drátěné modely (tzv. wireframy). S jejich pomocí můžeme web rychle a levně otestovat a odhalit chyby dřív, než se začne s grafikou nebo programováním.
S ohledem na mobile-first princip bylo cílem navrhnout web, který umožní plnohodnotné a pohodlné používání zejména na menších zařízeních.
Připravujeme proklikávací prototyp
Pro účely uživatelského testování jsme z wireframů vytvořili funkční prototyp mobilní verze. Návrh vycházel z potřeb a očekávání zástupců hlavních cílovek – studenta a rodiče. Díky tomu jsme mohli lépe reflektovat rozdílné uživatelské scénáře a odlišnost v potřebách cílovek.
Zároveň jsme vytvořili také desktopový prototyp, který sloužil pro interní ověření návrhu, ale i jako podklad pro prezentaci klientovi.
Jdeme na testování webu s reálnými uživateli
Projdou studenti i jejich rodiče webem bez problémů? To jsme ověřovali v 1. kole uživatelského testování. Sledovali jsme, jak s webem pracují a co by jim mohlo objednávku komplikovat.
Co uživatelské testování pokrývalo?
- Pochopení webu Kamdu – rozumí uživatelé, kde se nachází a co mohou udělat?
- Nákupní flow – funguje výběr workshopu, filtrování, přihlášení?
- Detail workshopu – zobrazují se informace dobře?
- Funkčnost košíku – je košík přehledný, pochopí uživatelé „Kouče ZDARMA" a fakturaci?
- Platební proces – funguje výběr metody? Jaké jsou očekávané kroky po zaplacení?
- Sekce Poradna, Certifikát a funkce sdílení na sociální sítě – jaký na ně mají uživatelé názor?
„6 testerů odhalí až 85 % problémů s použitelností."
— zdroj: Nielsen Norman Group – „Why You Only Need to Test with 5 Users"
Jak to dopadlo? Prototyp byl jako celek hodnocen pozitivně. Testování však jasně ukázalo, že různé persony (studenti a rodiče) vyžadují odlišné přístupy, a to nejen v samotném designu rozhraní, ale i v interakci.
Studenti pracují s webem intuitivně, hledají zážitek na míru a vizuální inspiraci. Rodiče naopak preferují jistotu, přehlednost a jednoznačné kontaktní body. Tyto rozdíly se naplno projevily v nákupním flow mobilní verze a budou klíčové pro další kroky návrhu i úpravy komunikační strategie.
Tvorba grafiky
První kolo Uživatelského testování potvrdilo, že zvolený koncept funguje správně a nevyžaduje zásadní změny. To nám umožnilo navázat na ověřený návrh a s jistotou přistoupit k tvorbě finální grafiky.
Testování grafiky
V 2. kole uživatelského testování jsme ověřovali hotovou grafickou podobu návrhu. Výsledky testování potvrdily funkčnost a srozumitelnost návrhu. Vzešly z něj už jen drobnosti, které jsme následně zapracovali – např. úpravy názvů tlačítek, doplění vizuálních oddělovačů apod.
Vybíráme technické řešení
Součástí projektu bylo i doporučení vhodného technického řešení. V úvodní fázi jsme porovnali dvě základní cesty:
- Nasazení existující LMS platformy s již hotovými funkcemi.
- Vývoj vlastního systému na míru, plně přizpůsobeného potřebám projektu.
Naše kritéria výběru zahrnovala:
- Licencování
- Možnost úprav (škálovatelnost)
- Rychlost vytvoření MVP
- Použité technologie
- Náklady na vývoj
- Náklady na rozvoj
- Udržitelnost (podpora a údržba)
Při výběru technického řešení jsme brali v potaz nejen aktuální požadavky, ale také dlouhodobou vizi projektu.
| Technické řešení | Výhody | Nevýhody |
|---|---|---|
| Vlastní LMS (vývoj od nuly) |
|
|
| Existující LMS (úprava hotového řešení) |
|
|
Zatímco existující LMS umožňuje rychlejší spuštění a nižší vstupní náklady, vlastní řešení nabízí větší volnost v návrhu, vyšší kontrolu nad systémem a možnost škálování podle skutečných potřeb cílových skupin.
Jak probíhala spolupráce s klientem
Během spolupráce jsme s klientem udržovali pravidelný kontakt. Každou fázi jsme prezentovali formou přehledných výstupů – od úvodního dotazníku a analýzy, přes návrh Wireframů a Prototypů, až po Uživatelské testování grafické podoby. Jednotlivé kroky jsme společně reflektovali a plánovali ten další. Transparentnost a sdílené rozhodování považujeme za klíčové pro plynulý průběh spolupráce.
Velké uznání patří klientovi – otevřenému, zapojenému a konstruktivnímu partnerovi, který přinášel podnětné postřehy a zároveň nám dal důvěru ve chvílích, kdy bylo potřeba hledat nové cesty. Díky hluboké znalosti cílové skupiny jsme mohli naše hypotézy rychle ověřovat a přetavovat do konkrétních návrhů.
Díky Uživatelskému testování se zástupci z Cílových skupin jsme si navíc už v raných fázích ověřili, že zvolený přístup je funkční a finální návrh tak nevznikal na základě domněnek, ale na ověřených datech a potřebách skutečných uživatelů.
Závěr
Odevzdali jsme tak novou podobu webu — od výběru workshopu až po dokončení objednávky. Výsledné řešení prošlo dvěma koly uživatelského testování se zástupci cílových skupin, takže jsme měli jistotu, že navržená cesta skutečně funguje.
Chcete svůj web posunout kupředu?
Pokud se potřebujete nejprve zorientovat v datech a identifikovat kritická místa, mrkněte na naši službu Prověření e-shopu. A kdybyste chtěli jít hlouběji, doporučujeme prozkoumat Uživatelské testování.
Galerie
Co dalšího jsme namíchali
Prověření e‑shopu
Zjistěte, co brzdí objednávky a jak na nápravu.
Uživatelské testování
Nahlédněte zákazníkům do hlavy. Co je přesvědčí objednat?
Discovery workshop
Pohlídáme, aby se do projektu propsalo vše potřebné.
Redesign e‑shopu
Navrhujeme postupná vylepšení i strategické proměny.
Návrh nového e‑shopu
Představte nám svůj byznys plán a pustíme se do návrhu.
Systematický rozvoj e‑shopu
Průběžným zlepšováním držíte krok s trhem i výkon.