Introduction to Digigov SDK

This is the presentation for for the “Introduction to EU Design Systems“ session in the User Needs First International Conference 2025.

Transcript

1. UI Team ⸱ April 2025 An introduction to A functional approach to transforming Government Digital Services
2. UI team/ Goals & motivation Create easy-to-use web services using automated systems and modular libraries
3. Devs team/ The R&D way Create a Proof of Concept Create Prototypes Standardise Automate
4. ~80% code Abstraction & Automation using metaprogramming techniques
6. 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
8. 380 services deployed the last fi ve years ~ 1 service delivered every week
9. 20+ static websites delivered in a matter of hours
14. Our tech stack
15. 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
16. 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
17. 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
18. 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)
19. 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
20. Thank you! • webapps@lists.grnet.gr • www.linkedin.com/in/tsironis Stay in touch Download this presentation!