Finanční skupina Progresus Invest Holding podniká ve třech hlavních oblastech:
Každý segment i firma mají jiné zaměření a specifickou cílovou skupinu. Progresus navíc plánuje další akvizice firem, které sdílejí podobnou filozofii, ale jejich zaměření může být úplně jiné. Do skupiny například přidává Seves Glass Block a do budoucna pravděpodobně přibudou další.
Naší výzvou proto bylo obsáhnout různorodé projekty na jednom webu a zaujmout různé cílové skupiny:
Hlavním cílem webu bylo důvěryhodně představit skupinu Progresus a všechny oblasti, kterým se věnuje. Zároveň měl budovat kredibilitu nově vznikající společnosti a získat důvěru potenciálních investorů.
Na základě cílových skupin jsme spolu s klientem zmapovali customer journey a vytvořili sitemapu i wireframy webu. Textový obsah připravil klient.
60 až 70 % přístupů k internetu dnes přichází z mobilních telefonů, proto jsme vsadili na app-first přístup. Mobilní web tak využívá prvky a patterny známé z aplikací. Místo klasického hamburger menu jsme vytvořili spodní navigaci a použili interakce typu bottom sheet, při kterých překryvné prvky vyjíždějí zespodu.
Důležitým krokem bylo také společné vytvoření takzvaných Design Suggestions našimi brandovými, produktovými a UI designéry. Jde o návrh řešení každé části webu ještě předtím, než začneme tvořit samotné obrazovky.
Klient tak od začátku věděl, jak o webu přemýšlíme, a mohl s námi aktivně konzultovat jednotlivé sekce a prvky. Znal celou genezi návrhu, a proto téměř všechny další kroky schvaloval „na první dobrou“.
Díky Design Suggestions a spolupráci designérů s různým zaměřením vznikly nápady, které by jinak možná nevznikly. Každý, kdo na webu pracoval, navíc přesně věděl, kdy po čem sáhnout. A když se do projektu zapojil někdo další, dokázali jsme ho mnohem rychleji onboardovat. Design Suggestions nám také pomohly udržet jednotnou vizuální linku napříč celým webem.
Přestože je Progresus investiční společností, chtěli jsme, aby na první pohled zaujal nejen stabilitou a spolehlivostí, ale taky mladistvou a přátelskou energií. Tyto atributy jsme otiskli do minimalistického designu. Výraznou typografii a autentické fotografie jsme se rozhodli doplnit o kreslené skici a grafické elementy vycházející ze symbolu šipek z logotypu Progresus.
Vyšli jsme z brandových barev definovaných grafickým manuálem Progresusu a nově jsme definovali paletu šedých odstínů se zemitým nádechem. Ty jsme použili v podkladových plochách a pro drobné UI elementy.
Vytvořili jsme různé tvary unikátní pro Progresus. Jeden z nich vychází ze spojení brandového elementu Progresus — tří šipek. Nově z něj vznikají například uvozovky nebo rámeček, který se může responzivně měnit.
Oblé zakončení odkazuje na organické tvary a přírodní materiály, se kterými pracují firmy skupiny Progresus — ať už RD Rýmařov, která vyrábí a realizuje dřevostavby, nebo Mykilio, které vyvíjí materiály z houbového mycelia.
Vytvořili jsme guidelines pro fotografy, ve kterých jsme stanovili, jak fotit portréty, skupinové snímky i lidi při práci.
U portrétů pracujeme s hloubkou ostrosti, dynamickým přirozeným světlem a čistým minimalistickým prostředím. Aby fotografie působily co nejpřirozeněji, lidé se nemusejí vždy dívat přímo do objektivu.
V sekci real estate a industriální development používáme vizualizace a letecké pohledy. Do budoucna chceme v co největší míře ukazovat hotové realizace. Důležitým prvkem pro prezentaci developerských projektů a jejich proměn je interaktivní slider s fotografiemi před a po.
V divizi zaměřené na výrobu jsme zvolili close-upy, přírodní zemité barvy a práci s hloubkou ostrosti, abychom co nejlépe představili řemeslnou práci.
V části věnované ESG přístupu pracujeme s detaily, texturami, lidským prvkem bez obličejů a dětmi, které symbolizují příští generace. To všechno doplňuje 3D zeměkoule reagující na interakce uživatele.
Elegantní animace obohacují web o dynamickou interakci a podporují storytelling. Animované efekty, které reagují na uživatelův pohyb po stránce, navozují pocit dialogu mezi webem a jeho návštěvníkem. Zároveň návštěvníkovi pomáhají udržet pozornost.
Na začátku každého projektu stojí myšlenka, koncept nebo skica. Progresus neustále tvoří něco nového, proto jsme chtěli tento motiv propsat i do webu jako vizuální doplněk.
Ilustrace jsme se rozhodli tvořit pomocí umělé inteligence kvůli úspoře nákladů, rychlosti a dlouhodobé konzistenci. Jak jsme postupovali?
Po schválení vizuálního zpracování vzorových stránek jsme navrhli všechny unikátní stránky a sjednotili je design systémem. Ten pracuje s opakovaně použitelnými komponentovými vrstvami a kodifikuje všechny barvy, fonty, rozestupy i další prvky. Při dlouhodobém rozvoji webu tak pomáhá udržet konzistenci a zároveň lze jeho principy využít i pro další digitální touchpointy.
Technické řešení jsme postavili na vlastním dev stacku a napojili ho na vybrané systémy třetích stran, se kterými máme dlouhodobé zkušenosti.
Prezentační vrstvu webu jsme připravili kompletně v TypeScriptu a aktuální verzi frameworku Next.js. Web generujeme staticky a při změně dat ho na pozadí revalidujeme. Díky tomu je rychlý a šlape jako hodinky. Dev stack nám pomáhá také dosahovat dobrých hodnot Core Web Vitals. Pro stylování jsme použili framework Tailwind CSS. Web s CMS komunikuje přes GraphQL API, které nám umožňuje stahovat jen data, která v danou chvíli skutečně potřebujeme, a minimalizovat tak datový přenos.
Už v první fázi projektu jsme vybrali redakční systém (dále jen CMS) pro správu obsahu. Zvolili jsme osvědčený headless CMS Strapi, se kterým se klientovi příjemně pracuje. Umožňuje mu pravidelně a pohodlně vytvářet nový obsah, všechno předem kontrolovat v preview módu a spravovat web více uživateli současně.
CMS je navíc dobře připravené pro potřeby SEO. Je open source, takže ho můžeme podle potřeby přizpůsobovat požadavkům klienta.
S CMS jsme propojili už zmíněný patrový design systém. Klient si tak může bez pomoci vývojáře skládat další stránky a podstránky podle potřeby. Vytvořili jsme 43 custom sekcí, které lze libovolně sestavovat a kombinovat.
Klient může jednotlivé stránky také zamknout a nastavit k nim přístup konkrétním uživatelům nebo skupinám. Týká se to například sekce Portál investora, kde má klient všechny své investice i jejich vývoj přehledně na jednom místě.
Když jsme řešili úložiště médií, sáhli jsme po osvědčené platformě Cloudinary. Umožňuje nám efektivně pracovat s obrázky a videi, optimalizovat je, používat next-gen formáty a zobrazovat je ve vysoké kvalitě při co nejmenší datové velikosti.
Pro hosting jsme zvolili DigitalOcean, který dokáže stránky rychle doručovat odkudkoli. V kombinaci s Next.js, globální Cloudflare CDN a principem stale-while-revalidate je web rychle dostupný po celém světě.
Pro správu souhlasu s cookies jsme použili Cookiebot. Statistiky sledujeme přes Google Tag Manager a Google Analytics 4. Nastavili jsme základní metriky i měření formulářů.
Za zmínku stojí také navigace. Klient v ní může definovat akční tlačítka, která zůstávají viditelná při scrollování a na telefonu připomínají Dynamic Island z iPhonu.
Zobrazení na větších displejích není jen mechanickým převedením mobilního designu. Pro každý typ zařízení jsme vytvořili samostatný návrh s ohledem na prvky a patterny, které se na něm běžně používají. Web se tak správně zobrazuje a funguje na všem od malých mobilů přes tablety a notebooky až po velké stolní monitory.
Na začátku projektu jsme podle typu zařízení i operačního systému definovali nejpoužívanější prohlížeče. Na Windows, macOS, Androidu i iOS jsme web testovali a optimalizovali.
Rychlé načítání zajišťuje kombinace našeho dev stacku, frameworku Next.js, platformy Cloudflare a statického generování stránek.
Aby se klientovi s webem pracovalo co nejsnáze, připravili jsme návod a doporučení pro zpracování a nahrávání vizuálů i fotografií. K dispozici má také videomanuál pro práci s CMS Strapi.
Once every 14 days — always on a Thursday — we drop a hit of raw thinking for tech founders, CEOs, and CMOs who know that marketing in this segment needs to be done differently. No fluff. No spam. Just the stuff worth reading.
