AforroNet

Digital transformation of the IGCP's bond management web application.

  • Web App
  • Fintech
  • Design System
Timeline
May 2025 – November 2025
Organization
eSPap
My role
Front-end Development • Product Design • UI/UX Design
Collaborators
Beatriz Matias, Rui Ricardo, João Palma
Tech
React • Tailwind • Figma

Background

AforroNet is the bond management web application for the Treasury and Public Debt Management Agency (IGCP). 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 Agora Design System, the official design system for the Portuguese State.

The Challenge

For nearly two decades, AforroNet’s interface and user experience have remained virtually unchanged. The service faced significant limitations in accessibility and lacks a mobile-optimized experience, compromising both access and usability. Along with my colleague Beatriz, we identified the following issues:

  1. Visual Interface: An outdated design that is misaligned with the Ágora Design System (the standard for IGCP’s institutional presence). The lack of a responsive layout hinders mobile usage.

  2. 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.

  3. 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.

  4. Accessibility: A preliminary audit using automated testing revealed multiple non-compliance issues regarding WCAG 2.2 standards.

  5. Internationalization: The platform is currently available only in Portuguese, restricting non-native speakers’ access to essential information and features.

  6. Technical Debt: AforroNet has accumulated significant technical debt, the result of years of incremental updates built on top of a legacy technological foundation.

Solutions

  • 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.

  • Streamlined Workflows: Reduce unnecessary steps and digitize processes that currently require physical branch visits by leveraging the advantages of Autenticação.gov (Government ID Authentication).

  • 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.

Modernizing the platform was an essential step to providing a more intuitive, inclusive, and responsive navigation. This transformation looked to increase user satisfaction and strengthen the IGCP’s mission through a solution fully aligned with today’s digital demands.