Meu Papel
- UX Designer
- Product Designer
- Design Engineer
Créditos
- Leonardo Ferreira - UX Designer e Q&A Tester
- Rodrigo Consolin - Head of Design
- Workflow: Figma (Prototipagem) → Antigravity (Orquestração técnica).
- Modelos: Google Gemini 3 e Claude Opus 4.6
- Infra: Vercel / Supabase / GitHub.
Fevereiro – Maio 2026
O problema
O time de criação da ANA Gaming perdia tempo toda semana com a mesma pergunta: “onde está esse asset?” Encontrar um arquivo dependia de navegar manualmente por múltiplas pastas, sem centralização, sem lógica clara.
Muitos cliques, muita carga cognitiva, pouco resultado.
O diagnóstico
Em uma conversa rápida com o time, ficou claro que cada busca consumia entre 3 e 7 minutos. Com 23 pessoas no time de criação e uma média de 5 buscas por dia, chegamos a um número que chamou atenção: mais de 2.000 horas perdidas por ano.
minutos
Média de tempo gasto buscando assets nas pastas ou através de outras pessoas.
pessoas
No time de criação, com uma média de 5 buscas por assets por dia.
horas perdidas
em tempo produtivo ao longo do ano, buscando assets de forma descentralizada.
O equivalente a 6 semanas inteiras de capacidade produtiva evaporando em navegação de pasta em pasta.
A solução
Desenvolvemos um diretório centralizado pensado para reduzir ao máximo as ações e a carga mental do usuário. A interface organiza os assets por provedor e jogo, com busca segmentada e poucos cliques até o arquivo.
Um diretório centralizado organizado por Provedora → Jogo → Tipo de Asset, com busca global, filtros, preview ao hover e download individual ou em lote via ZIP.
O objetivo de design era claro desde o início: reduzir ao máximo o número de ações e a carga mental do usuário.
O tempo médio de busca caiu de 4,5 minutos para aproximadamente 1 minuto , uma redução de 77,7%, equivalente a 1.608 horas economizadas por ano.
Redução de tempo
O tempo médio gasto na busca por assets caiu drasticamente, de 4,5 minutos para aprox. 1 minuto
de capacidade recuperada
Otimização equivalente a quase um colaborador em tempo integral, liberando a equipe para focar na criação.
economizadas por ano
Tempo produtivo devolvido ao time de criação de 23 pessoas, focando no que realmente importa.
1 - O processo
Iniciamos montando o user flow básico para entender qual seria a jornada de uso que o membro da equipe de criação teria para utilização do app.
Após o user flow definido, partimos para o Figma, onde construímos wireframes para entender como a aplicação funcionaria e realizar testes de usabilidade básicos.
Optamos por trabalhar com ele na versão Desktop, porque a ideia é que o time de criação tenha acesso a ferramenta no computador enquanto trabalha para buscar os assets.
Partimos para a criação do Design System. Como o intuito era construir a aplicação utilizando Figma MCP – Antigravity, era necessário que todos os componentes, cores, fontes, ícones estivessem devidamente criados, com todas as variáveis e tokens preparadas para escalar o projeto.
Devidamente componetizado, com Design System, variáveis e tokens primárias não fizemos as tokens semânticas para o MVP, pois optamos por uma abordagem lean de rápida validação interna.
Com as tokens primárias em posição, criar as semânticas futuramente em caso de escala de produto não seria um problema.
Replicabilidade, documentação, e arquitetura.
A escala baseada em 4 parte de uma unidade mínima comum e cresce seguindo multiplicadores definidos, como 1,125, que estabelecem o ritmo de expansão dos espaçamentos. Esses multiplicadores não existem para gerar valores finais arbitrários, mas para manter uma progressão consistente e harmônica, permitindo que o sistema evolua de forma previsível.
Na prática, o design utiliza apenas os marcos mais úteis dessa escala, enquanto o multiplicador garante coerência, flexibilidade e escalabilidade ao longo de todo o produto.
Wireframes de Alta Fidelidade
Com a base visual pronta, criamos as telas em alta fidelidade, para analisar como os componentes aconteceriam na tela, e também para traduzir os fluxos e componentes mais tarde via MCP.
Após a etapa do layout construído, o projeto foi levado ao Antigravity via MCP, na etapa inicial da programação via I.A, as rules e o schema foram configurados.
A partir daí, usando os modelos Gemini 2.5 e Claude Opus, o código foi gerado com fidelidade ao que havia sido desenhado, conectado ao Supabase como banco de dados e publicado via Vercel.
Nenhum handoff. O design e o código foram produzidos pelas mesmas pessoas, do wireframe ao deploy.
Decisões que definem o produto
Cada funcionalidade partiu de uma pergunta simples: qual é o menor número de ações possível para o usuário chegar onde precisa?
Download em Massa
O download em lote via ZIP resolve o comportamento real de uso.
Designers raramente precisam de um único arquivo precisam de tudo de um jogo para montar um banner, uma campanha, um pacote para parceiro.
Selecionar arquivos individualmente e baixar um por um seria replicar o problema que o produto veio resolver.
Com a seleção múltipla e o botão de pasta completa, o que antes era um processo de vários minutos vira um clique.
Barra de contexto
A barra flutuante de seleção aparece na base da tela no momento em que o usuário marca o primeiro arquivo.
É um padrão que quem usa Google Drive ou Notion já reconhece sem precisar aprender, a curva de adoção é praticamente zero porque o comportamento é familiar.
Ela mostra quantos arquivos estão selecionados e entrega a ação de download sem tirar o usuário do contexto da página.
Preview dos Assets
O preview ao hover resolve um problema que parece pequeno mas acontece dezenas de vezes por dia: o usuário não sabe qual dos três arquivos PNG é o que ele precisa sem abrir cada um.
Com o preview flutuante no cursor, ele passa o mouse, vê a imagem em tamanho real via React Portal, e decide, sem download, sem nova aba, sem interrupção de fluxo.
Sidebar URL Aware
A sidebar URL-aware elimina uma fricção que a maioria das ferramentas internas ignora.
Quando o usuário acessa diretamente a página de um jogo por link compartilhado, a sidebar já expande automaticamente a provedora correta.
Ninguém precisa lembrar onde aquele jogo está ou navegar do zero para entender onde está na hierarquia.
Módulo de Busca e Filtros
O módulo de busca e filtros foi pensado para cobrir os dois perfis de uso: quem sabe exatamente o que quer e quem está explorando.
A busca global com debounce de 250ms retorna provedoras e jogos em tempo real enquanto o usuário digita, sem necessidade de pressionar enter. Para quem prefere navegar, os filtros por categoria e tipo de arquivo dentro da página do jogo, PNG, PSD, JPG agrupados em accordions expansíveis, permitem focar no formato que interessa sem rolar a página inteira.
Os dois caminhos convergem para o mesmo resultado: o asset certo com o mínimo de ação possível.
Modo Admin
O painel de administração foi projetado para ser invisível para usuários comuns e funcional para quem gerencia o conteúdo.
Admins visualizam, dentro da própria página do jogo, opções de upload de novos assets e exclusão de arquivos. O upload é contextual, acontece dentro do jogo que está aberto, organiza automaticamente o arquivo no caminho correto do Supabase Storage e atualiza a lista sem recarregar a página.
A exclusão pede confirmação e remove tanto o arquivo do banco quanto do storage.
Isso significa que a gestão do conteúdo vive onde o conteúdo está, não em uma área administrativa separada que exige contexto para operar.
Favoritos
O sistema de favoritos existe porque alguns membros do time trabalham recorrentemente com os mesmos jogos. Sem ele, toda sessão começa do zero, busca a provedora, filtra o jogo, chega nos assets.
Com ele, os jogos mais usados ficam acessíveis em uma rota própria, um clique a partir de qualquer lugar do sistema.
Favoritar é um toggle dentro da própria página do jogo, com feedback visual imediato. A persistência acontece no banco via Supabase, vinculada ao usuário autenticado, o que significa que a lista de favoritos de cada pessoa é individual, sobrevive ao logout e está disponível em qualquer dispositivo. Não é um estado local que some ao fechar o navegador.
A página de favoritos exibe os jogos em grid de cards com thumbnail, nome e provedora, com animação de escala ao hover que reforça a sensação de interatividade sem adicionar ruído visual. Para quem ainda não favoritou nada, um estado vazio com chamada para explorar os jogos evita a tela em branco que desorient a o usuário novo.
É um detalhe pequeno, mas é a diferença entre um produto que parece abandonado e um que parece cuidado.
Resultados e Impacto Real
O tempo médio de busca caiu de 4,5 minutos para aproximadamente 1 minuto , uma redução de 77,7%, equivalente a 1.608 horas economizadas por ano.
Redução de tempo
O tempo médio gasto na busca por assets caiu drasticamente, de 4,5 minutos para aprox. 1 minuto
de capacidade recuperada
Otimização equivalente a quase um colaborador em tempo integral, liberando a equipe para focar na criação.
economizadas por ano
Tempo produtivo devolvido ao time de criação de 23 pessoas, focando no que realmente importa.
O que vem a seguir
Próximas etapas
Prioridade 01 · Validação
Uso real antes de qualquer evolução
O produto está em produção, mas ainda em fase de validação. O próximo passo mais importante não é técnico: é acompanhar o uso prolongado com dados reais de adoção. Tempo médio de busca, frequência de acesso, quais provedoras e jogos são mais acessados e quais funcionalidades são mais usadas vão ditar as decisões seguintes com muito mais precisão do que qualquer estimativa.
Prioridade 02 · Infraestrutura
Backend proprietário para escala real
A evolução mais relevante na camada técnica é migrar o armazenamento para um backend proprietário. O Supabase Storage resolve bem para o volume atual, mas a transferência de grandes quantidades de assets entre ambientes, times ou parceiros exige controle mais robusto — pipelines de ingestão mais sofisticados, gerenciamento de permissões por contexto e capacidade de escalar sem depender dos limites de um BaaS.
Prioridade 03 · Produto
Evoluções já arquitetadas, aguardando validação
Algumas evoluções já estão previstas na estrutura do produto e esperando dados reais para serem priorizadas.
Busca full-text
Já arquitetada no SearchContext. Precisa apenas de indexação no banco para ser ativada.
Preview de PSD
Conversão server-side via Supabase Edge Functions + Sharp. Elimina a última barreira para validar um asset sem download.
Notificações
Aviso ao usuário quando novos assets forem adicionados a um jogo favoritado. Fecha o ciclo sem comunicação manual.
Upload em lote via UI
Substitui o script de ingestão para operações do dia a dia. Administração de conteúdo completamente autônoma.
Analytics de downloads
Visibilidade sobre quais assets são mais usados. Útil para o time criativo e para quem gere o relacionamento com provedoras.
O diretório nasceu como solução para um problema operacional pontual. Se os números se confirmarem com dados reais, ele se torna uma camada de infraestrutura criativa replicável — um ativo que pode evoluir para outros contextos dentro da empresa ou ser oferecido como módulo para outras operações do setor.