Web Dev 2.0
Como resolvi o maior risco de segurança da nossa agência sem contratar dev, sem orçamento, e em duas semanas.
O Desafio
Dados de clientes expostos.
Em uma planilha pública.
A Dois Palitos Growth usava uma planilha compartilhada para gerenciar credenciais e protocolos de todos os clientes. O link era público. Qualquer pessoa com acesso ao link podia ver tudo, sem nenhuma autenticação.
Além do risco de segurança, a experiência de uso era pesada: encontrar um dado levava minutos, o preenchimento era propenso a erros e o time abria a planilha com resistência mental.
Decidi resolver isso. Sem orçamento extra, sem contratar dev, em duas semanas.
Como eliminar o risco de segurança e melhorar a experiência de uso sem depender de budget ou time de desenvolvimento?
Os Problemas Reais
A planilha era usada diariamente, mas criava fricção em todo o fluxo de trabalho:
-
Link público ativado. Dados de todos os clientes acessíveis por qualquer pessoa com o link, sem nenhum tipo de autenticação.
-
Tempo de busca alto. Localizar uma informação levava de 2 a 3 minutos entre rolar, filtrar e encontrar a linha certa na planilha.
-
Risco constante de erro. Colunas sem estrutura visual clara tornavam o preenchimento propenso a equívocos e dados fora do lugar.
-
Carga cognitiva alta. O time sabia onde tudo estava — mas precisava lembrar. Não havia hierarquia visual nem contexto no momento certo.
Do Problema
ao Sistema
Etapa 01
Alternativas Consideradas
Antes de construir qualquer coisa, avaliei as soluções existentes no mercado. Três opções foram analisadas:
| Opção | Decisão | Motivo |
|---|---|---|
| 1Password | Descartado | Resolveria só as senhas, não os protocolos e o fluxo de uso |
| Notion | Descartado | Genérico demais. Sem a estrutura específica que a 2P precisa |
| Build com IA | Escolhido | Personalizado para o fluxo real da agência, com custo próximo de zero |
Etapa 02
Design e Prototipagem
Com o escopo definido, protipei o sistema inteiro no Figma usando o Bit System como base de componentes. O foco principal foi reduzir ao máximo o número de passos para chegar à informação.
O fluxo central ficou assim:
- Busca com autocomplete para localizar clientes em segundos
- Tela exclusiva por cliente com campos fixos e contextualizados
- Protocolos com indicador de progresso e gamificação visual
- Visibilidade estratégica sobre quais clientes têm cada protocolo concluído
Etapa 03
Desenvolvimento com IA
Com o protótipo aprovado, usei o Claude AI como parceiro de desenvolvimento. O processo consistia em traduzir cada decisão de produto em especificações claras, e então colaborar com a IA para implementar em PHP e MySQL.
A qualidade do resultado dependia diretamente da qualidade da especificação. O processo de produto tinha que existir antes do código.
- Back-end em PHP com MySQL hospedado na Hostinger
- Autenticação com senha, controle de perfis e sessões
- Gestão global de protocolos com propagação automática para todos os clientes
- Log completo de auditoria: usuário, ação, data e hora
Etapa 04
Beta, Feedback e Iteração
A v1 foi lançada deliberadamente simples. Tratei como hipótese, não como produto final. O objetivo era colocar na mão do time o mais rápido possível e aprender com o uso real.
Dois bugs foram identificados logo nas primeiras semanas:
- Problema de fuso horário nos registros de data
- Contador de protocolos pendentes exibindo valores incorretos
Ambos foram corrigidos na v2, junto com melhorias levantadas pelo time via feedback direto: gestão global de protocolos, filtros avançados e interface mais responsiva para mobile.
O Sistema
em Produção
Veja o sistema funcionando. A demonstração abaixo mostra o fluxo principal: busca, ficha do cliente e acesso aos dados com um clique.
Antes e Depois
| Métrica | Antes | Depois |
|---|---|---|
| 🔒 Exposição de dados sensíveis | 100% público. Qualquer pessoa com link via tudo | 100% restrito. Acesso apenas por login autenticado |
| ⏱️ Tempo de busca de informação | 2 a 3 min (rolar, filtrar, localizar na planilha) | ~10 seg (autocomplete, abrir ficha) — redução de ~60% |
| ⚠️ Risco de erro de alimentação | Alto. Linhas e colunas sem estrutura visual clara | Baixo. Tela própria por cliente, campos fixos e com contexto |
| 🧠 Carga cognitiva de uso | Alta. Usuário precisava lembrar onde cada dado estava | Baixa. Hierarquia visual clara, busca inteligente, navegação previsível |
| 👥 Adoção do time | Planilha aberta com resistência mental | 100% do time ativo desde o primeiro dia, sem fricção |
| 📋 Rastreabilidade de ações | Zero. Sem histórico de quem editou o quê | Log completo: usuário, ação, data e hora de tudo |
"As equipes de marketing, atendimento e gerência disseram que o sistema estava muito fácil de usar. Antes, abrir a planilha era mentalmente cansativo. Com o sistema, essa fricção desapareceu. A gamificação funcionou: ver o progresso por cliente criou engajamento real com os protocolos, algo que antes simplesmente não existia."
Feedback direto do time
Segurança
O sistema tem segurança real agora:
- ✓ Senhas de login criptografadas com bcrypt (cost 12), algoritmo robusto e amplamente adotado para autenticação
- ✓ Controle de sessão com timeout automático de 4 horas, sessão expirada automaticamente por inatividade
- ✓ Log de auditoria completo: toda ação registrada com usuário, IP, data e hora
- ✓ Backup diário automático via Cron Job da Hostinger, com retenção dos últimos 30 dias
- ✓ HTTPS com SSL ativo: tráfego criptografado entre o navegador e o servidor
- ✓ Controle de perfis verificado server-side: permissões validadas no servidor, não apenas no frontend
Limitação conhecida e próximo passo
As credenciais dos clientes (senhas de WordPress, cPanel, etc.) estão armazenadas em texto simples no banco de dados. É uma limitação real. A próxima iteração prevê criptografia AES-256 para esses campos. Mesmo assim, esses dados só são acessíveis por usuários autenticados, com log de cada acesso e backup diário.
Aprendizados
Lançar como hipótese funciona. A v1 foi deliberadamente simples. O feedback real do time valeu mais do que qualquer especificação prévia.
Resistência existe e é legítima. O time sabia do problema mas não tinha espaço para resolvê-lo. Tomar a iniciativa sozinho foi o que desbloqueou o projeto.
IA como ferramenta de produto é viável agora. A qualidade do output é proporcional à qualidade da especificação. O processo de produto precisa existir antes do código.
Carga cognitiva é tão crítica quanto segurança. Resolver o acesso não autenticado era urgente. Mas resolver a experiência de uso foi o que gerou adoção real.
Personalização vence generalização. Ferramentas prontas existiam. Nenhuma delas seria a 2P.
Quer um designer que entende de dados, não só de pixels?
Me manda uma mensagem. Vamos conversar sobre como posso contribuir com o seu time.