Jaká je SYMBIO secret sauce, která pomohla Kenticu?

Kentico je špičková globální technologická firma z Česka. Od konkurence se mimo jiné odlišuje až fanatickým důrazem na uživatelskou zkušenost. A v tom si rozumíme. Význam UX a UI u digitálních produktů je známá věc, přesto řada tech společností tuto oblast podceňuje. Jaký je náš recept?

Jaká je SYMBIO secret sauce,  která pomohla Kenticu?

Zkušenosti, nadhled & trendy

Začněme výstupem. Během let 2019 až 2022 jsme Kenticu navrhovali nový prodejní web a UX, UI a Design system pro dva SaaS produkty. Díky naší expertize jsme nad řešením přemýšleli jinak než designéři z Kentica, kteří se soustředí především na vývoj a design produktu. To je přirozené a do značné míry nevyhnutelné. Klient proto ocenil, že jsme do jeho produktu přinesli pohled designérů zvenku, kteří mají zkušenost s podobným typem práce pro jiné technologické společnosti.

Během krátké doby jsme tak vytvořili kreativní koncept a design, do kterého jsme promítli nejnovější trendy UI a interakčního designu. Začínali jsme prodejním webem, kde jsme pomocí videa a interaktivních pater pomáhali představit nový SaaS produkt. Jak správně uživatele provést složitým SaaS produktem jsme řešili návodným rozcestníkovým dashboardem s widgetovým systémem.

Spoustu úsilí a hledání best practises jsme věnovali částí pro kolaborativní tvorbu a úpravu obsahu. Velkou výzvou bylo také najít nejlepší možné interakční řešení pro pagebuilder, díky kterému z předem připravených pater a widgetů bez potřeby vývojářů sestavujete jednotlivé stránky. To by Kentico týmu z důvodu jeho zaměření i volných kapacit trvalo mnohem déle. Během celého projektu jsme úzce spolupracovali s UX a UI týmem Kentica, což výslednému řešení velmi pomohlo.

Od redesignu webu ke změně digitálního produktu

Původně šlo o jednorázovou zakázku – jednoduchý redesign webové prezentace pro jeden ze stěžejních produktů značky, headless CMS Kentico Kontent. Společně s klientem jsme odlaďovali moodboardy, následně jsme přišli se třemi různými koncepty, takže klient byl během celého projektu v obraze. Vytvořili jsme několik low fidelity wireframů a nový web včetně vizuálního stylu. Výsledek Kentico nadchl natolik, že jeho prvky začalo používat jako nosný prvek komunikace celé značky.

V rámci spolupráce jsme zpracovali nový vizuální styl, uživatelské rozhraní, animované infografiky a hero video, ve kterém jsme nový produkt představili. Díky komplexnímu UI kitu, který jsme vytvořili, se Kenticu podařilo sjednotit vizuální linku napříč všemi touchpointy. Právě konzistence je z hlediska budování brand identity naprosto zásadní.

💬
“Se SYMBIEM jsem pracoval na konceptu změny uživatelského rozhraní pro naše produkty, během jednoho roku jsme vytvořili robustní design system jak pro naše Kentico Kontent, tak Kentico Xperience. Na SYMBIU oceňuji konceptuální přístup k UI, cit pro uživatele a zároveň fokus na detail.“Tadeáš KubátVP User Experience, Kentico Software

Vytvořili jsme unikátní vizuální jazyk a celý design system

Na základě pilotního projektu jsme získali důvěru klienta a plácli si i na mnohem složitější zadání. Tím byla produktová vize UX a UI webové aplikace CMS Kentico Kontent.

Zadání znělo jako ze snu každého designéra: Potřebujeme kompletní redesign našeho produktu a necháváme vám volné ruce. Během půl roku intenzivních sprintů prošly rukama čtyř našich designérů stovky dílčích komponentů. Výsledkem byl nový komplexní design systém celé aplikace.

Jak jsme k produktové vizi CMS Kentico Kontent přistoupili

První částí projektu byl uplift UX a interakčního designu. Začali jsme rešerší produktů Kentica a přímé i nepřímé konkurence. Snažili jsme se pochopit a co nejlépe navnímat, jak nad uživatelským rozhraním jednotlivé produktové týmy přemýšlí.

Vybírali jsme ty nejzajímavější patterny a ověřovali je rychlými uživatelskými testováním. Mezi takové patterny patřily například fullscreen řešení interačních prvků, uživatelské dashboardy s widgetovým systémem, sidebar megamenu navigace, interaktivní dokumenty pro kolaborativní tvorbu obsahu a taky pagebuildery pro no-code editaci a přípravu nových stránek.

Tyto patterny nám posloužily jako základ, který jsme funkčně posouvali a částečně postavili úplně znovu. Díky tomu, že nejsme zatížení bias interních týmů, jsme si mohli dovolit přemýšlet naprosto nezávisle. Z Design Studií, které v SYMBIU nazýváme Design Workshopy, vzešla spousta zajímavých interakčních řešení. Ty jsme spolu s Kenticem ve formě High-fidelity prototypů ověřovali na reálných uživatelích s velmi pozitivním ohlasem.

Druhou částí byla vize a příprava nadčasového vizuálního zpracování. Cílem bylo samozřejmě co nejvíce produkty odlišit od konkurence a dodat jim jednotný a moderní vzhled. Proces stál na přípravě multi-variantových moodboardů a navázaných feedbackových iterací s klientem. Naše rozhodnutí jsme si ověřovali uživatelským průzkumem. Vyhrálo minimalistické uživatelské rozhraní s promyšleným elevačním systémem a kontrastními CTA. Za zmínku stojí rozsáhlé barevné palety, které jsme kvůli maximální přístupnosti vylaďovali do posledního odstínu.

Delivery celé vizuální proměny jsme docílili pomocí robustního Design systému, který pomocí foundations, tokenů a kvalitně zdokumentovaných komponent umožní nasazení do celé aplikace i bez zdlouhavého kreslení každé obrazovky. Propracovaný Design systém také umožnil hladké předání na interní produktové a vývojové týmy.

💡
TIP„Největší přínosem je na náš design proces zaměřený na tvorbu konceptů. Dá se aplikovat prakticky na jakýkoliv problém, který díky němu dokážeme velmi rychle navnímat a řešit. Skládá se z několika kroků rešerší, sběru dat, navrhování a následného testování. Ve zkratce si projdeme veškeré již existující řešení problému a ty rozebereme do posledního atomu.Navnímáme best practises a z nich složíme nové, námi navržené řešení které následně testujeme. Bias designérů eliminujeme pomocí Design studií – speciálních týmových workshopů. Interním týmům tyto výstupy poslouží jako inspirativní pohled zvenčí, nebo plnohodnotný základ nového řešení.“Jiří KadlčíkDigital touchpoints specialist, SYMBIO

UX a UI jako konkurenční výhoda

Nejlepší vizitka projektu je, když se s klientem pustíte rovnou do dalšího. Jako další úkol nás čekal redesign CMS Kentico Xperience, kde jsme stejným způsobem navrhovali uplift vizuálního a interakčního konceptu, ale tady už od strategicko-analytické fáze. Cíl byl stejný jako v případě předchozího projektu – posouvat hranice UI a interakcí CMS Kentica tak, aby byly daleko před ostatními hráči na globálním trhu.

UX a UI totiž představuje jeden z nástrojů, jak si ve stále se zrychlujícím konkurenčním prostředí udržovat náskok. A to v globálním měřítku. Dotaženost v těchto oblastech hraje obrovskou roli pro snižování churn rate i CAC a maximalizaci retence. Pokud řešíte v rámci UX a UI stále znovu například jak mít intuitivní onboarding jako Webflow nebo opravdu funkční universal Search jako v Monday.com, tak víte přesně, o čem mluvíme.

Proč zapojovat agenturní tým specializovaný na tech společnosti?

Práce na SaaS projektech mají svá specifika sahající od tvorby strategicko-kreativních konceptů přes napojení na Product Marketing až po měření a možnosti škálování UX a UI výstupů. V SYMBIU máme podobných projektů za sebou už celou řadu. Navíc všechny zmíněné oblasti zastřešuje náš Marketing Design System, o kterém si můžeme přečíst zde.

Díky tomu si všímáme opakujících se patternů, které jsou pro zakladatele i celé týmy na straně tech companies těžko identifikovatelné. A to nejen pro ně. Těžko dosažitelné jsou i pro univerzální designéry z generických agentur, kteří pracují na široké škále typu klientů, a tím pádem nemají možnost vidět opakující se problémy, kterým se svými produkty a touchpointy čelí technologické společnosti.