Zpět na projekty

Státní správa / výzkum a inovace

TA ČR: Návrh systému eGovernment pro tři skupiny uživatelů

SISTA je eGovernment portál Technologické agentury ČR s desítkami administrativních procesů od registrace po hodnocení projektů. Navrhla jsem pro něj UX proces a design systém, který zůstává srozumitelný i lidem s velmi rozdílnými zkušenostmi.

TA ČR — Design Process

Na první pohled

Výzva

Tři skupiny uživatelů sdílely jeden systém s desítkami komplexních procesů, obrazovky byly přehlcené a lidé bez technického backgroundu nevěděli, kde jsou a co dál.

Co jsem dělala

Udělala jsem UX audit podle Nielsenových heuristik, přestavěla informační architekturu a hlavní flow, propojila analytiku Matomo a Sentry a postavila DISTA UI Kit ve Storybooku.

Výsledek

Personalizovaný onboarding podle typu uživatele, přehlednější hodnocení v kartách a jednotný DISTA UI Kit, díky kterému se nové funkce dodávají o polovinu rychleji.

Klient

Technologická agentura ČR

Role

UX/UI designérka, design systém

Rok

05/2025 – dosud

Nástroje

Figma, Storybook, Chromatic, Matomo, Sentry

TA ČR — Design Process — ukázka

V číslech

3

skupiny uživatelů v jednom systému s desítkami procesů

Matomo + Sentry

zjednodušení dohledatelnosti problémů díky propojení přes Session ID

3 → 1

Storybook, Figma a produkce v jednom zdroji pro rychlejší doručení

Výchozí situace

Nastoupila jsem do systému, který rostl roky podle technických požadavků, ne podle toho, jak s ním lidé skutečně pracují. Měla jsem na starosti UX i design systém pro tři skupiny uživatelů najednou, ve spolupráci s Digitální a informační agenturou.

Jak jsem postupovala

Začala jsem analýzou dokumentace a UX auditem podle Nielsenových heuristik. Pak jsem přestavěla informační architekturu a hlavní flow. Matomo a Sentry jsme propojili přes session ID, takže u každého problému vidíme, co uživatel dělal a kde systém selhal. Vše stojí na DISTA UI Kitu.

Validace

Výzkum v rámci spolupráce vedla Digitální a informační agentura (DIA). Ve společné spolupráci jsme na jeho základě definovali konkrétní problémy na straně uživatelů, které se staly podkladem pro další designová rozhodnutí.

Proces

Klíčová rozhodnutí

U každého: jaký byl problém, co jsem navrhla a proč právě tohle.

01

Personalizovaný onboarding a kontextová nápověda

Problém: Nováčci i zkušení uživatelé dostávali stejnou úvodní obrazovku. Jedni se ztráceli, druzí se proklikávali zbytečnými kroky. Uživatelé nevěděli, kde v procesu jsou a co se od nich čeká.

Řešení: Navrátilci vidí rychlé akce k rozpracovaným věcem, nováčci krátký videonávod a jasný první krok. Dashboard s kontextovou nápovědou přímo u kroků a sidebar, který se mění podle fáze procesu.

Proč: Každá skupina potřebuje na začátku něco jiného. Jedna obrazovka pro všechny nefunguje ani jedné z nich. Nápověda má být tam, kde vzniká otázka. Ne v PDF manuálu.

Portál SISTA — správa a odesílání hromadných notifikací
02

Čitelná data a hodnocení v kartách

Problém: Výsledky hodnocení byly v dlouhých tabulkách. Porovnat dva projekty znamenalo skákat mezi obrazovkami.

Řešení: Reporting hodnocení jsem převedla do karet, které jdou porovnat vedle sebe. Data mají jasnou hierarchii.

Proč: Hodnotitel rozhoduje porovnáním. Když má obojí před sebou, rozhodne rychleji a s menší chybou.

Analytický dashboard s přehledem návštěvnosti portálu SISTA
03

DISTA UI Kit ve Storybooku

Problém: Každá nová obrazovka vznikala od nuly, vývoj byl pomalý a rozhraní nejednotné.

Řešení: Postavila jsem DISTA UI Kit s tokeny a komponentami ve Figmě, propojený se Storybookem pro vývojáře.

Proč: Jeden zdroj pravdy pro design i kód. Nové funkce se skládají z hotových komponent a design patternů, takže se dodávají o polovinu rychleji než v předchozích sprintech. Zadání je pro vývojáře lépe popsané a vědí, jak mají postupovat.

Barevné proměnné pro light a dark mode design systému DISTA
TA ČR — Design Process — screenshoty

Výsledky

Spolupráce přinesla UX proces, který spojuje uživatelské potřeby, behaviorální a technická data, design systém a monitoring produkce. Konkrétní problémy lze sledovat od prvního zjištění přes návrh až po jejich chování v reálném provozu.

Dopad na počet ticketů na podpoře a chybovost se po postupném nasazování systému aktuálně vyhodnocuje.

Galerie

Další obrazovky

Workshopy, flow a design systém – jak vypadá práce na systému, který používají tisíce lidí.

Celý projekt na Behance
Workshop s prezentací person a empathy mapy pro tým TA ČR
Workshop · persony a empatická mapa
Analytický dashboard s přehledem návštěvnosti portálu SISTA
Analytický dashboard
Figma flow mapa registrace experta do portálu SISTA
Flow · registrace experta
Přehled Figma souborů design systému DISTA/GOV UI kit
DISTA/GOV UI kit · soubory
Portál SISTA — správa a odesílání hromadných notifikací
Hromadné notifikace
Barevné proměnné pro light a dark mode design systému DISTA
Barevné proměnné · light/dark
Komponenta Option List v light a dark módu design systému
Komponenta · světlý a tmavý režim
Dokumentace barevné palety DISTA UI kitu ve Storybooku
Storybook · barevná paleta
“Po celou dobu spolupráce máme pravidelné konzultace, během kterých společně řešíme nejen konkrétní postupy a problémy, ale i nové funkce Figmy, čím dál častěji s nástupem AI. Na Kristýně si cením její pečlivosti a přehledu, vývoj v této oblasti aktivně sleduje a je znát, že ji práce opravdu baví.”

Anna Marie Neugebauerová

Business analytik, TA ČR

Použité služby

Podobné výzvy řeším i jako samostatnou službu

Pojďme probrat váš projekt

Domluvit si konzultaci

E-mail · nogolovakristyna@gmail.com