Case Study — The Resilience Engine
Desenhei o app de resiliência de uma consultoria de Edimburgo, e ele foi lançado. Em 2026 levei o meu arquivo do Figma a um protótipo de 15 telas que se usa, com as telas que faltavam desenhadas e um rio que sobe e desce com o seu dia.
A The Resilience Engine, uma consultoria de Edimburgo, ensina que a resiliência sobe e desce como o nível de um rio. Rio alto passa por cima das pedras, rio baixo é empurrado para fora do curso. Em 2023 desenhei o app que ajuda a pessoa a perceber a queda a tempo, e ele foi lançado. No meu arquivo do Figma, porém, quatro telas do ciclo principal ficaram no wireframe, e um arquivo parado não mostra o que acontece depois do toque.
Em 2026 levei esse arquivo a um protótipo de 15 telas que se usa. O desenho ficou como estava, e as telas que faltavam saíram dos componentes do próprio sistema. Responda o check-in e o rio sobe ou desce de verdade. É o que eu entrego: do desenho ao produto funcionando, com critério de produto e IA na produção, em dias, não meses.
O que eu fiz
01 — O problema
Quem está perdendo o fôlego no trabalho costuma perceber tarde. O app gira em torno de um check-in de sete perguntas, da demanda no trabalho ao sono, que vira um nível de 1 a 6 e uma zona do método RAG, do verde ao vermelho. Cada área no vermelho vira uma red flag e leva a uma ferramenta curta ou a uma trilha.
O meu arquivo já tinha quase tudo, do onboarding ao player das práticas. Faltava justamente o ciclo principal: criar a conta, ajustar o check-in, responder e ver o resultado ainda eram wireframe.
O onboarding: o método em dez passos
Do welcome ao "Are you ready?", o onboarding ensina o método antes da primeira pergunta. Cada passo tem alguém do elenco do app.
02 — O protótipo
São 15 telas, e o que você faz fica salvo. Responda o check-in e o rio da home sobe ou desce com as suas respostas, assim como as red flags do resultado. Se preferir, deixe o tour passar pelas telas.
Ir direto para
Use como num celular: responda o check-in e veja o rio subir ou descer. Os dados são fictícios e ficam só no seu navegador.
As telas marcadas com "era wireframe" estavam só no esboço no meu arquivo e foram desenhadas para este protótipo.
03 — Decisão: refinar
A regra foi não reinventar. O visual do arquivo ficou como estava, e o trabalho foi no que um arquivo de design não mostra: o que acontece depois do toque e os gráficos com dados de verdade.
A home era um menu de quatro cartões, e o único dado na tela era a data do último check-in. Ganhou um componente novo no topo, o rio do dia, com o nível e a zona. Depois do check-in ele sobe ou desce, e a pessoa vê na hora como está.
Os gráficos de linhas já respondiam à pergunta certa: como cada área se moveu no período. Agora as linhas vêm do histórico da pessoa, filtradas por período e por área, e cada gráfico tem uma tabela para quem usa leitor de tela.
No gráfico polar, só a legenda dizia qual área estava na tela. A área escolhida foi para o título, com a média e a zona, e a legenda virou um seletor.
Na prática guiada, o texto turquesa claro ficava abaixo do contraste mínimo e as instruções eram um bloco corrido. O texto passou para o Deep Blue do próprio sistema, e as instruções viraram partes que acompanham o áudio.
A home com o rio do dia, os gráficos filtrados por área, o polar com a área no título e a prática dividida em partes.
04 — Decisão: as telas que faltavam
No arquivo, as quatro telas que fazem o produto funcionar ainda eram wireframe. Em vez de criar uma linguagem nova, montei cada uma com peças do próprio sistema, do painel do onboarding aos campos e toggles, e com as mesmas paisagens do resto do app.
01 — Criar conta
Princípio: Prevenção de erros
Um erro de cadastro não pode aparecer antes de a pessoa terminar de digitar. Os campos só acusam erro quando ela sai deles, e a senha pode ser mostrada. A mesma tela vira "Sign in" com um toque, e o visual vem do onboarding: o painel lilás com a cena do último passo e a sheet branca.
02 — Ajustes do check-in
Princípio: Controle e liberdade
O check-in só vira hábito se chegar na hora certa. A pessoa escolhe a frequência e o horário do lembrete, tudo com componentes que o sistema já tinha. Na primeira vez, os ajustes vêm antes do check-in e levam direto a ele.
03 — Check-in
Princípio: Uma pergunta por vez
O check-in precisa caber em dois minutos. É uma pergunta por tela, numa escala de 1 a 6 em que o 6 é sempre o lado bom, inclusive em estresse e demanda. Tocar um número já confirma e avança, e na última pergunta a seta vira "See my results".
04 — Resultado
Princípio: Explique o porquê
O resultado precisa dizer o que fazer agora. Ele parte da tela de Red Flags que o arquivo já tinha e põe o rio do dia no topo. A bandeira só fica vermelha nas áreas que caíram na zona vermelha, e cada uma leva à trilha ou às ferramentas daquela área.
05 — O sistema
As cores e os componentes do arquivo viraram a base do protótipo. Onde o contraste ficava abaixo do mínimo, a correção preservou o desenho: o texto branco do toggle selecionado virou Deep Blue sobre o mesmo lilás.
O único componente novo da home mostra o nível do dia como água, com a régua de 1 a 6 nas cores RAG. Cada zona tem um nome, como Sweet spot ou Act now, para a cor nunca ser o único sinal.
As ilustrações do arquivo misturavam estilos diferentes. Todas viraram paisagens com gradiente e grão, com um elenco de cinco pessoas desenhadas de perto. Só a hora do dia muda a paleta, do onboarding ao player.
No arquivo, todas as barras repetiam as mesmas porcentagens de exemplo. Agora cada barra conta os dias que a pessoa passou em cada zona.
Erros que passam despercebidos num arquivo de design e não podem chegar à produção.
As cores e a escala tipográfica do Figma seguem as mesmas. Mudar uma cor muda o app inteiro, como mudaria no arquivo.
O arquivo já tinha um ícone de lua no player, para ouvir antes de dormir. Agora ele liga um tema escuro com o contraste revisado, que fica lembrado para a próxima prática.
06 — Do check-in à ação
Uma red flag sem saída só deixa a pessoa mais preocupada. Por isso cada área no vermelho leva a uma ferramenta rápida ou a uma trilha mais longa, e dali de volta aos dados. As telas do arquivo agora se ligam umas às outras, com o check-in do dia passando por todas.
07 — Prática e reflexão
A prática precisa caber no dia de quem já está sem fôlego. Por isso as práticas diárias são curtas e marcam o que já foi feito. Cada ferramenta termina com uma pergunta, e a resposta vai para um diário que só a pessoa vê.
08 — Como eu trabalhei
Parti do meu próprio arquivo e decidi o que ficava e o que precisava de refinamento. Agentes de IA montaram as telas, e eu revisei uma por uma, do texto ao contraste, até os números baterem do check-in aos gráficos.
A IA deu velocidade. O critério de produto continuou comigo, e é essa combinação que leva um arquivo de design a algo que se testa em dias, não em meses.
Resultado
Ferramentas
Eu levo do arquivo a um produto que dá para usar e testar, sem perder o desenho, em dias.