Case Study — Método OBA · Tutory
O Método OBA é uma mentoria de concursos policiais de Minas Gerais que roda na Tutory. Redesenhei o painel dos alunos do diagnóstico ao tema em PHP: mais espaço, ícones mais claros e uma navegação mais simples, do computador ao celular. O protótipo abaixo funciona: clique à vontade.
Clique à vontade: menu, troféu e ☰ funcionam. Os dados são fictícios.
01 — Nova experiência
Mais respiro, menos ruído e um visual com a cara do Método OBA. O aluno abre o painel e vê primeiro o que importa: a patente, as missões do dia e o progresso.
01 — No celular
O que melhora: Feito para o celular
O menu de computador ficava fixo ao lado do conteúdo, espremido na tela pequena. Reformulei o menu para uma experiência mais natural no celular.
É a área mínima de toque. O novo design respeita a usabilidade natural da tela do celular.
02 — No computador
O que melhora: Refino e respiro
Cores, tipografia, ícones e menu redesenhados, com espaço para cada informação respirar.
O usuário lê, em média, 20% do texto de uma página. Um bom design é guiado pela hierarquia visual.
02 — A patente
O aluno sobe de patente, de Recruta a Coronel, conforme avança. Agora o fundo, os cards e os ícones mudam com ela, e no topo a foto vira um card de jogador.
Efeito estética-usabilidade
O que é bonito parece mais fácil de usar.
Divisas até o 1º Sargento e estrelas para os oficiais, nos dois temas.
Ouro de 80% de acerto para cima, prata de 60% e bronze abaixo disso.
Ícones 3D tingidos pela patente no cozy e ícones de traço no tático, no lugar dos emojis.
03 — No celular
O ☰ abre os itens em blocos, como num app.
Lei de Jakob
O aluno espera que o painel funcione como os aplicativos que ele já usa no dia a dia.
Cozy
Tático
04 — Respiro
Cada bloco tem o seu respiro, e o mesmo ritmo se repete do computador ao celular. A tela fica leve, e o aluno lê sem esforço.
Empresas líderes em design crescem a receita quase no dobro do ritmo do seu setor.
Grade de 8 pontos
Os espaços partem de 8 px, com meios-passos de 4 para encaixar bem no celular.
Razão áurea
As pessoas tendem a achar mais bonito o que segue essa proporção, mesmo sem perceber.
Ritmo
Espaços que se repetem deixam a tela mais fácil de ler, e o que se lê sem esforço parece mais bonito.
Com espaço entre os blocos, o aluno acha cada informação de primeira. No celular, o dedo acerta o toque.
65%dos brasileiros conectados usam a internet só pelo celular.Cetic.br · TIC Domicílios 2025
Um painel bem cuidado passa a impressão de um método bem cuidado. O aluno sente o valor antes de ler qualquer número.
46%dos comentários sobre a confiança num site falavam do visual. Foi o critério mais citado.Stanford · Consumer WebWatch, 2002
Os mesmos espaços, cantos e ícones em todas as telas. O aluno aprende o painel uma vez e reconhece o resto, e nada parece improvisado.
50 msbastam para julgar a beleza de uma tela. As simples e familiares saem na frente.Lindgaard et al., 2006 · Google Research, 2012
Onde está
O projeto está no redesenho. Daqui, segue para a validação com o Método OBA.
A nova experiência do painel, no computador e no celular. É o que está nesta página.
83%Após um redesign, estima-se uma melhora média de 83% nos indicadores de desempenho de um produto.Nielsen Norman Group
O Método OBA revisa a proposta e aprova o que entra na primeira versão.
Alunos do Método OBA usam o protótipo, e ajusto o que não ficar claro.
5 alunosjá revelam cerca de 85% dos problemas de usoNielsen Norman Group
O tema já está no código da plataforma, atrás de uma chave desligada. Depois da validação, ele liga em preview e então para todos.
O painel novo no ar para todos os alunos do Método OBA.
Entrega · Design engineering
Não entreguei só telas. Fiz o caminho inteiro de design engineering: a estratégia, o sistema visual, o protótipo em código e o tema implementado em PHP, dentro da plataforma, pronto para ser ligado por etapas.
Design e código saíram da mesma mão. Nada se perde no handoff, e cada decisão desta página já tem o lugar dela no produto.
25pontos de diagnóstico, de D01 a D25
Antes de desenhar, mapeei o painel em 17 documentos: contexto do aluno, tokens, gamificação, voz, diagnóstico e estratégia, com uma ficha para cada um dos 16 componentes. O princípio que guiou tudo: a patente é o tema.
9telas ao vivo nesta página
O protótipo roda sobre o mesmo HTML e CSS do painel de hoje, com o Bootstrap e o jQuery da plataforma. O que se clica aqui já é o caminho para a produção, e não um desenho para alguém reinterpretar.
60casos conferidos contra a versão em JS
Propus e implementei temas por mentor: um manifesto diz o que cada um carrega, e uma chave por ambiente liga o tema em três níveis, desligado, preview e ligado. Desligado é o padrão, então o merge não muda nada em produção. Medalha, sequência e menu em grupos saíram do JavaScript e passaram a vir prontos do servidor.
−43%no avatar 3D: de 532 para 303 KB
O avatar 3D só carrega em computador capaz, roda num Web Worker para não travar a página e volta para um PNG leve se falhar ou ficar lento. Ícones e logo em WebP, fontes no próprio servidor, e o login carrega só o CSS de que precisa, conferido no CI.
Resultado
Ferramentas
Eu levo do diagnóstico a um protótipo que dá para clicar, com design e código, pronto para validar com quem usa.