UI Team ⸱ April 2025 An introduction to A functional approach to transforming Government Digital Services 

UI team/ Goals & motivation Create easy-to-use web services using automated systems and modular libraries 

Devs team/ The R&D way Create a Proof of Concept Create Prototypes Standardise Automate 

~80% code Abstraction & Automation using metaprogramming techniques 

No content

Expanding the focus to millions of users • GOV.GR Portal • Dilosi (eg. digital certi fi cates like solemn declaration, driving license, EU COVID vaccination certi fi cate) • Static web pages (eg. https:// metafraseis.services.gov.gr/) • react-native mobile apps (mobile apps & digital wallets, Work In Progress) • Few external contractors Enter the GOV.GR era 

No content

380 services deployed the last fi ve years ~ 1 service delivered every week 

20+ static websites delivered in a matter of hours 

No content

No content

No content

No content

Our tech stack 

Digigov CSS The o ff i cial, open-source CSS library for gov.gr • Available as NPM called @digigov/css • Shameless copy of GOV.UK Design System • Provide HTML code snippets • Provide a de fi nitive documentation • Modernise few aspects of the design language, fi t gov.gr brand identity • Support both traditional and modern pipelines (NPM, postcss, tailwindcss, dist fi les, downloadable examples) The O ff i cial GOV.GR Storybook 

Digigov UI React.js components with state and functionality • Available as NPM called @digigov/ui • Uses @digigov/react-core module, Web Components without state • Uses @digigov/react-icons, contains only the most essential icons • Packages everything you need to build a React app 

Digigov Form Getting data from users using forms and multi-page questionnaires • Available as NPM called @digigov/form • Derived from Dilosi & other codebases • React-based library • Input Validation mechanism built-in • Controlled with a JSON spec API 

UX Consistency & Accessibility Designing mobile- fi rst • Device usage stats (2020: 60% mobile users, 2024: 70% mobile users) • Accessibility tools: storybook addon-a11y, browser extensions, manual testing • CSS variables for design tokens (eg spacing, thickness, font-size, etc using in theme customization) • Basic color palette (generate full colors based on contrast ratios - leonardo), support also dark theme • We ensure the consistency through visual regression testing and minimal intervention in the metadata (plug and play) 

Collaboration opportunities How can we bene fi t from other EU design systems • Since we don’t do our own user testing yet, we could bene fi t from lessons learned and best practices from our partners • How we construct and de fi ne complex UX patterns from components? • We want to support solutions for gov.gr but also to develop more generic tools for many more use-cases • Expanding the current design system and use it for more generic use-cases 

Thank you! • [email protected] • www.linkedin.com/in/tsironis Stay in touch Download this presentation!