Actiris had several web applications for citizens, companies, partners and internal agents. My role was to structure a Design System to harmonise these interfaces, improve their accessibility and create a shared language between design, product and development.
The Design System had to support several digital products, with different audiences, journeys and business constraints. The challenge was therefore not only visual: components had to become more consistent, more robust and easier for teams to reuse.
The mission combined an audit of the existing interfaces, component prioritisation, UX improvements, accessibility checks, user testing with a visually impaired person, creation of a Figma library and support for developers on the Storybook library.
Skills involved
The first step was to inventory the components used in Actiris applications, then identify those that were recurring, critical for the user experience or complex enough to require dedicated documentation.
Mapping existing components, grouping similar uses and selecting the patterns to integrate into the Design System.
Review of behaviours, labels, states, variants and usage rules against common UX standards.
Contrasts, sizes, click areas, focus states, error states, ARIA labels and use with a braille display and screen reader were checked.
Each component was treated as a decision object: what it is for, when to use it, which variants are needed, which states must exist and which rules ensure its accessibility.
List the components used in the applications, spot duplicates, implicit variants and inconsistencies between screens.
Select recurring, structural or usage-sensitive components to focus effort where it creates the most consistency.
Compare each component with expected interface conventions: readability, affordance, states, feedback, hierarchy and cognitive load.
Check contrasts, text sizes, interactive areas, visible focus, accessible labels, error states and keyboard behaviour.
Observe application use with a braille display and screen reader to understand non-visual journeys and identify required improvements.
Formalise components, variants, tokens, usage rules and validation criteria in materials usable by designers and developers.
The work was not limited to producing screens. It resulted in a documented, shareable foundation aligned with the teams’ tools: Figma for design, Storybook for coded components and ZeroHeight for cross-functional documentation.
Creation of a structured library with tokens, components, variants, states and usage rules to speed up design and reduce inconsistencies.
Support for developers to translate components into a technical library, including variants, states and accessibility constraints.
Documentation of components, UX rules, accessibility recommendations, decision criteria and contribution best practices.
Set up a review method to keep components consistent, accessible and maintainable over time.
The Design System made interface decisions visible, aligned teams around shared components and integrated accessibility earlier in design. Designers have a clear library, developers a component reference, and product teams support to make decisions faster.