Leadhub: digitální rebranding webu a aplikace s vlastním design systémem
O projektu
- Sjednocení značky napříč webem a produktem
- Vizuální odlišení v konkurenčně přesyceném prostředí
- Modernizace a zlepšení použitelnosti aplikace
Leadhub potřeboval posílit své postavení na trhu a jasně se vymezit vůči konkurenci, která se vizuálně pohybuje převážně v zelených tónech. Cílem bylo vytvořit ucelenou webovou prezentaci, která dostatečně představí Leadhub a jeho funkcionality, ukáže referenční projekty a úspěchy značky – a zároveň zmodernizovat UI samotné aplikace a zlepšit její použitelnost.
Vedle webu a produktu jsme připravili i základní manuál pro nejběžněji používané materiály.
Businessové výzvy a řešení
- Zlepšit postavení značky Leadhub na trhu
- Odlišit značku od konkurence (často v zelených tónech)
- Prezentovat funkcionality, reference a úspěchy v jedné ucelené prezentaci
Leadhub se pohybuje na trhu, kde se konkurence vizuálně podobá a často sdílí podobnou barevnost.
Bylo potřeba najít vlastní vizuální směr, který značku odliší, a zároveň vytvořit web, který srozumitelně odprezentuje produkt, jeho funkce i reálné výsledky a reference na jednom místě.
Designové výzvy a řešení
- Definovat vizuální směr odlišný od „zeleného“ standardu oboru
- Sjednotit vizuální jazyk webu a aplikace
- Zlepšit použitelnost a zmodernizovat UI produktu
Klíčem bylo najít a odsouhlasit vizuální směr – proto jsme začali art directionem a moodboardingem a clusterováním možných směrů. Na něm jsme postavili UX webu (informační architektura, wireframes) a následně UI vč. mikrointerakcí.
U aplikace jsme se soustředili na modernizaci UI a lepší použitelnost, navrhli jsme základní nastavení vizuálního stylu a klíčové obrazovky. Aby web i produkt mluvily stejným jazykem, vznikl jeden design systém pokrývající obojí.
Development / Custom Tech výzvy a řešení
- Vývoj realizoval interní tým Leadhubu
Implementaci webu i aplikace si zajišťoval Leadhub vlastními silami.
Naše role byla na straně UX, UI, vizuálního směru a design systému – návrhy a komponenty jsme proto připravovali tak, aby je interní tým mohl přímo převzít a rozvíjet.
Jak jsme postupovali
Projekt jsme vedli jako úzkou spolupráci s týmem Leadhubu – od společných workshopů, přes iterace vizuálního směru, až po ladění detailů. Design systém vznikal tak, aby sloužil webu i aplikaci a navazoval na něj interní vývoj Leadhubu.
- UX workshopy – definice cílů webu a informační architektury
- Art direction a moodboarding – definice vizuálního směru a clusterování variant
- UX design / wireframes webu
Navrhli jsme základní vizuální styl aplikace, klíčových obrazovek a design systému. Během vytváření probíhal nespočet společných schůzek s klientem, workshopy a ladění detailů vč. grafického designu dílčích elementů.
Klíčové části řešení
- Ucelená webová prezentace s funkcionalitami, referencemi a úspěchy Leadhubu
- Vizuální směr odlišující značku od konkurence
- UI aplikace s lepší použitelností a moderním vzhledem (klíčové obrazovky)
„Hero momentem“ je sjednocení dvou světů – webu a aplikace – pod jeden vizuální jazyk a design systém, doplněné o mikrointerakce a grafické zpracování dílčích elementů, které značce dodávají charakter.
Design systém byl sdílený mezi webem a produktem.
