Close Cookie Preference Manager
Napekli jsme vám sušenky
Stejně jako naši sladkomilní kolegové, i náš web potřebuje po(u)žívat cookies. Dáte nám k tomu svůj souhlas? COOKIES
Nezbytné (Vždy aktivní)
Základní technické cookies, které zajišťují, že se web zobrazuje a funguje, jak má. A třeba i to, že se správně odesílají kontaktní formuláře. Tyto cookies není možné vypnout.
Made by Flinch 77
Oops! Something went wrong while submitting the form.
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í.
Projects moodboard
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ů?
Vizualizace
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.
WireframeProjects homepage
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.
Modal examplesubpage example
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ýsledky
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. A z původní domény myslimezelene.cz se pak s drobnými změnami ze strany Hypoteční banky přesunula na adresu myslimezelene.hypotecnibanka.cz.

Zajímá vás spíš něco jiného?
Co třeba tohle?

Projekty

Kariéra

Kontakt

2022 All rights reserved Digital Vision