Bezpečnostní dashboard v bankovní aplikaci

Případová studie UX designu

Aplikace KB+

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

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í:

  1. Uživatelé považují webovou bankovní aplikaci v počítači za bezpečnější než aplikaci v mobilu. Opak je pravdou.
  2. Na druhou stranu nevyužívají všechny možnosti, jak zvýšit zabezpečení svého mobilního zařízení:
    1. Mobil má vlastní zabezpečení, ale uživatelé ho neaktivují (PIN, biometrika…).
    2. Bankovní aplikace má vlastní funkce, které zvyšují její zabezpečení, ale uživatelé jim na to nedávají oprávnění.
    3. 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:

  1. Rozptýlil obavy uživatelů z používaní mobilní banky.
  2. 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/DotazyZjiš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

Logo KB