Kamdu

O projektu

Kamdu je platforma workshopů pro studenty a mladé lidi, kterou jsme dělali v týmu ve Smootiu. Klient řešil, že mu lidé po kliknutí na reklamu mizí při přechodu z prezentačního webu na samostatný systém, kde se workshopy kupovaly. Výzkum ukázal, že problém je hlubší: dva oddělené weby nedávaly smysl a 67 % návštěvníků přicházelo z mobilu. Tým se s klientem rozhodl obě platformy sjednotit do jedné, mobile-first, blízké spíš mobilní aplikaci než webu.

Moje role

Výzkum, workshop s klientem a testování vedl tým. Já jsem měl na starosti wireframy, prototypy a finální vizuální návrh, tedy fázi, kde se ověřené poznatky měnily ve skutečné obrazovky.

Úkol: od wireframů po vizuální návrh

Wireframy

Navrhoval jsem wireframy pro mobil i desktop, mobil jako první. Kamdu cílila hlavně na mladé lidi a studenty na telefonu, takže klíčové obrazovky (vstup, výběr workshopu, detail, košík, platba) musely fungovat nejdřív tam. Desktop jsem stavěl jako rozšíření, ne naopak. Do mobilních wireframů jsem přidal interakce, aby šly použít v prvním kole testování.

Prototypy

Z wireframů jsem postavil funkční mobilní prototyp pro dvě hlavní persony, studenta a rodiče. Jejich očekávání se lišila natolik, že ovlivnila, co prototyp vůbec musí umět ukázat. Zvlášť jsem udělal i desktopovou verzi, kterou jsme použili interně k validaci a pak i na prezentaci klientovi.

Co jsem se dozvěděl z testování a co jsem s tím udělal

Testování pokrývalo celou cestu od vstupu po objednávku: jestli lidé rozumí, kde jsou a co mohou udělat, jak jim funguje výběr a filtrování workshopů, jestli je přehledný detail workshopu a košík (včetně pochopení kouče zdarma a fakturace), výběr platby a co po zaplacení očekávají. Ptali jsme se i na poradnu, certifikát a sdílení na sociálních sítích. Prototyp byl jako celek hodnocen pozitivně. Výstupy z testování tým pravidelně prezentoval klientovi, aby viděl, jak testování formuje výsledné řešení.

První kolo testování (dělal ho tým) ukázalo jasný vzorec: studenti chtěli osobní výběr a vizuální lehkost, rodiče přehlednost a jasně vedené kroky. Rozdíl byl vidět už na vstupní stránce. V návrhu jsem musel vyřešit dvě konkrétní věci: obrázky workshopů samy o sobě nestačily, chyběla krátká anotace, a role kouče nebyla v košíku jasná, dokud se k ní student nedostal. Do dalšího kola jsem proto přidal kontext k výběru a vysvětlení role kouče posunul dřív do cesty.

Vizuální návrh

Po prvním kole testování bylo jasné, že koncept funguje a nepotřebuje zásadní změny, takže jsem mohl přejít k finální grafice. Držel jsem se existujícího brand manuálu (typografie, barevnost, logo) a tónu ze social media kitu, ne vlastního stylu navíc. Definoval jsem pravidla, jak se grafika pro Kamdu používá i mimo hlavní web, a řešil jsem hero sekci na homepage, tedy první dojem, který měl rozdíl mezi studentem a rodičem zvládnout hned na první obrazovce. Druhé kolo testování na hotové grafice potvrdilo, že funguje, a vyšly z něj jen drobnosti jako název tlačítka nebo vizuální oddělovač.

Pro další rozšiřování jsem sestavil jednoduchý styleguide: barvy, tlačítka, štítky, ikony a komponenty hlavičky a patičky.

Úkol: najít správný workshop

Výpis místo seznamu

Původní rezervační systém byl zastaralý a zmatečný: workshopy v dlouhém seznamu po týdnech, malé karty a filtry bez jasné hierarchie. V novém výpisu má každý workshop kartu s datem, časem, místem, lektorem a cenou, štítky oborů a stavem (v košíku, jste přihlášen). Dostupnost semestru je vidět nad výpisem a krátká nápověda vysvětlí, kdy se workshopy konají.

Kalendář jako pomoc při výběru

Mladí lidé s kalendářem a time managementem moc nepracují, tak jsem kalendář dal přímo do platformy. Při procházení kurzů student hned vidí, na které workshopy už je přihlášený a ve které dny má volno. Kalendář má legendu (workshopy, přihlášen, plná kapacita) a přihlášené workshopy jsou navíc vypsané po dnech v rozbalovacím seznamu nad výpisem.

Úkol: objednávka na dvě kliknutí

Dva kroky místo dlouhého formuláře

Studenti jsou zvyklí platit v telefonu dvěma kliknutími a dlouhé formuláře nebo registrace je odradí. Objednávku jsem proto postavil jen ze dvou kroků. V prvním student vyplní jméno, e-mail, telefon, adresu a školu, ve druhém vybere platbu. Volba platební metody je zároveň akt zaplacení: například u platby přes telefon vyskočí karty a platba je hotová dvěma kliknutími. Požadavky na studenta jsem ořezal na nejnutnější minimum.

Škola a našeptávač

Škola je netypický požadavek a hrozilo, že studenta odradí. Pro vývoj jsem proto zadal našeptávač škol, aby se pole dalo vyplnit rychle a bez zbytečných chyb.

Cashback a kouč zdarma, vysvětlené tam, kde se student rozhoduje

Studenti nechápali, co cashback a kouč zdarma znamenají, kdy na ně mají nárok a s čím souvisí. Vysvětlení proto doprovází celou cestu: při procházení kurzů, v detailu workshopu i v košíku, kde je rozepsáno, které workshopy cashback mají a kolik korun se vrátí. Krátké vysvětlení se otevírá v panelu přímo tam, kde se student rozhoduje, takže ho nemusí hledat jinde.

Po zaplacení: jistota a návrat

Děkovací stránka studenta ujistí, že vše proběhlo správně, a řekne mu, že mu ještě přijde e-mail s místem a časem, takže si nic nemusí pamatovat. Workshop si může jedním nebo dvěma kliknutími přidat do kalendáře Google nebo Apple. Chtěl jsem také, aby si studenti zakládali účet: je to hmatatelný důkaz, že jsou přihlášení, a mají tam přehled aktivních i dřívějších kurzů, ke kterému se mohou kdykoli vrátit. Počítalo se s tím, že řada lidí účet nebude chtít, proto potvrzení přijde okamžitě i e-mailem.

Co z toho beru

Nejsilnější poučení pro mě bylo, že dvě persony se stejným cílem (přihlásit se na workshop) mohou potřebovat úplně jinou cestu, a že to jde vidět už v tom, jak kdo čte stejnou vstupní stránku.

Kamdu mezitím skončilo, takže se nedá říct, jak by návrh obstál v provozu. Beru z něj proto hlavně postup a rozhodnutí, ne výsledky.