AforroNet

Contexto

A AforroNet é a aplicação web de gestão de produtos de aforro do IGCP — Agência de Gestão da Tesouraria e da Dívida Pública. Durante o período em que estive na eSPap, liderei a proposta de redesign da aplicação web do IGCP. Um dos principais objetivos foi garantir o alinhamento do novo design com o Ágora Design System, o padrão oficial para os serviços públicos digitais em Portugal.

O Desafio

O AforroNet mantém, há quase duas décadas, uma interface e experiência de utilização praticamente inalteradas. O serviço atual apresenta limitações em termos de acessibilidade e não oferece uma experiência optimizada para dispositivos móveis, o que compromete o acesso e a usabilidade.

Identificámos os seguintes problemas:

• Interface Visual Design desatualizado e pouco alinhado com os princípios definidos no Ágora Design System, já em uso na presença institucional do IGCP. A ausência de um layout responsivo dificulta a utilização em dispositivos móveis.
• Experiência de utilização Algumas ações críticas continuam a depender da deslocação presencial ao balcão dos CTT, interrompendo o percurso digital e contrariando as expectativas dos utilizadores.
• Conteúdo O conteúdo informativo é apresentado de forma pouco estruturada, com blocos de texto extensos e escassa hierarquia visual, dificultando a leitura e a compreensão da informação.
• Acessibilidade Uma auditoria preliminar realizada com recurso a testes automáticos evidencia várias não conformidades ao nível da acessibilidade WCAG 2.1.
• Internacionalização Atualmente disponível apenas em português, limitando o acesso de utilizadores não lusófonos à informação e às funcionalidades da plataforma.
• Dívida técnica O AforroNet acumula um nível significativo de dívida técnica, resultado de anos de evolução incremental sobre uma base tecnológica antiga.

Soluções

Para modernizar a experiência digital da AforroNet, desenhei uma nova identidade visual, incluindo logótipo, ícone e paleta de cores, em harmonia com o Ágora Design System. Na fase inicial, focámo-nos na jornada de onboarding, garantindo que o utilizador compreende as vantagens dos produtos financeiros do IGCP. Ao simplificar o fluxo de adesão e desenvolver uma secção de ajuda abrangente, assegurei que tanto os novos como os atuais utilizadores pudessem transitar para a nova plataforma com total confiança.

Principais Objetivos e Resultados

• Identidade visual Nova interface com base no Ágora Design System, garantindo consistência visual, layout responsivo e hierarquia clara das ações principais em todos os dispositivos.
• Renovação da interface Reduzir passos desnecessários e trazer para a plataforma digital ações que hoje ainda dependem do balcão dos CTT, tirando partido das vantagens oferecidas pela Autenticação Gov.
• Informação Reestruturar a informação em secções curtas, com títulos descritivos, mensagens de apoio e chamadas para ação claras, facilitando a leitura rápida e a decisão informada.
• Design inclusivo Aplicar as boas práticas WCAG, melhorando a navegação com recurso a tecnologia de assistência, garantindo uma experiência inclusiva e conforme as normas de acessibilidade e usabilidade.
• Internacionalização Alinhar o AforroNet com o site do IGCP, introduzindo uma versão em inglês e preparada para futuras línguas, mantendo consistência terminológica entre canais.
• Arquitetura de software Renovar a arquitetura da aplicação, introduzir Autenticação Gov como método de autenticação. Introduzir componentes reutilizáveis, garantindo a possibilidade de introduzir novas funcionalidades no futuro.

Metodologia

Utilizando o Ágora Design System como base, desenvolvemos protótipos de alta fidelidade no Figma para validar padrões de UX cruciais, desde o onboarding à gestão da carteira de subscrições. Testámos a navegação, a hierarquia de conteúdos e fluxos críticos, incluindo novas functionalidades, como a implementação da abertura de conta 100% digital, eliminando a necessidade de presença física obrigatória no modelo anterior.

A iteração contínua com o IGCP permitiu alinhar expectativas. Em paralelo, colaborámos estreitamente com a equipa de backend para refinar a API, utilizando cenários reais da plataforma AforroNet para validar a integridade dos dados nos novos fluxos.

Tecnologia

A aplicação foi desenvolvida com React e TypeScript, Tailwind CSS, React Router 7 e TanStack Query. Integrámos a biblioteca oficial do Ágora Design System para assegurar a consistência com os serviços públicos, desenvolvendo novos componentes customizados sempre que as operações específicas da AforroNet o exigiram.

Durante o desenvolvimento, adotámos o Mock Service Worker (MSW) para simular a API. Esta abordagem permitiu que o frontend evoluísse de forma independente e controlada, facilitando a iteração sobre as especificações técnicas antes da integração final com o backend.

Reflexões

Este projeto procurou dar o exemplo para a modernização de serviços públicos digitais atualmente baseados em arquiteturas de software datadas, promovendo a transição para aplicações web modernas, responsivas, acessíveis, multilingues, fortalecendo a confiança dos cidadãos nas plataformas digitais do Estado.

Pessoalmente, este projeto reafirmou a importância do design centrado nos utilizadores, tendo a acessibilidade como um requisito inegociável. Foi, simultaneamente, uma oportunidade priviligiada para contribuir para o crescimento do Ágora Design System, o design system do Estado português, testando-o num cenário de elevada complexidade e relevância social.