Paulo Peres

ESTUDO DE CASO / UX / PRODUTIVIDADE

Formio

Projeto conceitual na EBAC, anteriormente chamado Criativo em Ação. Sem relação com outros produtos chamados Formio ou Form.io.

Organização pessoal que respeita o ritmo de cada pessoa

Proposta de aplicativo que conecta tarefas, progresso e retomada, com uma evolução da gamificação para valorizar a constância individual.

Mãos segurando um celular com a home do Formio: progresso de hoje, tarefas para hoje e botão Nova tarefa.
UMA HISTÓRIA DE DESIGNNO RITMO DE CADA PESSOA

Resumo

O essencial do projeto em poucas linhas. Logo abaixo, o processo completo em 7 etapas, na ordem em que aconteceu.

Contexto
Aplicativo de organização pessoal com tarefas, metas, progresso e gamificação voltada à constância.
Problema
Ajudar a pessoa a saber o que fazer agora, perceber o próprio avanço e retomar quando perder o ritmo.
Público
Pessoas que querem organizar a rotina e manter a constância.
Minha contribuição
Rascunhos, wireframes, duas sessões remotas com o protótipo inicial, interfaces, identidade visual com mascote e adaptação da tela de metas.
Natureza
Projeto conceitual. Não é um produto lançado.
Solução e entregas
Home com tarefas do dia e progresso, conquistas por constância, fluxo de retomada, loja de bordas, amigos no perfil e tela de metas para celular, tablet e desktop.
Evidências e limitações
Duas sessões remotas com a versão inicial em baixa fidelidade, que ainda tinha níveis e ranking. Elas não validam a versão final, e não há medição de produtividade ou constância.
Apoio de IA
O projeto inclui pesquisa e prototipação em baixa fidelidade para testes. As interfaces e decisões visuais foram refinadas mantendo a identidade original e a navegação flutuante.
Não conhece algum termo? Veja o que cada um significa
Gamificação
Uso de elementos de jogo, como moedas e progresso, para estimular um hábito.
Wireframe
Esboço das telas sem cores nem imagens, para decidir a estrutura antes do visual.
Baixa fidelidade
Primeira versão das telas, simples e sem acabamento visual.
Protótipo
Versão clicável das telas, usada para testar antes de qualquer desenvolvimento.
UI Kit
Conjunto de cores, textos e componentes que mantém as telas com a mesma aparência.
Remake
Nova versão das telas, refeita a partir do projeto original.
Etapas do estudo
  1. 1Contexto e desafio
  2. 2Exploração e testes iniciais
  3. 3Decisão central
  4. 4Evolução da experiência
  5. 5Identidade e adaptação
  6. 6Avaliação e limites
  7. 7Aprendizados e próximos passos

Etapa 1 de 7Contexto e desafio

Organizar é só o começo

A pergunta do projetoComo ajudar cada pessoa a organizar suas tarefas, perceber seu progresso e manter a constância?

Transformei a pergunta em três objetivos de design:

  • 01Saber o que fazerAs tarefas do dia aparecem na tela inicial.
  • 02Perceber o avançoO progresso do dia fica visível.
  • 03Querer continuarConquistas ligadas à constância.

A direção: incentivar o progresso pessoal, sem comparar rotinas. São objetivos de design, não efeitos comprovados.

Etapa 2 de 7Exploração e testes iniciais

Antes das cores, a estrutura

Rascunhos e wireframes organizaram as telas de tarefas, progresso, perfil, amigos e ranking. Testei o protótipo inicial em baixa fidelidade em duas sessões remotas.

Rascunho em papel. Primeira organização das telas.
  1. 01Wireframe: progresso com XP
  2. 02Wireframe: lista de tarefas

O que observar: a versão inicial tinha nível, XP e um ícone de ranking na barra de navegação.

Etapa 3 de 7Decisão central

Retirar XP, níveis e ranking

Tarefas exigem esforços diferentes. Comparar pessoas por número de tarefas ou por pontos de experiência não considera essas diferenças e não combinava com a proposta de valorizar o ritmo individual.

Foi uma decisão minha, para evitar comparação e frustração. Ela não veio diretamente das sessões de teste.

Antes
Níveis e XP.
Depois

O que passa a contar: dias ativos no mês e sequências de dias seguidos. Concluir pelo menos uma tarefa já conta como dia ativo.

Etapa 4 de 7Evolução da experiência

Do progresso à próxima ação

Home: o próximo passo à vista

Antes, a Home destacava o progresso. Depois, passou a mostrar também as tarefas do dia, com “Ver todas” para a lista completa. Perceber o progresso ajuda, mas a pessoa abre o app para saber o que fazer agora.

Antes
Depois

Amigos no lugar certo

O acesso aos amigos saiu da barra de navegação inferior e foi para a seção “Meus amigos”, no perfil, junto das informações e conquistas pessoais.

Versão 2: todas as telas refeitas

Em novembro de 2026, refinei as telas do aplicativo. Mantive a barra de navegação flutuante e a identidade visual do projeto; melhorei acabamento, espaçamentos e organização dos cartões. O protótipo abaixo usa essa versão.

Protótipo recriado em código a partir das telas e conexões do Figma da versão 2. Escolha um fluxo no painel e toque nos botões da tela, como num app.

  1. Concluir as tarefas do dia
  2. Criar uma tarefa
  3. Ver perfil e amigos
  4. Trocar moedas por uma borda
Abrir em tela cheia

Retomar também faz parte

Quando a sequência quebra, a interface explica o que aconteceu e oferece dois caminhos. Estas telas são da versão original; o remake não refez este fluxo.

  1. 01Recuperar a sequência com moedas
  2. 02Começar um novo ritmo com incentivo

Acolher a retomada também é uma decisão de interface.

Reconhecer o esforço

Na loja, as moedas servem para escolher bordas e personalizar o perfil. Depois da compra, a pessoa pode aplicar a borda ou voltar à loja.

Etapa 5 de 7Identidade e adaptação

Uma companhia para cada momento

A formiguinha aparece para incentivar, celebrar e acolher a retomada. A personalidade está mais no jeito de falar do que na decoração.

  1. 01Incentivar: “Vamos começar?”
  2. 02Celebrar: “Olha o quanto você avançou!”
  3. 03Acolher: “Tudo bem retomar.”

As cores têm função (ação, navegação, ritmo e recompensa). A marca usa Odibee Sans e a interface usa Nunito Sans.

A mesma rotina, outros espaços

A tela de metas foi pensada para três tamanhos. Na versão 2, refinei as três e preservei as decisões da versão original: menu lateral no desktop, menu recolhível no tablet e barra de navegação no celular. A adaptação vale para esta tela; não representa todas as telas do app.

DesktopMenu lateral sempre visível e metas em duas colunas.
TabletMenu recolhível pelo ícone e metas em uma coluna.
CelularBarra de navegação flutuante.

Etapa 6 de 7Avaliação e limites

O que foi avaliado, e o que não foi

As duas sessões remotas aconteceram com a versão inicial em baixa fidelidade, que ainda tinha níveis e ranking. Elas não validam a versão final.

  • Há registro qualitativo de facilidade de uso e de uma experiência agradável, sem número de participantes nem métricas.
  • Na revisão visual, verifiquei contraste entre pares de cores, como off-white sobre cinza (15,18:1).
  • Melhora em produtividade, retenção ou constância exigiria uma avaliação com uso contínuo, que não foi feita.
  • Não há registro de testes com a versão 2 (remake).

Etapa 7 de 7Aprendizados e próximos passos

Revisar também é projetar

  • 01Escolher o comportamento certoDecidir o que a gamificação deveria incentivar veio antes de desenhar recompensas.
  • 02Nem tudo disputa atençãoDistribuir recursos sem fazer tudo brigar pela mesma tela.
  • 03Progresso ligado à açãoConectar o avanço à próxima tarefa deu direção às decisões de interface.
  • 04Retirar é decidirTirar funcionalidades também é uma decisão de design.
  • 05O recomeço faz partePerder o ritmo é previsível; a experiência precisa receber a pessoa de volta.
  • 06Telas diferentes, mesma rotinaReorganizar conteúdo e navegação conforme o tamanho da tela.

Próximos passos propostos

  • Testar a versão final, sem ranking, com pessoas usando o app por alguns dias.
  • Observar como as pessoas usam o fluxo de retomada.

Próximo projeto

AGITAE

Descobrir eventos por perto com informação confiável e no tempo certo

Contato

Estou em busca da primeira oportunidade em UX/UI, UI ou Product Design. Fale comigo por e-mail, WhatsApp ou LinkedIn.