Příručka marketéra: Jakou roli hrálo UX a copy během velkého redesignu KB.cz

Když se mění web, je to kopec práce. Když od základů měníte web třetí největší banky na trhu, musíte zdolat několik velehor. Jak to probíhalo, co se (ne)povedlo a co jsme se naučili?

Náš tým z Wundermanu měl za úkol návrh UX a copywriting. Poodhalím tedy “jen” tuto část projektu.

  • UX proces, jak jsme postupovali
  • Před a po – designové řešení
  • Co se povedlo a co nepovedlo

Komeční banka v březnu 2018 spustila skoro po 2 letech práce nový web. Do projektu se zapojily desítky lidí z různých firem. Kromě týmů KB např. Ogilvy s grafikou, Actum s vývojem, Manica s projektovým řízením. Pojďme ale začít od začátku.

Design proces

Když to zjednoduším, vypadal náš postup takto:

1) Framing fáze – byznys zadání

  • Analýza
  • Návrh UX a wireframů
  • Ověření se zákazníky

2) Realizační fáze – tvorba

  • Copywriting
  • Grafika
  • Kódování, programování
  • Implementace

Výborné bylo, že projektový tým fungoval intenzivně opravdu jako tým, scházel se minimálně jednou týdně, relativně rychle navrhoval, rychle schvaloval a nehrálo v něm takovou roli, kdo je z banky nebo agentury.

Bez analýzy bychom byli slepí

Náš UX tým do projektu vplul ve chvíli, kdy banka měla téměř hotové písemné byznys zadání. Kolegové obešli všechna relevantní oddělení banky a sesbírali požadavky, čímž je do projektu včas a šikovně zapojili. Dokument obsahoval 40 stránek. K dispozici jsme měli také analytiku stávajícího webu, průzkumy a základní persony.

Díky analýze Komerční banka věděla, proč chce nový web, co jí má přinést, komu je určený a jaké potřeby má řešit.

Co byly hlavní důvody redesignu?

  • Odstranit vendor lock – závislost na dodavateli CMS a správci obsahu
  • Zlepšit zákaznickou zkušenost
  • Zvýšit relevanci a aktuálnost obsahu

S novým webem chtěla banka získat možnost správy obsahu bez závislosti na agenturách a dodavatelích. Zákazníci sice docela kvitovali předchozí vzhled webu, ale často se na něm ztráceli, neviděli to podstatné, byli zahlceni odkazy a spoustou navigačních prvků.

Z rozsahu změn na backendu i frontendu bylo jasné, že musíme zvolit celkový redesign skoro od nuly na zelené louce.

A my jsme měli za necelé 3 měsíce určit, co nás vlastně čeká a jak to bude velké.

UX návrh – vstříc k prvním obrázkům

Prvním úkolem našeho UX týmu bylo projít a doplnit analýzy, byznys zadání a navrhnout informační architekturu.

Potřebovali jsme definovat rozsah, obsah a uživatelské rozhraní v podobě wireframů, aby mohlo dojít k reálnější představě všech kolegů. A následně k nacenění, výběru developera a realizaci.

Na začátku jsme formulovali UX vizi nového webu, kterou jsme chtěli promítnout do konkrétní formy:

  • Použitelný: rychlý, srozumitelný, jednoduchý, konzistentní, mobilní a s jasným CTA.
  • Zážitkový: transparentní, otevřený, osobní, důvěryhodný a odborný.
  • Flexibilní: snadno rozšiřitelný, pohodlně editovatelný.

Dvě velké výzvy

Zároveň na nás čekaly dvě důležité otázky k vyřešení.

Design systém. Komerční banka neměla žádný UI kit, styleguide pro web, žádný manuál pro web, který bychom mohli použít. Ani svůj, ani z centrály. Možná bohudík, možná bohužel. Stránky tak nebylo možné poskládat z předepsaných šablon a komponent. Protože jsme chtěli, aby web byl flexibilní a zároveň konzistentní, museli jsme zavést vlastní design systém. Každou komponentu (nadpis, obrázek, formulář, kalkulačka atd.) jsme tak průběžně přidávali i se specifikací do nového UI kitu, který nás provázel celým projektem. Komponent vznikla nakonec zhruba stovka. Web editoři KB je nyní mohou relativně kdekoli a kdykoli přepoužívat a vyřešit s nimi většinu obsahových požadavků.

Informační architektura. Zavrhli jsme plán, že bychom navrhli nejdříve kompletní informační architekturu a následně se věnovali návrhům obrazovek. Návrh IA by trval dlouho a výsledek by stejně neodpovídal měnící se realitě. Museli jsme si zvyknout, že navrhujeme web, o kterém jsme dopředu nevěděli přesně, jaké produkty na něm budou, kolik jich bude, jak budou kategorizované a prioritizované, jaké budou mít parametry a výhody. Nebyla to chyba projektu, ale jeho vlastnost. Náš návrh musel být snadno přepoužitelný a rozšiřitelný, přestože jsme přesně neznali budoucí celek.

Proč jsme nenavrhovali webové stránky

Kvůli potřebě design systému a chybějící IA jsme museli začít s menšími celky, než je webová stránka.

Jako základní stavební kámen jsme určili produkt a přemýšleli, co všechno okolo něj banka i klient potřebují (cena, parametry, dokumenty…). Tyto obsahové prvky jsme prioritizovali, navrhli jim formu v podobě wireframů a později je nazvali komponentami, ze kterých se dnes celý web skládá.

Následně jsme začali navrhovat jednotlivé uživatelské cesty, například výběr produktu.

Uživatelské cestičky

Web má tyto základní uživatelské cesty, které se liší uživatelským zážitkem, formáty a tonalitou obsahu:

  • DO/THINK: Chci produkt a vím, jak se jmenuje – pro tyto uživatele jsme redesignovali navigaci, rozcestníky a produktovou stránku s kalkulačkami.
  • SEE/THINK: Potřebuji vyřešit životní situace produktem, který možná ještě neznám – pro tyto uživatele jsme navrhli a napsali úplně nový obsah, tzv. Životní situace.
  • CARE: Mám produkt a řeším problém – pro tyto uživatele jsme navrhli a napsali úplně nový obsah, sekci Podpora.

Jakmile jsme navrhli a ověřili hlavní uživatelské cesty, čekal nás redesign dalších use casů, jejichž součástí byly například pobočky a bankomaty, kurzovní lístek, sekce o bance, dokumenty, formuláře… Celkem se narodilo více než 600 návrhů ve wireframech.

Uživatelské cesty nám pomohly i při pozdějším doplňování obsahu, o jehož existenci jsme na začátku projektu nevěděli. Zatímco dříve obsah webu odpovídal více organizační struktuře banky nebo ad hoc požadavkům, nově bylo a bude mnohem jednodušší zasadit obsah na správné místo, nebo ho úplně vyřadit. A to se hodí, když spravujete tisíce stránek.

Co jsme ověřovali s uživateli?

Hlavní uživatelské cesty jsme vizualizovali do wireframů obrazovek. Po několika iteracích vznikl interaktivní prototyp i s reálnými texty, takže obsah ladil s formou. Prototypy jsme v několika kolech otestovali s uživateli na desktopu i mobilu.

Testovali jsme také navigaci, názvosloví i preferenci některých designových řešení kvantitativními online dotazníky a card sortingem.

Testováním jsme zachytili spoustu drobností, které v součtu zlepšily použitelnost stránek. Měli jsme vyzkoušené, že se lidé na stránkách vyznají, dokáží používat navigaci, zvládnou porovnat účty a půjčky, vybrat si správný produkt a pořídit si ho.

Co prozradilo testování?

Mezi zajímavé poznatky patřilo:

  • Lidé vysoce oceňovali, když na prvním místě viděli cenu nebo úrokovou sazbu – i když zrovna nebyla nejvýhodnější.
  • Lidé nedůvěřovali srovnání produktů s konkurencí, recenzím nebo hodnocením od jiných zákazníků.
  • Co vypadalo jako reklama bez informační hodnoty, lidé ignorovali – např. bannery, dlaždice článků, fotky klientů.
  • Příběhy klientů uživatele zajímaly, jen pokud obsahovaly konkrétní čísla, data a postup při sjednání produktu, např. hypotéky.
  • Množství přečtených informací se lišilo podle složitosti produktu – u hypotéky lidé četli produktový popisek více a detailněji než u jednoduchého účtu.
  • Se segmentovou navigací (Občané / Firmy), uživatelé neměli problém, z bankovních webů jsou na ni zvyklí.
  • Uživatelům se příliš nechtělo používat fulltextové vyhledávání jako primární volbu navigace, nevěřili, že by bylo relevantní.
  • Některým lidem se nechtělo moc scrollovat dolů. Proto jsme chtěli, aby hlavní sdělení bylo hned nahoře.
  • Lidé dobře rozumí navigaci podle kategorií produktů a upřednostňují jednoduchou textaci (půjčky x chci si půjčit)
  • V navigaci a u názvů produktů lidé oceňovali více česká slova (např. životní pojištění x Vital invest, prémiová karta x A karta)
  • Kreditní karty jsou více vnímány jako “karty” spíše než půjčky

Naše wundermaní wireframy oblékli kolegové z Ogilvy do grafiky a z dalšího srovnávacího testu vyšlo, že chystaný web hodnotí lidé jako nejhezčí ze všech bank v ČR. To nás před realizační fází docela potěšilo. :-)

Nový obsah s přidanou hodnotou

Už ve fázi navrhování wireframů a testování jsme zapojili kolegyně copywriterky, abychom ověřili, že obsah s formou budou v souladu. Copywritingem si prošel skoro celý web. Texty produktů bylo potřeba zeditovat, zkrátit a přizpůsobit novým komponentám.

Úplně nové texty vznikly pro sekci Podpora (FAQ) s využitím dat z infolinky. Slibujeme si od ní, že sníží počet dotazů přes telefon a sociální sítě,

A hlavně jsme společně s KB napsali Životní situace.

Víte, jak si uspořádat peníze ve vztahu? Co s hypotékou v případě rozvodu? Jak postupovat, když měl zemřelý v bance účty nebo investice? Jak zabezpečit sebe, děti i rodinu, jak přijmout nebo připravit dědictví?

Odpovědi i na tyto otázky najdou lidé v tematických sekcích První práce, Založení rodiny, Rozvod a rozchod, Děti vychází z domu a Dědictví. Při rešerších jsme nikde jinde takový obsah pohromadě nenašli. Pouze útržky a dílčí články z médií, které si navíc často protiřečily. Veřejné zdroje většinou mlčí úplně.

Srovnání před a po

Úvodní strana: Původní homepage obsahovala přes 50 různých odkazů. Opustili jsme koncept všeho pro všechny, prioritizovali obsah podle segmentů a snížili počet odkazů na 15. Z testování vyšlo, že produktová navigace uživatelům vyhovuje. Akčním nabídkám jsme dali efektivnější a responzivnější formu, opustili jsme bannery.

Rozcestníky: Navrhli jsme různé typy nových rozcestníků umožňující srovnání produktů a jejich výběr bez toho, aby uživatel musel procházet všechny podstránky. Původní rozcestníkové stránky obsahovaly více odkazů a navigací.

Produkty: Do popředí jsme nově navrhli dát cenu, úrokovou míru nebo jinou konkurenční výhodu. Informace se mohou přeskládat podle potřeby.

Úplně nový obsah – podpora: Odpovědi na často kladené otázky nově radí lidem, kteří řeší problém s produktem nebo službou. Obsahuje návody a rady, co dělat když…

Úplně nový obsah – životní situace: Nové sekce, které odlehčenějším stylem představují užitečnost produktů banky na životních křižovatkách. Součástí jsou také infografiky a kvízy.

Co se nepovedlo

Co bychom vylepšili? Náš UX tým mohl být aktivnější ve specifikaci interakcí a funkcionalit, některá zadání se vývojářům tzv. ztratila v překladu.

Jsou věci, které se pak nepovedlo odladit. Jiné se do spuštění nestihly ani navrhnout. Kvůli IT limitům se kalkulačky zatím nechovají dynamicky. Pracuje se na vylepšení poboček, bankomatů a filtrů při vyhledávání. Víme o rezervách v SEO. K produktům se ještě musí automatizovaně napojit ceníky.

Pozitiva ale převažují.

Co se povedlo

Banka má web, který splňuje většinu požadavků jejich týmů. Uživatelům se stránky líbí a dokáží si vybrat správný produkt.

Správa obsahu je pro banku rychlejší a efektivnější, má kontrolu nad CMS. S komponentami si může webeditor poskládat nový obsah v konzistentní formě a díky uživatelským cestám ho zařadit na smysluplné místo webu.

Marketingově se web dokáže lépe přizpůsobit běžícím kampaním, nestojí sám o sobě ale je součástí multichannelu. Díky nové infrastruktuře se do budoucna počítá i s větší personalizací a automatizací.

Poděkování

Díků by bylo třeba zmínit hrozně moc. Na straně Komerční banky děkujeme za spolupráci především Kateřině Šušákové, Pavlíně Gilmore, Davidu Šmahelovi, Michalu Rybářovi a Tomáši Vohnickému.

Diskuze k článku