Loading...
VIGo je design systém, který vznikl pro pojišťovy Vienna Insurance Group. Jeho příběh začal na začátku roku 2023 a už o rok později spatřila světlo světa první verze, nasazená do provozu. Vznikal za chodu společně s postupem projektu Neuron, který sjednocuje backoffice pojišťovny Kooperativa a ČPP. Aktuálně je VIGo využíván i pro backoffice aplikace Kooperativy a ČPP, Global Expert a začínáme i některé klientské aplikace.
Stojí na technologii React a využívá custom framework postavený na Prime React, což mu dává pružnost i stabilitu. Aktuálně disponuje 7 tématy, která obsluhují 5 významných projektů v Kooperativě a ČPP. Díky tomu není jen "souborem komponent", ale skutečnou páteří konzistence a efektivity napříč digitálními produkty.
Všichni, kteří se podíleli a stále podílí na tvorbě design systemu. Tým UX/UI designu a externisté Neuronu.
Pro tvorbu design systemu, komponent i základních mockupů používáme neutrální barevné schéma a neutrální styly a typografii. Aplikace se potom navrhují v konkrétním grafickém stylu pojišťovny, který umožňuje kvalitní prezentaci návrhů.
Design system obsahuje 124 komponent, které mají vlastnosti definované pomocí více než 2000 design variables. 60 komponent je hlavních, ostatní menší, pomocné. Komponenty v jednotlivých návrzích ve Figmě mají přes 400 000 instancí a vkládají se i 20 000 za týden.
Design system VIGo slouží primárně k tomu, aby zrychlil a usnadnil vývoj frontendu (uživatelského rozhraní). Zajišťuje naprostou konzistenci mezi tím, co designéři navrhnou ve Figmě (a co schvaluje business), a tím, co se následně reálně objeví v produkci před uživatelem. Naším hlavním cílem je předcházet tomu, aby se stejné věci tvořily pokaždé znovu. Udržujeme tak pořádek napříč celým řešením – od základních stavebních kamenů jako jsou design tokeny a sémantika, přes elementární komponenty, až po pokročilé Patterny a Composity pro aplikace fungující na React frameworku Neuron.
Jakýkoliv nový požadavek od businessu nebo uživatelů se nejdříve nakreslí a otestuje na úrovni komponenty ve Figmě. Teprve po odladění putuje zadání do vývoje a odtud do produkce. Reálnou, nakódovanou podobu všech VIGo komponent pak vždy najdete katalogizovanou ve Storybooku.
Podrobnější vysvětlení, jakou roli hraje VIGo v celém procesu (od prvotního návrhu přes prototyp až po vývoj frontendu), najdete na následujících stránkách:
Díky kompletní systematičnosti VIGa Aktuálně úspěšně pracujeme na dvou hlavních využití design systemu umělou inteligencí: