Výchozí situace, vznik potřeby a zadání

Martin Luňáček nás oslovil v únoru 2021, zda bychom se jim nepodívali na web a nenavrhli, jak ho oživit. Před lety, kdy jsme pro Portu navrhovali vizuální identitu a kreativní koncept, bylo našim úkolem jen to. K webu jsme se ani nedostali, ten si Portu dělalo samo.

O to větší radost jsme měli, když se Martin ozval a chtěl, abychom se podívali i na web, jeden z hlavních prodejních kanálů.

„Původní záměr byl udělat "lehký facelift" webu - převážně homepage a uživatelského rozhraní. Cítili jsme potřebu trochu modernizovat design, vylepšit ikony, sjednotit styl. Remembership, který dělal vizuální identitu, byl první volbou pro oslovení - náš brand mají navnímaný z pohledu designu nejvíce.“

Martin Luňáček, Portu

prozrazení výsledku, čtěte dál i tak :)

Portu se od dob, kdy vytvořilo první verzi webu, hodně posunulo a bylo třeba tu změnu reflektovat i v komunikaci. Lehká a jen vizuální změna by však nepomohla. Jejich web už dávno nebyl s to nést tíhu svého obsahu. Bylo třeba změnit strukturu webu a přeskládat obsah dle zákaznických cest.

Pro část potenciálních zákazníků mohla být úroveň webu dokonce i zdrojem určité nejistoty. Byl udělaný šablonovitě a posloupnost obsahu byla čistě strojová, bez pečlivě nadesignovaného "flow" uživatele a jeho interakcí.

I úspěšné firmy mohou narazit na své limity právě kvůli soustředění se čistě na produkt, nedokonalému webu či jiným bodům komunikace. Pak mohou své zákazníky zbytečně znejistit, nebo dokonce odradit. Sebelepší produkt časem narazí na mantinely v podobě nekvalitního designu či komunikace.

Po úvodních workshopech a prvních iteracích se nám s Portu podařilo najít shodu a dostali jsme větší prostor na strategickou změnu, pustili jsme se do kompletního předělání webu a zároveň vytyčili akční plán i pro další změny. Bylo jasné, že prezentační, prodejní a obsahová část si musí “povídat” i s produktem, jinak to bude zase špatně.

Společně s webem tak doznala změn i vizuální identita Portu, pustili jsme se do UX změn a následně i redesignu hlavního produktu Portu, uživatelské části, kde klienti spravují své finance, a také mobilní aplikace, po které mnoho klientů dlouhé měsíce volalo.

„Na aplikaci čekám, jako na první sex“

Uživatel Portu

Navržený postup

Nejdříve jsme se pustili do analýz, rozpočtů a plánování sprintů. Jak už jsme zmínili, začali jsme webem a vizuální identitou. Prvním cílem bylo postavit web, který zvládne více obsahu, aniž by se v něm uživatel ztratil a který povede ke konverzi - tedy založení účtu.

Cesta k výsledkům

WEB - Co si vezmeme ze současného fungování?

Portu bylo vždy skvělé v odborném obsahu, který dokázalo generovat. S Radimem Krejčím, který do WOOD & Company přišel Portu vybudovat, jsme strávili mnoho času. Důležitost, kterou přikládal tématu Portu - dávat peníze na lepší místo - byla logická, ale pořád obdivuhodná. Jednoduchost, s jakou to uměl vždy vysvětlit, jakbysmet.

Z naší zkušenosti už víme, že některá témata si zaslouží větší pozornost, a u některých zase můžete být až drsně minimalističtí. Určitě ne vždy platí, že je nutné být co nejstručnější. Finance rozhodně patří mezi jedno z témat, kde se obsah ve větším množství vyplácí.

Bylo třeba zachovat a zároveň rozšířit informační hodnotu webu. Portu už v té době psalo články na blog, pravidelně každý pátek posílalo investiční newsletter a existovala i FB skupina investorů na Portu, kde jsou klienti aktivní. Tento informační/obsahový základ jsme chtěli více prolnout do webu tak, aby na návštěvníky, kteří Portu ještě neznají, nebo se zrovna rozhodují, zapůsobil a dodal jim důvěru a utvrzení, že do toho mohou jít, mohou si do Portu poslat peníze.

Na různých workshopech jsme prošli jednotlivé zákaznické cesty a nadesignovali obsah na každou hlavní stránku. Využili jsme vše, co jsme o Portu už věděli, vytěžili workshopy, existující obsah a začali stavět docela velký web obsahově.

Proč?
Na Portu přichází lidé s různými informacemi, různým stupněm přesvědčení, zda je toto opravdu ta nová cesta, pomocí které mohou zhodnocovat peníze i oni - neinvestoři/drobní investoři, zároveň web musí dát správné a sebevědomé odpovědi i zkušeným investorům a lidem, kteří mají větší obnos peněz a Portu jim dává smysl. Uživatelských scénářů, které se dost lišily, tedy bylo požehnaně. Zákaznických person také.

Dohodli jsme se, že právě toho chceme využít. Začali jsme u každého obsahu, který jsme na web chtěli dát, každičkého odstavce, každé věty přemýšlet, kam lidi chceme poslat dál.

Po tom, co si právě přečetli tento odstavec (nebo jen “proskenovali”), kam by bylo dobré je poslat dál? Co se jim teď bude hodit?

Tento záměr jsme postupně rozpracovávali, až jsme došli k řešení, kdy na většině obrazovek, na konci logického celku konkrétního obsahu, najdete vždy rovnou 2 nebo 3 tlačítka, jakési rozcestníky, kam dál. Ano, někdo by řekl, že jen jedno tlačítko je správné, jen cesta ke konverzi je správná. Může být. Stejně tak může být i mnoho jiných cest, pokud fungují.

Proč ne?
Názory byly rozporuplné, ale postupnou diskuzí a testováním jsme došli k závěru, že do toho můžeme jít a že to dává smysl.

WEB - Co chceme změnit?

Pocity, jaké z webu lidi mají. To, jak na lidi web působí, tedy i celý brand. První, druhý i třetí dojem musí podtrhovat důvěryhodnost Portu a přesvědčení, že lidi v Portu ví, co dělají, že jsou to velcí odborníci a vše dává smysl. Web před našim redesignem byl z našeho pohledu hodně šablonovitý a zároveň, jak často s oblibou říkáme u určité skupiny webů, "anonymní".

Volně dostupné ikonky, málo infografik, špatně vizualizované grafy a data, stejný vzhled takřka každé stránky. Ano, Portu nás v mezičase oslovilo, abychom jim navrhli i covery, tedy úvodní obrázky do záhlaví stránek. Web však potřeboval daleko radikálnější změnu, než jen pár hezkých pixelů “zeshora”.

Původní web Portu

Už dávno víme, že design přímo ovliňuje míru zapojení, dočtenost či ochotu koupit nebo provést kýženou akci. U nejednoho #friendsnotclients se nám to povedlo právě designem změnit.
‍
Portu chyběla tahle část, s takovou péčí totiž svůj starý web nevytvářeli. I tak jim dal hodně práce a bylo v něm spoustu dobrých momentů, především obsahových - v tom byli dobří. Ty dobré momenty jsme vzali a rozpracovali, také jsme na společných workshopech prošli další obsahy a řekli si, kde můžeme sdělení zpracovat vizuálně do infografiky a kde dává smysl využít ikonky. 
‍
Navrhli jsme rovněž odlehčení vizuálu. Přišlo nám, že sice pořád funguje, ale když jsme dostali další prostor si s ním pohrát, podařilo se nám vymyslet, jak ho posunout dál a udělat z něj funkčnější a atraktivnější verzi. Zmenšili jsme městečko kostiček tak, aby jednotlivé prvky nebyly tak velké a celé to působilo kompaktněji. Zároveň se celkový dojem výrazně odlehčil
a získal na prostoru.

Původní web Portu (2017)

Nový web Portu (2022)

Pečlivě jsme pracovali s obsahovými bloky tak, aby uživatelé neztratili pozornost, aby si všimli změny typu obsahu a důležitých sdělení. Nadesignovali jsme typové obsahy, aby unesly to množství textu a různorodá sdělení, která je třeba na webu Portu komunikovat.

Vyvážili jsme používání tmavých a světlých pozadí. Tmavé používáme pro střídání rytmu ve struktuře a jen tam, kde je menší množství obsahu abychom zajistili dobrou čitelnost. Snažíme se působit konzistentně, ale zároveň pracovat s texty dle jejich funkce.

WEB - Ikonky vytvořené na míru, využitelné pro celou komunikaci, web i aplikaci

V REMEMBERSHIP víme, že péče, jakou dáte do komunikace, zvyšuje engagement, buduje důvěru a obecně se vyplácí, a tak jsme měli jasno, že do nového webu Portu potřebujeme dostat i vlastní set ikonek. U rozsáhlých textů je třeba pečlivě přemýšlet, co má zůstat textem a kde můžeme čtenáři pomoct vizualizací, vizuální zkratkou či kotvou. Uživatelům to pomůže i při rychlém "skenování" obsahu.

Nadesignovali jsme 2 typy ikon. Prvním typem jsou spíše mikro ilustrace - větší ikony, které zobrazujeme nejčastěji na tmavém pozadí a ilustrujeme jimi hlavní benefity konkrétních produktů. Tím jsme ve vizuálu Portu dosáhli jednoznačného oživení. Rozšířili jsme si možnosti toho, s čím můžeme pracovat, už to totiž nebylo jen kostičkové městečko. Rozmanitost v rámci konceptu, tedy v rámci vizuální identity, je důležitá pro udržení pozornosti a pro zapamatovatelnost.

Potřebovali jsme ale i menší ikony pro jejich klasičtější použití - vizuální zkratky. U ikon hraje zásadní roli jejich velikost a použití, respektive místo a funkce. Větší mohou být detailnější, jak jsme vám ukázali výše, ty menší musí být jednodušší a zkratkovitější hned z vícero důvodů:

„Diskuze se zákazníky nám pomohla pochopit, jaký vztah mají lidé k dárkům a zážitkům, a našli jsme také prostor, kde se může značka vymezit. Poznatky jsme pak promítli do definice značky i tonality komunikace.“

Portu

WEB - “Chybí tam lidi!”

V pokročilé fázi redesignování webu přišel Portu tým s tím, že jim tam “chybí lidi”. Z různých stran se k nám v týmu (my & portu) dostávaly názory, že nám tam chybí lidský prvek. V té době jsme v návrzích pracovali jen s čistě kostičkovou grafikou. Proč?
‍
Když se podíváte na všechny možné (a často i nemožné) stránky různých služeb a produktů, často na vás vyskočí člověk. Tak samo v kampaních. Často to ale vychází z jednoduché hypotézy “dej tam lidi, to prodává”, nebo ještě lépe “dej tam lidi, bude to uvěřitelné”.

Někdy však opravdu může být dobrá cesta i ta, kterou jde většina. Pořád to ale musí mít svůj smysl. A pak ještě záleží na tom, jak je to udělané. Jestli jste si jen koupili fotku z fotobanky, nebo jste si dali záležet a dali tomu člověku i osobnost, příběh a hlavně sounáležitost s vaší značkou. Vždy se snažíme lišit strategií, kreativitou a pečlivostí. Nikdy nechceme jít cestou "prostě tam plácneme lidi, to bude fungovat".

Nakonec jsme tam ty lidi opravdu plácli, ale došli jsme k tomu po designové cestě. Té s konceptem. Feedback Portu, a to že nám tam chybí lidský prvek, jsme vyřešili skutečnými uživateli Portu. Nafotili se lidi, kteří na Portu již investují, a vytvořil sez toho základ pro další komunikaci. Na hlavní stránce + každé produktové stránce tak můžete vídat skutečné lidi, jejichž příběh si můžete přečíst na blogu a taky jste je mohli vidět v TV spotu.

Přidali jsme lidi, jako většina značek po celém světě. Dodali jsme však i obsah a kontext. Začal se nabízet další video obsah nebo podcasty s těmito lidmi a dalšími klienty Portu. Dávalo nám obrovský smysl ukázat ostatním, že na Portu investují lidi jako oni sami. I proto jsme ke každému z nich uváděli profesi. Dalším cílem bylo zprostředkovat zkušenosti samotných investorů na Portu.

Lidi na webu jsme měli, koncept proč je tam máme taky. Naše práce tady skončila a vrátili jsme se k dodělávání webu. Marketingový tým v čele s Ondrou Káranským a Martinem Benešem koncept lidí dál rozpracovával. Společně s Shrt Cut vytvořili spot i další reklamní materiály. Spot se rozhodli nasadit do televize a časem spustili i podcasty.

Proč ještě nemáte mobilní aplikaci?

Portu odolávalo volání po mobilní aplikaci dlouho a statečně. Ono se není co divit, přeci jen to nejsou malé peníze a navíc musíte mít tým, který bude aplikaci neustále udržovat a rozvíjet. Není to jednorázový projekt.

Jen pro připomenutí, v jakém roce se Portu rozhodlo do mobilní aplikace pustit:

Mobilní aplikace

Na mobilní aplikaci přišla řeč koncem jara 2021. Od začátku jsme se snažili na webu pracovat velmi intenzivně, protože jsme věděli, že to může přijít a my chtěli mít na appku prostor.

Už to jsou tři roky, co jsme v REMEMBERSHIP_ změnili plánování a objednávání kapacit našeho studia. Už dávno nepracujeme na adhoc projektech/zadáních. Různě bolestivými zkušenostmi jsme došli k závěru, že to není cesta pro nás. Malý tým takhle nemůže fungovat, alespoň ne ten náš. Už delší dobu jsme pokukovali po jiném způsobu práce, po tzv. sprintech. Pozvolně jsme přešli na nový způsob práce, který jsme mj. drželi i na Portu. Každý z našich #friendsnotclients si může vybookovat primárně jen dny, ideálně řadu dní za sebou - tomu říkáme sprinty. U strategických spoluprací, jakými se živíme, je prostor na práci stěžejní. O světelné roky důležitější než rychlost. Možnost se vracet zpět je svatý grál. To nám umožňují sprinty.

Překryv jednotlivých sprintů

Sprinty zafungovaly i tady. Díky vyblokování vždy více dní vkuse (3-14 dní) jsme mohli pracovat podstatně intenzivněji a rychleji. Mohli jsme proto říct Radimovi s Martinem, že na appku máme prostor i přes velmi těsný deadline.

Mobilní aplikace - Co bude umět? Jaká bude její funkcionalita? Jaké potřeby má řešit?

Na začátku každého produktu či služby, vlastně i lidského bytí, by měla být otázka PROČ. Jakou potřebu jdeme řešit? Jakému účelu má náš produkt/služba sloužit? Co má lidem ulehčit?

Nejprve jsme se tedy pustili do poměrně důkladné analytické práce a do velké míry i ekonomického plánování, které ovlivnilo cenu designu i vývoje. Aplikace se rozdělila na fáze. V první fázi jsme chtěli dát klientům možnost se rychle podívat do Portu, z jejich kapsy a bez nutnosti jít přes webové rozhraní. Někteří můžete namítat, že dnes se už dají dělat webové aplikace, které se dokážou chovat skoro stejně jako mobilní aplikace. Potíž byla v tom, že klienti Portu a celá komunita poměrně silně volala po opravdu plnohodnotné mobilní appce. Navíc bylo ověřeno, že pro část person (hlavně těch nejmladších) to je tzv. deal breaker (rozhodující faktor).

První a druhá fáze měla umět:

Mobilní aplikace - Příležitost

Jednou z velkých příležitostí, které jsme spolu s mobilní aplikací chtěli vyřešit, byl investiční dotazník. Je to jakási vstupní brána do Portu, musíte jej vyplnit a netrvá to minutu. Bez toho vám ale Portu nemůže nabídnout řešení vám na míru, a dokonce to vyžaduje ČNB, jejíž obchodní licenci musí majitel Portu (WOOD & CO) vlastnit.

Hodně otázek hned na začátku, později i nahrávání dokladů totožnosti. Hodně křehké místo pro UX. Tady můžete excelovat nebo pohořet a výrazně to bude ovlivňovat příliv či odliv zákazníků. Rychlost vašeho růstu a finance.

Vstupní dotazník byl jak ve webové aplikaci, tak i v chystané mobilní aplikaci.

Mobilní aplikace - Investiční dotazník, úzké místo

Společně s týmem, který důkladně zná potřeby a výchozí pozice klientů, jsme redesignovali dotazník. Pečlivě jsme si rozkreslili všechny otázky a přemýšleli o způsobu, jak je zlepšit a jak usnadnit průchod při registraci.

Portu tým přišel s rozcestníkem, tedy s možností, kde si můžete vybrat, zda chcete položit pár doplňujících otázek, na základě kterých vám předvyplníme některé odpovědi, nebo zda chcete vyplnit dotazník bez pomoci, čili jako zkušenější člověk ve světě financí. Tuto myšlenku jsme dál rozpracovali a dotáhli.

Nad dotazníkem jsme iterovali dlouho. Tady je jeho výsledek.

Blížíme se k cíli

Navrhli jsme web, mobilní aplikaci a redesignovali webovou aplikaci. Mnoho hodin jsme s Portu strávili na mini workshopech a callech. Řadu dní jsme se potkávali i v nástroji mj. pro co-designování - Figmě, kde jsme společně rozpracovávali jednotlivé celky a objevovali slepé uličky, ze kterých jsme vyšli s jasnější představou, kam dál.

Z čeho jsme se poučili?

„Od začátku jsme s Remembership pracovali jako jeden tým s jasným cílem – převléct náš web do moderního a svěžího designu. To občas znamenalo přehazování si návrhů a diskutování o vhodném řešení, ale díky kreativitě, nápaditosti a trpělivosti Remembershipu jsme dokázali dílo dotáhnout do konce. Za to jim patří velké díky.“

Anna Kortusová, Portu

Představujeme výsledky

Celý projekt se nakonec rozrostl na větší rozměr, než jsme původně čekali. Výsledek ale myslím stojí za to.

Máme moderní stránky s bohatým ale dobře strukturovaným obsahem a řadou velmi inovativních prvků. A jsme rádi, že nás to odlišuje od konkurence. Vizuální styl se stal pro nás signifikantní a pro lidi dobře rozpoznatelný ať už se s ním sektají skrze různé kanály a formáty.

Diskuze během iteračního procesu redesignování webu byly často intenzivní, ale vždy jsme oceňovali, že se věci rychle hýbou a posouvají k lepšímu.

Reakce na web máme pozitivní - jak od klientů, tak celého týmu Portu. Osobně jsem rád, že se nenaplnily obavy, zda budou některé novátorské prvky pro lidi dobře stravitelné. Lidé se na webu dobře orientují a rozložení je srozumitelné.

Martin Luňáček, Portu