
Role: UX/UI Designer
Duration: 4 months
Final work: Veera Design System
Project Overview
Veera (short for “web framework” in Estonian) is a design system for national e-services, developed during the project including: 1) a Figma component library for designers, 2) HTML & CSS components for developers, and 3) documentation and guidelines for all users.
My Role as a Designer
The project consisted of 3 UX/UI Designers, 1 Accessibility Expert, 1 Content Designer, and 2 Developers. As a UX/UI Designer, I analyzed the existing components in use and mapped out inconstancies. After defining the improvement areas, I designed the Figma component library for designers and the documentation & guidelines for all users. The primary digital tool I used during the project was Figma.
Evolution of Veera
Launched in 2018, Veera aimed to standardize and improve the user experience of Estonian national e-services by reducing development time and cost. Initially, it was a PDF-based style guide derived from the e-Tax Board interface. By 2020, a pre-alpha version introduced Figma components and web-based documentation, but gaps in accessibility, consistency, and technical updates remained.
Veera 1.0.0: Refining the System
In 2023, Veera was formally structured with a focus on evolution over revolution. The key goals included providing ready-to-use Figma components, a well-defined dark mode, front-end agnostic HTML and CSS components, automated design-to-development handoff via Figma Design Tokens, accessibility compliance, guidelines for content and microcopy, and comprehensive documentation.
Design Process
Starting with a component inventory helped me map existing usage, leading to standardized component sizes of small, medium, and large. The color palette was streamlined to six colors with ten shades each. I then improved the accessibility compliance, and implemented a simplified dark mode solution using Figma Variables.
With 976 tokens, including 116 primitive and 851 semantic, Veera formalized design decisions, making integration with frameworks like React, Angular, and Vue seamless. Despite initial challenges in token management, using Figma Variables accelerated development handoff and improved workflow efficiency.
Future Directions
With the foundation set, the next phase of Veera will refine accessibility features, microcopy guidelines, Figma plugins, and front-end components. This structured approach ensures a scalable and user-centered design system for Estonia’s digital services.