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.

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á

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

Vladan Hejnic

Donor projektu Kamdu

01

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

— vysvětluje Vladan Hejnic, donor projektu

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.

Kamdu: prezentační web
Prezentační web Kamdu.
Kamdu: Předchozí výpis workshopů
Web určený pro nákup workshopů.
02

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

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

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

— doplňuje Vladan Hejnic, donor projektu
Workshop s klientem
Workshop s klientem
Workshop s klientem

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.

Prozkoumat
04

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

Wireframy Kamdu pro mobilní a desktopovou verzi
Wireframy zjednodušeně ukazují, jak budou vypadat hlavní stránky webu – od úvodní stránky až po objednávku.
05

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.

Interaktivní prototyp wireframů Kamdu
Z wireframů jsme vytvořili interaktivní prototyp, kterým se testéři proklikávají jako na skutečném webu. Šipky znázorňují, kam kliknutí v prototypu povede.
06

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.

Výstupy z uživatelského testování prezentovány klientovi
Výstupy z uživatelského testování jsme pravidelně prezentovali. Klient díky tomu vidí, jak testování formuje finální řešení a může se informovaně rozhodovat.

Uživatelské testování

Převedeme domněnky na ověřená fakta.

Prozkoumat
07

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.

Definice pravidel grafického designu
Definování brandových barev.
Komerční využití designu
Ukázka aplikace vizuálu na reklamních plochách.
Grafika pro Kamdu
Prototyp webu jsme převedli do grafické podoby a otestovali finální verzi.
Hero sekce na homepage
Aplikace vizuálu na hero sekci homepage.
08

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.

Testování grafické podoby Kamdu
Prototyp převedený do grafické podoby – testování finální verze
09

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)
  • Maximální flexibilita – „vše je možné".
  • Kompletní kód ve vlastnictví klienta.
  • Žádný vendor lock-in z pohledu dodavatele.
  • Delší doba do spuštění první produkční verze.
  • Vyšší náklady na vývoj.
  • Aktualizace a údržbu je nutné řešit vlastními silami.
  • Vyšší nároky na SLA.
Existující LMS
(úprava hotového řešení)
  • Rychlejší dodání MVP díky předpřipravenému základu.
  • Pravidelné aktualizace a nové funkce zdarma.
  • Nižší náklady na vývoj.
  • Nižší nároky na SLA.
  • Možnost využít hotové funkce nad rámec původního zadání.
  • Částečné limitace dané architekturou LMS.
  • Základní kód LMS není ve vlastnictví klienta.
  • Částečný vendor lock-in.
  • LMS je primárně pro online kurzy → nutnost úprav procesů.

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.

10

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

Průběžné prezentace výstupů klientovi
Prezentace poznatků z uživatelského testování.
11

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

Je čas na Smootio?

Rádi poradíme a koukneme se, co pro vás můžeme namíchat.

Napište nám nebo si rovnou rezervujte online hovor.

Ozveme se vám do 2 pracovních dnů.

Vaše údaje zpracujeme podle Zásad o zpracování osobních údajů a použijeme pro nezbytný kontakt.

O souborech cookie na tomto webu

Používáme cookies pro analytické účely, které nám pomáhají zlepšovat náš web a pochopit, jak ho používáte.

Více informací  |   | 

Nastavení souborů cookie

Vyberte, které kategorie cookies chcete povolit. Více informací o jednotlivých kategoriích najdete v naší ochraně soukromí.

Nezbytné

Tyto soubory cookie jsou nezbytné pro základní funkčnost webu a nelze je vypnout. Ukládají pouze vaše rozhodnutí o souhlasu s cookies.

Preferenční účely

Tyto soubory si pamatují vaše volby a preference (např. jazyk, region) pro lepší uživatelský zážitek.

Analytické účely

Používáme Google Analytics 4 ke sledování návštěvnosti a pochopení, jak návštěvníci používají náš web. Data jsou anonymizována.

Marketingové účely

Tyto soubory slouží k zobrazování relevantních reklam a měření efektivity marketingových kampaní. Momentálně nepoužíváme.