Aplicativo Ctrl Finance: Gamificando a Educação Financeira
Contexto
Este projeto aborda o desenvolvimento inicial do CTRL Finance, um aplicativo móvel gamificado projetado para educação financeira e gerenciamento de despesas pessoais. Diante dos altos índices de endividamento da população brasileira, que atingiu 68,62 milhões de inadimplentes em novembro de 2024, torna-se urgente desenvolver estratégias para promover a alfabetização financeira. A proposta combina elementos tradicionais de ferramentas de controle financeiro com mecânicas de jogos, como a exploração de cenários e desafios baseados em inimigos, para criar uma experiência interativa e educativa. O objetivo é transformar o aprendizado e o controle de finanças em uma jornada onde o usuário gerencia suas finanças para derrotar “dívidas” (representadas por monstros) e alcançar suas metas.
Inspiração (Pesquisa e Benchmarking)
Para entender o cenário atual, foi realizado um processo de benchmarking, comparando aplicativos e jogos existentes. Foram analisadas ferramentas de finanças como Despezzas, Planilha personalizada e Organizze , e jogos mobile de sucesso como Capybara Rush, Legend of Mushroom, One Bit Adventure, Almost a Hero e Clash Royale.
A análise revelou uma oportunidade clara: enquanto os aplicativos de finanças são eficientes no controle, eles carecem de elementos que garantam a motivação contínua e o ensino. Em contrapartida, jogos, mesmo com mecânicas repetitivas, conseguem manter os jogadores engajados por muito mais tempo. Essa constatação validou a abordagem de unir as duas áreas.
Processo (Metodologia e Design)
Solução
Desenvolvemos um aplicativo em Flutter/Dart, focado em simplificar o trabalho de campo e a gestão dos dados. Minhas principais contribuições foram:
- Estruturar o fluxo de design desde o zero, considerando a ausência de padrões internos.
- Criar wireframes de baixa e alta fidelidade com base em reuniões e na matriz CSD.
- Desenvolver fluxogramas e ajustar telas para atender alterações de última hora solicitadas pelo cliente.
- Oferecer suporte direto aos desenvolvedores durante a implementação.
O projeto utilizou uma metodologia híbrida, combinando o modelo iterativo de Eric Zimmerman com a estrutura do Double Diamond.
- Descoberta (Discover): A fase inicial focou em entender o problema e o público. Foi realizada uma pesquisa via Google Forms que obteve 100 respostas, revelando que o público principal está na faixa de 18 a 25 anos, com renda de até R$ 2.000 mensais. Dados alarmantes mostraram que 35,64% dos entrevistados já ficaram inadimplentes por falta de planejamento financeiro. No entanto, 87,13% consideram o tema “muito importante” e 58,42% afirmaram que usariam um aplicativo gamificado para aprender sobre finanças.
- Desenvolvimento (Develop): Com base nos dados, foram definidas as estruturas da aplicação. Foi criado um Core Loop para mapear a sequência de ações repetitivas do jogador (Registrar gasto -> Jogar mini-game -> Receber recompensa -> Evoluir). Em seguida, foram desenvolvidos fluxogramas para visualizar de forma clara todos os caminhos que o usuário pode seguir dentro do sistema. Para a parte de gamificação, foram usados os modelos teóricos.
- HEXAD e Octalysis para mapear os perfis e as motivações dos usuários.
Resultado (Wireframes de Baixa Fidelidade)
Para dar forma às ideias e validar a estrutura, foram criados wireframes de baixa fidelidade no Figma. Essa abordagem permitiu explorar rapidamente a interface e testar a estrutura básica da aplicação antes de investir tempo no design visual refinado. Os wireframes foram essenciais para garantir que o core loop e as mecânicas de gamificação estivessem bem posicionados na interface, favorecendo a imersão e o entendimento do sistema pelo jogador.
Vida (Protótipo Interativo)
A partir dos wireframes, foi construído um protótipo interativo simples no Figma para validar a navegação e a lógica da gamificação. O foco principal do protótipo foi representar o ciclo central de interação do usuário (o core loop) e os principais fluxos definidos anteriormente. Essa etapa foi fundamental para transformar as ideias em uma experiência tangível e testável, permitindo um ciclo de melhoria contínua antes mesmo do desenvolvimento do código.
Componetização e Criação do Design System
Para garantir consistência, escalabilidade e agilidade no desenvolvimento futuro, a construção do Design System no Figma foi estruturada com base na metodologia do Atomic Design. Esta abordagem nos permitiu construir a interface de forma hierárquica e modular, partindo dos elementos mais simples até os mais complexos.
Design Completo das Telas em Alta Fidelidade
Com a biblioteca de componentes estruturada, a identidade visual foi aplicada aos wireframes. Esta fase focou em dar vida à narrativa de gamificação, utilizando cores, ilustrações e tipografia para criar uma atmosfera engajadora. As telas foram montadas com os componentes do sistema, garantindo um design polido e coeso, equilibrando a clareza de uma ferramenta financeira com o apelo lúdico de um jogo.
Protótipo de Alta Fidelidade e Microinterações
Por fim, foi desenvolvido um protótipo de alta fidelidade no Figma para simular a experiência final e refinar o feel da interface. O foco foi explorar as microinterações: animações de feedback em botões, confirmações visuais ao registrar um gasto e celebrações ao completar um desafio. Essas interações são essenciais para tornar a experiência mais fluida, informativa e divertida, servindo como um guia para os desenvolvedores implementarem a visão do design com fidelidade.