AforroNet

Background

AforroNet is the bond management web application for the IGCP — Treasury and Public Debt Management Agency During my time at eSPap, I led the full redesign of the IGCP’s web app. One of our key objectives was to ensure the redesign aligned with the Ágora Design System, the official standard for Portuguese public digital services.

The Challenge

For nearly two decades, AforroNet’s interface and user experience have remained virtually unchanged. The service faced significant limitations in accessibility, without a mobile-optimized experience, compromising both access and usability.

In our research we identified the following issues:

• Visual Interface An outdated design that is misaligned with the Ágora Design System (already in use for IGCP’s institutional presence). The lack of a responsive layout hinders mobile usage.
• User Experience (UX) Several critical actions still require in-person visits to CTT (postal service) branches, breaking the digital journey and failing to meet modern user expectations.
• Content Information is poorly structured, featuring dense blocks of text and a weak visual hierarchy, which makes it difficult for users to scan and comprehend information.
• Accessibility Our audit using automated and manual testing revealed multiple non-compliance issues regarding WCAG 2.2 standards.
• Internationalization The platform is currently available only in Portuguese, restricting non-native speakers’ access to essential information and features.
• Technical Debt AforroNet has accumulated significant technical debt, the result of years of incremental updates built on top of a legacy technological foundation.

Solutions

To modernize the digital experience for AforroNet, I designed a new visual identity, a new logo, icon, and color palette in alignment with the Ágora Design System.

In the initial phase we focused heavily on the onboarding journey, making sure the user gets introduced to the advantages of IGCP’s financial products. By streamlining the sign-up flow and building an extensive help section, I ensured that both new and existing users could transition to the new platform with confidence.

Key Objectives & Achievements

• Visual identity New logo, icon, and color palette to establish a strong brand presence that aligns with IGCP’s institutional identity.
• UI Redesign Rebuild the interface based on the Ágora Design System, ensuring visual consistency, a fully responsive layout, and a clear hierarchy of primary actions across all devices.
• Information Architecture Restructure content into concise sections with descriptive headings, helpful tooltips, and clear Calls to Action (CTAs) to facilitate quick reading and informed decision-making.
• Inclusive Design Apply WCAG best practices to improve navigation for assistive technologies, ensuring an inclusive experience that meets global accessibility and usability standards.
• Global Access Align AforroNet with the main IGCP website by introducing an English version and a framework for future languages, ensuring terminological consistency across all channels.
• Architectural Renewal Modernize the application architecture and integrate Autenticação Gov as a core authentication method. Introduce reusable components to ensure the platform is scalable and ready for future features.

Methodology

Using the Ágora Design System component library on Figma, we started with high resolution prototypes to test UX patterns, from onboarding to day‑to‑day account management, validating navigation, content hierarchy, and key flows such as subscription and redemption, and newly introduced features such as opening an account - which previously needed to be in-person. The prototype was shared and iterated with IGCP stakeholders to align expectations early and reduce rework later in the build.

Work progressed in close collaboration with the backend team, defining and refining the current API as the product evolved, and using realistic scenarios from the existing AforroNet platform to validate edge cases and data states.

Technology

This project was built with React and TypeScript, using Tailwind CSS, React Router 7, and TanStack Query. We used the official Ágora Design System library to guarantee visual consistency with other public services. New UI components were built on top of Ágora patterns to support the unique set of operations offered by AforroNet.

During development, the Mock Service Worker (MSW) library was used to simulate the API, allowing the frontend team to work in parallel with the backend while iterating on the API specifications in a controlled way.

Reflections

The redesigned AforroNet demonstrates how a legacy public service can evolve into a modern web application that is responsive, accessible, performant, and multilingual, with clear UX patterns that foster public trust in digital public services.

For me, this project reinforced the value of user‑centric design and treating accessibility as a non‑negotiable constraint. It also gave me an opportunity to contribute to the growth of the relatively young Portuguese design system, which is still in the early stages of being applied and tested across Portugal’s digital public services.