Interaktivní prezentace výhod │ projekty Digital Vision

Klient a problém

Hypoteční banka: Jak představit Zelenou hypotéku a motivovat k šetrnému bydlení

Hypoteční banka za námi přišla po úspěchu stránky se Záškodníky, kterou jsme připravovali v roce 2017 pro Českou pojišťovnu, že by chtěli podobnou interaktivní formou představit svůj produkt Zelené hypotéky: úvěr s výhodami pro ty, kteří se rozhodnou bydlet ekologicky. A to ať už jde o stavbu nového domu nebo vylepšení stávajícího bydlení.

Nová microsite by měla ukazovat nejen výhody této hypotéky, ale i výhody “zeleného” bydlení jako takového. Tedy edukovat o možnostech, které šetří zároveň přírodu i vaši kapsu. A teď - jak sestavit stránku, kde se uživatelé neutopí v záplavě poučného textu a nákresů?

KLIENT A cíl

problém

Prakticky jsme ukázali, jaké systémy šetří přírodu i peníze

Pro získání výhodnější Zelené hypotéky musí projekt stavby nebo rekonstrukce splnit některé zásady ekologického bydlení. Zaměřili jsme se tedy na to, o jaké prvky domu jde, nad čím se zamyslet, když si vybíráte konkrétní řešení, a jakou dlouhodobou úsporu vám to může přinést.

Rozhodli jsme se web pojmout jako exkurzi, která uživatele provede šetrným domem a postupně mu ukáže vybrané technologie, principy a tipy, jak bydlet úsporněji. Navrhli jsme moderní dům v čistém stylu, s minimem prvků, aby při prohlídce nic nerušilo a udrželi jsme pozornost u elementů, o které nám jde. Základem je tedy vizuální zpracování, doplněné tlačítky s plusy, které si uživatel může rozkliknout, když si o daném prvku chce přečíst něco víc.

TECHNOLOGIE

Proč jsme nakonec na web nedali interaktivní 3D model?

Změny v domě se budou nejlépe ukazovat na 3D modelu, kde je všechno dobře vidět a dá se libovolně otáčet, naklápět, přibližovat a oddalovat. To bylo jasné od začátku. Když jsme ale začali testovat nasazení 3D na web, setkali jsme se s pár zádrhely. Hlavní problém bylo zobrazení na mobilu – model domu vyžadoval celkem vysoký výkon na vyrenderování a to dělalo některým telefonům problémy.

Abychom nemuseli dělat kompromisy v kvalitě obrazu, prohlídku 3D modelu jsme zpracovali jako video a na web nasadili to. To nám umožnilo vybrat si ideální úhly pohledu, rychlost otáčení, dalo nám to možnost libovolně zoomovat, nahlédnout pod střechu a vrátit se zpátky ven dle potřeby. Web tedy nakonec nabízí souvislou videoprohlídku virtuálního domu, rozdělenou na jednotlivé kroky, kde se vždy zastavíme a můžeme prozkoumat další detaily.

DESIGNOVÉ ŘEŠENÍ

Plynulá cesta webem bez rušivých elementů a slepých uliček

Na webu jsme se snažili o nerušivý minimalistický design, který nechá vyniknout vizualizaci domu. Zvolili jsme vzdušné bílé pozadí a prvky drželi v korporátních barvách Hypoteční banky - zelené a tmavě modré. Jednotlivé kroky animace se procházejí scrollováním nebo kliknutím na šipku dolů. I logo, tlačítko pro otevření menu a indikátor, na kterém kroku zrovna jste, jsou sladěné tak, aby nerušili.

Kromě samotného modelu pak pozornost poutají jen nadpisy, jakou oblast vylepšení zrovna ukazujeme, a kulatá tlačítka s plusy, která skrývají popisky jednotlivých prvků. Texty se zobrazují v bočním panelu, který vyjede a zakryje část domu. Kladli jsme ale důraz na to, aby z modelu byly stále vidět důležité části a hlavně další body, jejichž prozkoumáváním můžete pokračovat. (A to samozřejmě i při procházení na tabletu nebo na mobilu.)

Zásadní pro nás bylo vytvořit co nejplynulejší zážitek, kde si uživatel sám volí, o jaké části se chce dozvědět víc, ale i bez rozkliknutí a pročítání textů se základní informace dozví z vizuálu a nadpisů jednotlivých kroků. Při očekávaném průchodu webem se uživateli ukáže souvislá animace s exkurzí domu. Když si volí jednotlivé kroky na přeskáčku nebo se vrací, přechody jsou řešené stmíváním a prolínáním, aby nebyla “zpětná” animace matoucí a zbytečně nebrala další data.

výsledek

Výsledek? Názorně a atraktivně představený koncept a produkt

Hotová mikrostránka názorně ukazuje a vysvětluje hlavní principy šetrného bydlení. Mluví také o úsporách, které zelené bydlení přináší, a motivuje se do projektu skutečně pustit. Uživatel se leccos dozví, inspiruje se a na závěr jsou mu předloženy výhody Zelené hypotéky a může zadat svůj e-mail nebo telefon nechat si nezávazně poradit s konkrétním projektem a jak ho co nejvýhodněji financovat.

Web je určen nejen koncovým zákazníkům, ale i finančním poradcům Hypoteční banky, kteří teď mají po ruce materiál, se kterým si sami můžou osvěžit znalosti o Zelené hypotéce, nebo ho využít jako multimediální prezentaci při konzultaci se zákazníkem.

Stránka získala 2. místo v kategorii microsite roku 2019 v soutěži WEB TOP 100.

Zelená hypotéka