Chapter 5 of 8 · How I imagine it~2 minutes, plus the demonstration
Try a demonstration service built on these principles
Below is an invented service: “Sample certificate”. It does not send anything anywhere and does not save anything. Try filling it in, making mistakes on purpose, changing the language or enlarging the text.
Demonstration. This is not a real service.
Do not enter real data. The data is not sent and is not stored.
What you can try:
- Change the language (Romanian, Hungarian, English) and notice that it stays the same on every step.
- Enlarge the text and see that the page stays readable.
- Change the theme in the header: Light or Dark.
- Get the CNP wrong (the Romanian personal numeric code) and read the error message.
- Use only the keyboard (Tab, Enter, arrow keys).
- Turn on the screen reader on your phone or computer, if you have one.
Why the formal form of address in the demonstration? Romanian has an informal “you” (tu) and a polite, formal one (dumneavoastră). In Romanian, this site addresses you as “tu”, because it is a personal conversation. A public service, however, addresses everyone, including older people, so in Romanian the demonstration uses the polite form. A clear and consistent rule is one of the things a design system would settle.
The steps of the demonstration
| Step | What it shows | What it demonstrates |
|---|---|---|
| 0. The trust banner | A thin strip at the top: “An official website of the Romanian state. How can you check? ▾” | The trust layer. In the demonstration, the banner carries the label “Example”. |
| 1. Before you start | What you need, how much it costs, how long it takes, who is responsible, the languages you can get a reply in | People know everything before they start |
| 2. Your details | Surname, first name, CNP | Clear error messages; names with diacritics and several first names accepted |
| 3. The address | County → locality → street, number, block, entrance, floor, flat; “I live abroad” option | The Romanian address pattern |
| 4. Check your answers | A summary of all the data, with “Change” next to each item | Fewer incorrect applications |
| 5. Confirmation | Registration number, what happens next, how long it will take, how to find out the status | People are not left in uncertainty |
| 6. Your feedback | “How easy was it?” (5 levels) and an optional field | Feedback at the end of every service |
The control bar, always visible: Language · Text size · Theme.
The “before and after” example, shown next to the demonstration:
| Today, commonly seen | In the demonstration |
|---|---|
| “Error” | “The CNP has 13 digits. You entered 12.” |
| “Invalid field” | “Enter the date as day, month, year. For example: 27 3 1985.” |
| “The required documents must be submitted at our office.” (found out at the end) | The list of documents, on the first page, before starting |
For specialists
- It matches the MVP in the SDGR proposal, that is, the Government of Romania Design System as I propose it: the trust layer, 8–12 basic components (button, link, text field, label, radio buttons, checkboxes, select list, alert, error summary, fieldset, header, footer) and the first patterns (personal details, CNP, address, “Before you start”, check answers, confirmation).
- CNP validation in the demo: length, digits only, check digit. The message for the check digit does not say which digit is wrong, because the algorithm cannot know. Validation in the browser does not replace validation on the server.
- The texts are externalised by key, with parameters (
{n}), as in the proposed multilingual architecture. The components support texts that are 30–40% longer (Hungarian, German). - Contrast: all of the demo’s colour combinations are checked at WCAG 2.2 level AA. The yellow of the flag (#FCD116) is not used for text on white (1.5 : 1).
- It works without JavaScript for the basic steps; the language and text controls may use JavaScript, with a fallback.
- Build option: the demo could start from the code of MUD, the Republic of Moldova’s design system (MIT licence, web components, ro-MD texts). That would itself be a mini-trial of the reuse proposed in stage 1, keeping the copyright notice.
What I base this on
The links lead to the public versions of my research documents; the section number (§) takes you straight to the paragraph cited.
| Claim | Document | Where |
|---|---|---|
| The MVP components and patterns | The full proposal | §6.2, §6.5, Anexa B |
| The official banner and its limit (an educational indicator) | The full proposal; The American system (USWDS) | §6.3; §5.4 |
| The banner text and the .gov.ro rule (not valid for town halls) | What already exists in Romania | §7 |
| The form of address (polite form in public services) | What already exists in Romania | §8 |
| Multilingualism, texts reviewed by people | The full proposal | §7 |
| The colours of the flag and their contrast | What already exists in Romania | §2.1 |
| The MUD code, the MIT licence | What already exists in Romania | §13 |
| “Before you start” and Regulation 2018/1724 (the EU single digital gateway) | European rules | B2 |
| Service patterns validated through research (GOV.UK) | Design systems in Europe | §3, §11 |