Bezpečnostní dashboard v bankovní aplikaci
Případová studie UX designu

Kontext
Moje banka a KB+ jsou mobilní bankovní aplikace pro běžnou populaci.
Problém
Uživatelé mají obavy z nízkého zabezpečení mobilní aplikace. Bojí se krádeže mobilu a zneužití jejich bankovního účtu.
Typ projektu
End to end in house UX design pro mobilní aplikaci Komerční banky.
Role
Senior UX designér
Spolupracoval jsem s PO, UI designérem, business analytikem a oddělením Security.
Rok
2022
Dodáno
- Koncepty
- Zpráva o testování konceptů a použitelnosti
- Wireframy
- UI
- Doporučení pro propagaci a osvětu
Výsledek projektu
Výstup
- Nová sekce aplikace
- Plán na její využití v marketingu a osvětě
Dopad
- Reálné zvýšení zabezpečení mobilu i mobilní aplikace
- Rozptýlení obav z nízké bezpečnosti mobilní banky
Proces
1. Zadání
Oddělení security chtělo umístit do aplikace Moje Banka verzi bezpečnostního certifikátu a aplikačního šifrování.
Rychlým testem mezi vývojáři a analytiky v bance jsem si ověřil, že tahle informace není nijak přínosná ani pro takhle erudované uživatele a že pro běžného uživatele nemá žádný přínos.
Správná otázka však byla jiná. Proč tam ty informace securita chtěla? Co byl cíl?
Kontaktoval jsem je a zjistil, že kolegové z oddělení security chtějí zvýšit povědomí o bezpečnosti aplikace.
2. Minulé výzkumy a zpětná vazba
Nejprve jsme se podívali na data z minulých testování a rozhovorů. Naše i oddělení security.
Nejdůležitejší zjištění:
- Uživatelé považují webovou bankovní aplikaci v počítači za bezpečnější než aplikaci v mobilu. Opak je pravdou.
- Na druhou stranu nevyužívají všechny možnosti, jak zvýšit zabezpečení svého mobilního zařízení:
- Mobil má vlastní zabezpečení, ale uživatelé ho neaktivují (PIN, biometrika…).
- Bankovní aplikace má vlastní funkce, které zvyšují její zabezpečení, ale uživatelé jim na to nedávají oprávnění.
- Uživatelé bezpečnosti nerozumí a bojí se cokoli změnit, aby se nepokazilo to, co už funguje.
3. Upravili jsme zadání
Proto jsem kontaktoval productownera, security a navrhl, že upravíme zadání tak, aby výsledek:
- Rozptýlil obavy uživatelů z používaní mobilní banky.
- Přiměl je zvýšit jejich zabezpečení.
4. Zmapoval jsem aktuální stav
Důkladně jsem si prošel systémy iOS, Android, konkurenci i naši aplikaci ohledně informací o možnostech zabezpečení i způsobech jeho nastavení a potvrdil jsem si, že:
- informace o zabezpečení jsou rozmístěné různě po sytému a chybí jedno místo, kde by bylo vše přehledně shrnuté
- uživatel není o možnostech zabezpečení aktivně informovaný
- uživatel nezná aktuální stav svého zabezpečení
- uživatel není motivovaný zabezpečení navýšit
5. Inspirace
Abych se inspiroval a pochopil, jak jiné aplikace řeší tyhle problémy, podíval jsem se do on-line i off-line světa.
Pak jsem je seskupil podle podobných funkcí. To mi pomohlo identifikovat používané vzory a nemusel jsem je znovu vynalézat.

6. Design konceptů
Po zvážení všech možností jsem se rozhodl vytvořit sekci v aplikaci, která by všechny bezpečnostní informace shrnula přehledně na jednom místě. Vzniklo několik verzí, při kterých jsem se snažil využit tyto principy:
- Princip semaforu. Všeobecně známá barevná paleta i ikony z chybových stavů, dopravy a bezpečnosti
- Zobrazení aktuálního stavu pomocí grafu (%) a využití lidského nutkání “mít vše hotovo”
- Rozdělení na aktivní a neaktivní položky (co můžu a co nemůžu udělat)
- Popisek v menu – aktuální stav v procentech vzbuzuje zvědavost a zvyšuje míru otevření Bezpečnostního dashboardu

Otázky k řešení
Dokážeme popsat míru zabezpečení jedním číslem?
Spolu s analytikem jsme kontaktovali security a dohodli se na způsobu výpočtu míry zabezpečení. Každý způsob zabezpečení dostal koeficient, podle přínosu k bezpečnosti zařízení a bankovní aplikace.
Jak uživatele upozornit na novou sekci?
Nová sekce sama o sobě nebude stačit. Uživatelé běžně neprocházejí aplikace, aby zjistili, co obsahují, takže bylo potřeba vymyslet i způsoby, jak je tam přivést:
- Notifikace v aplikaci, které upozorní na konkrétní problémy/možnosti ohledně bezpečnosti
- Položka menu bude obsahovat prvek, který zvýší zvědavost
- Do sekce musíme uživatele přivést už v rámci onboardingu do aplikace
7. Testy s uživateli
Připravil jsem scénář testování, cílovou skupinu a vytvořil podle něj proklikávací prototyp v Axure. Konzultoval jsem jej s UX výzkumníkem a společně jsme moderovali testy s pěti uživateli.
| Hypotézy/Dotazy | Zjištění |
|---|---|
| Číselná hodnota v popisku položky menu aplikace zvýší šanci na otevření Bezpečnostního dashboardu. | Procento zabezpečení vzbuzuje zvědavost a zvyšuje míru prokliku. |
| Uživatelé znají barvy semaforu a jejich význam. | Barevnost správně upozorňovala na problémové místa. |
| Graf a jeho hodnota bude motivovat uživatele k navýšení zabezpečení. | Potvrzeno. Uživatelé si aktivovali některé funkce, i když někdy nerozuměli tomu, jak to funguje nebo pomáhá. |
| Jsou tady nějaké problémy s použitelností? | Červená ikona s “fajkou” mátla uživatele. |
| Popisky jednotlivých zabezpečení nebyli vždy jasné. Uživatelé nerozuměli jejich funkci nebo přínosu. |
8. Úprava návrhu a retest
Ladění textů. Následovalo několik kol s copywritery a oddělením bezpečnosti. Snažili jsme se popisy napsat tak, aby uživatelé pochopili přínos i způsob zabezpečení:
- hledala se dostatečná míra zjednodušení,
- při zachování faktické správnosti.
Výsledkem bylo rozdělení informací na první obrazovku s jednoduchou informací a druhou, kde se “zvědavci” dozvěděli technické podrobnosti.
9. Příprava dokumentace s analytikem
Vytvořil jsem finální návrh a business analytik připravil na jeho základě a mých připomínek dokumentaci pro vývoj. Grafik připravil podklady pro marketing.
10. Kontrola výsledku
Po ukončení vývoje, jsem ještě jednou v aplikaci zkontroloval a otestoval výsledek.
Bezpečnostní dashboard v KB+
Sekce byla s úpravami použita i v nové aplikaci KB+.
Pomocí výsledků testů s uživateli jsem přesvědčil správce Design systému, aby zůstaly zachované barvy semaforu. Je to jediná obrazovka v KB+, která nedodržuje barvy Design Systému.

Mojmír je týmový hráč, který zvládá kreslit UX návrhy a nebojí se v tomto ohledu ani složitých výzev, kdy je nutné skloubit požadavky klientů, securitní požadavky a současně požadavky legal. Díky za dlouhou pracovní spolupráci a jsem rád, že jsi byl součástí mého squadu jak na Mobilní bance, tak na KB+ appce.
Petr Kovář
Product owner KB mobile banking