A new end to end experience for citizens and case officers to apply for and manage non contributory pensions at the Generalitat de Catalunya, Departament de Drets Socials i Inclusió.
Service DesignDual Audience UXInformation ArchitectureDesign SystemAccessibility AAResponsive DesignInteraction Design
My roleUX LeadDesigner and UX Lead, IA to delivery
ClientGeneralitat de CatalunyaDept. de Drets Socials i Inclusió
AudienceDualCitizens and case officers
PlatformsResponsiveDesktop and mobile web
Signal — The Brief
One platform, two mental models
Applying for a non contributory pension is one of the highest stakes interactions a citizen has with the state, and it had been buried in dense legacy software built for administrators, not people.
The Department needed a single platform, T.Social 2.0, serving two very different audiences at once: a citizen (or the front desk officer assisting them) completing an application, and a case officer managing hundreds of expedients, case files, through their full lifecycle from intake to resolution.
It carried real constraints from day one. Legal traceability, bilingual delivery, and strict public sector accessibility obligations were non negotiable and shaped the clearest design decisions in the project.
The core tension
A citizen thinks in "my application." An officer thinks in "expedient 00006/2020/3437, situation: Estudi." The design had to hold both truths without compromising either.
Objectives
/A
Reduce abandonment
Remove jargon and break a long legal form into digestible, guided steps.
/B
Speed up case handling
Help officers triage large task queues across many procedure types.
/C
Unify the surface
One maintained, accessible design system instead of divergent screens.
/D
Work on any device
A fully responsive experience. The same flows usable on a desktop at the front desk and on a phone at home.
Index — My Role & Process
UX lead across both audiences
I owned the research, flows and interaction design for the citizen and the officer, while maintaining and evolving the shared design system that kept the whole product coherent.
/01
Discovery and framing
Mapped the legal procedure and officer workflow into service blueprints, then translated them into user flows the team could build against.
/02
Interaction design
Designed the application wizard, the sub flows for periods and household members, and the back office search, filtering, queue and case detail experiences.
/03
UX leadership
Set direction, reviewed work, aligned designers and engineers on patterns, and bridged policy and legal stakeholders with delivery.
/04
Design system
Maintained and grew an existing component library: tokens, responsive patterns, accessibility and documentation, as the source of truth.
Surface 01 — Citizen & Officer Assisted
One UX, applied across the department's pensions and workflows
Rather than designing a one off form, I designed a reusable application pattern the Department of Drets Socials could apply to each non contributory pension it runs, from retirement pensions to their complementary benefits, and to the procedural workflows behind them.
The same journey, components and validation rules adapt to each scheme. Only the scheme specific step changes, so people get a consistent experience no matter which benefit they are applying for, whether a citizen completes it themselves on mobile or a front desk officer completes it on desktop.
Desktop
Officer assisted, at the front desk
On the wide canvas a case officer carries the citizen through the flow. Identity resolution and the persistent seven step wizard give them room to work quickly and confidently.
Identify the applicant. Capacity selection plus identifier search, with a clear selected state card before proceeding.
Step 3 of 7. Contact data. The numbered stepper anchors the journey. Required fields and a same as residence shortcut reduce effort.
Mobile
Citizen self service, on the phone
The same flow and the same components were designed for small screens from the start, so a citizen gets a consistent, one handed experience end to end: from picking a scheme to the final receipt.
Applications menu. All available pensions, benefits and services presented as expandable categories. Citizens and officers scan the full offer at a glance and navigate straight to the right procedure.
Menu drawer. Work areas grouped by role in a single gesture. The active user identity and language selector stay reachable from any screen in the platform.
Benefit picker. Once a pension type is selected, the flow opens with one question: who is applying. An identifier search confirms the right person before a single form field is shown.
Application wizard. A circular step indicator anchors the user inside the seven step journey. Every field shows its label, a required marker and inline validation so progress is always legible.
Modal screen. Complex sub tasks open as dedicated full screen modals. A focused set of fields and a pinned Save action keep the interaction contained and reversible.
Surface 02 — The Case Officer Workspace
Optimised for high-density workflows
For case officers, the priority was task efficiency: minimising clicks-to-action and reducing cognitive load when triaging large case queues. Scannable layouts, persistent filters and direct affordances shortened the path from queue to the next required decision.
Officer home. A calm entry point. Expedient search front and centre, fast routes into My tasks and the group queue, plus a clear channel for system alerts.
Expedient list. A scannable table where status is carried by colour coded pills: Finalitzat, Obert, Tancat, Suspes, Baixa. Sortable, with export and per row actions.
Task triage. Work grouped by task type with live counts, so an officer can pick a lane and clear it instead of hunting row by row.
One of the main objectives was to improve clarity, accessibility, and consistency without oversimplifying the procedural logic required by public administration services.
Infrastructure — Design System
Maintained, evolved, accessible
The shared foundation that kept T.Social 2.0 coherent across two audiences and many pension schemes. I treated the existing component library as living infrastructure and grew it as new needs emerged, with accessibility built in from day one.
The system in one view. Selected documentation pages from the T.Social 2.0 design system: Typography, Colour guidance, Iconography, Effects, and Breakpoints and grid.
Maintenance
Treating the component library as a living source of truth. Tokens, patterns, examples and documentation kept in sync with what shipped, so designers and engineers spoke the same language across every release.
Documented tokens for typography, colour, spacing and effects
Component examples kept current with production
Continuous coordination with engineering on adoption
Evolution
Growing the system as new pension schemes and procedural workflows appeared. Patterns proven in one place were then hardened, documented and made available to the whole team.
New patterns extracted from real delivery
Iconography expanded each release across actions, navigation and notifications
Backward compatibility preserved as the system grew
Accessibility
Public sector accessibility was an obligation, not an option. The system was designed and audited to meet WCAG AA, so every component shipped accessible by default to the broadest possible audience.
WCAG AA conformance across typography, colour contrast and focus states
Bilingual delivery in Catalan and Spanish
Five responsive breakpoints from mobile to large desktop
Register — Outcomes
One system, two jobs done
The platform now serves both audiences from a single, maintained system: a coherent application experience for citizens and a faster triage surface for officers.
Navigation predictability
Restructured IA and consistent interaction patterns improved how users move through procedural areas, reducing confusion and task abandonment.
Accessibility compliance
Alignment with WCAG AA across navigation, hierarchy, contrast, typography and responsive behaviour for a broader range of users.
Scalable design system
Evolved the system with reusable, accessible components ready to support future schemes without redesigning from scratch.
Dual audience clarity
Improved usability for citizens completing procedures independently and officers managing requests on the back end.
