Meta Case · Product Thinking · 2025-Present Case Meta · Mentalidade de Produto · 2025-Hoje

The portfolio is the product. O portfólio é o produto.

Most portfolios ship once and freeze. I treat mine as a live product: instrumented with Microsoft Clarity, usability-tested with real people, and improved release after release. This is the case study of the site you're reading it on. A maioria dos portfólios é publicada uma vez e congela. Eu trato o meu como produto vivo: instrumentado com Microsoft Clarity, testado com pessoas reais e melhorado versão após versão. Este é o case do próprio site em que você está navegando.

Product Thinking Mentalidade de Produto Microsoft Clarity Usability Testing Teste de Usabilidade SUS 86.9 HTML · CSS · JS i18n EN/PT
RoleFunção
Designer, developer & researcherDesigner, desenvolvedor & pesquisador
Stack
HTML/CSS/JS, no framework, AI in the loopHTML/CSS/JS, sem framework, IA no processo
MethodMétodo
Clarity analytics + moderated testsAnalytics do Clarity + testes moderados
Status
Live, always shippingNo ar, sempre entregando
86.9
SUS "excellent", SteamAI project test (n=18)SUS "excelente", teste do projeto SteamAI (n=18)
+56
Portfolio NPS, same testNPS do portfólio, no mesmo teste
83%
would hire after reading the casecontratariam após ler o case
-80%
gallery page weight (41MB → 8MB)peso da galeria (41MB → 8MB)

Real commits from this site's repository. The bold ones came straight from watching users. Commits reais do repositório deste site. Os em negrito nasceram de observar usuários.

A portfolio has users, and they are in a hurry Um portfólio tem usuários, e eles têm pressa

A recruiter gives a portfolio a few minutes, sometimes less. That makes this site a product with a very clear job: help a busy stranger decide, fast, whether I can do the work. Every friction point here costs me an interview somewhere.

Um recrutador dá alguns minutos a um portfólio, às vezes menos. Isso faz deste site um produto com um trabalho bem claro: ajudar um estranho ocupado a decidir, rápido, se eu dou conta do trabalho. Cada ponto de atrito aqui me custa uma entrevista em algum lugar.

So I run it like a product. It has instrumentation (Microsoft Clarity), a research base (a moderated usability test with 18 people), a backlog, and a changelog. When the data shows friction, I ship a fix. This page documents that loop.

Então eu toco o site como produto. Ele tem instrumentação (Microsoft Clarity), base de pesquisa (um teste de usabilidade moderado com 18 pessoas), backlog e changelog. Quando os dados mostram atrito, eu entrego uma correção. Esta página documenta esse ciclo.

I didn't settle for a portfolio that just sits there. If I ask clients to iterate, I have to iterate on myself first. Não me aquietei com um portfólio parado. Se eu peço iteração aos clientes, tenho que iterar em mim primeiro.

Watching real sessions with Microsoft Clarity Assistindo sessões reais com Microsoft Clarity

Every page of this site runs Microsoft Clarity: session recordings, heatmaps, and frustration signals. I review sessions regularly, looking at how far people scroll, where they hesitate, and what they try to click.

Todas as páginas deste site rodam Microsoft Clarity: gravações de sessão, mapas de calor e sinais de frustração. Eu reviso sessões com frequência, olhando até onde as pessoas rolam, onde hesitam e o que tentam clicar.

The most valuable signal so far has been the humblest one: the dead click. When someone clicks a static element, they're telling me the interface promised something it didn't deliver.

O sinal mais valioso até agora foi o mais humilde: o dead click. Quando alguém clica num elemento estático, está me dizendo que a interface prometeu algo que não entregou.

  • Dead clicks: clicks on things that look interactive but aren't Dead clicks: cliques em coisas que parecem interativas mas não são
  • Scroll depth: how far each case study actually gets read Profundidade de rolagem: até onde cada case é lido de verdade
  • Rage clicks & quick-backs: frustration and instant exits Rage clicks & retornos rápidos: frustração e saídas imediatas
  • Device split: mobile sessions get the same care as desktop Divisão por dispositivo: sessões mobile recebem o mesmo cuidado do desktop
  • Language: where visitors come from vs. the language they get Idioma: de onde os visitantes vêm vs. o idioma que recebem

Signal in, fix out: four shipped examples Sinal entra, correção sai: quatro exemplos entregues

Each of these started as a frustration signal from a real visitor and ended as a commit. No redesign-for-redesign's-sake: every change traces back to something a user did. Cada um destes começou como um sinal de frustração de um visitante real e terminou como um commit. Nada de redesign por redesign: toda mudança nasce de algo que um usuário fez.

Clarity · dead clicksClarity · dead clicks
People kept clicking a static mockup As pessoas insistiam em clicar num mockup parado
Recordings showed visitors clicking the SteamAI hero wireframe expecting it to respond. They were right to expect it. Fix: I rebuilt it as a working interactive prototype, with an entry state, suggestion chips, and animated results. The dead clicks became the feature. As gravações mostravam visitantes clicando no wireframe do herói do SteamAI esperando resposta. Eles tinham razão em esperar. Correção: reconstruí como protótipo interativo funcional, com estado de entrada, chips de sugestão e resultados animados. Os dead clicks viraram a funcionalidade.
Performance · page weightPerformance · peso de página
A 41MB gallery was punishing mobile visitors Uma galeria de 41MB castigava quem estava no celular
The Santa Maria case shipped with 41MB of PNGs, brutal on mobile connections. Fix: recompressed the entire gallery to ~8MB of optimized JPGs, about 80% lighter, with no visible quality loss on the posts. O case Santa Maria foi ao ar com 41MB de PNGs, brutal em conexão de celular. Correção: recomprimi a galeria inteira para ~8MB de JPGs otimizados, cerca de 80% mais leve, sem perda visível de qualidade nos posts.
Audience · languageAudiência · idioma
Brazilian recruiters were landing on an English-only site Recrutadores brasileiros caíam num site só em inglês
I apply to jobs in Brazil and abroad, but the site spoke one language. Fix: full EN/PT internationalization, with flash-free language detection (saved choice, then browser language) and a persistent toggle in the nav. Eu me candidato a vagas no Brasil e fora, mas o site falava uma língua só. Correção: internacionalização completa EN/PT, com detecção de idioma sem flash (escolha salva, depois idioma do navegador) e um toggle persistente na nav.
Mobile · layout
The contact panel was breaking on small screens O painel de contato quebrava em telas pequenas
The one section that converts (the contact CTA) had layout issues on mobile, exactly where a recruiter is most likely to skim from. Fix: rebuilt the panel's responsive behavior. The conversion point now works on every screen I can get my hands on. A única seção que converte (o CTA de contato) tinha problemas de layout no mobile, justamente de onde um recrutador tem mais chance de dar uma olhada. Correção: refiz o comportamento responsivo do painel. O ponto de conversão agora funciona em toda tela que eu consigo testar.

18 people, moderated sessions, honest numbers 18 pessoas, sessões moderadas, números honestos

Analytics shows where people struggle; it rarely says why. So I ran a moderated remote usability test of the portfolio's flagship project, SteamAI, with 18 participants across 7 profiles, from UX designers and developers to founders and people outside tech, each briefed to evaluate me as a candidate. The thesis had started theoretical; this test gave the project real users and real metrics.

O analytics mostra onde as pessoas travam; raramente diz por quê. Então conduzi um teste de usabilidade moderado e remoto do projeto principal do portfólio, o SteamAI, com 18 participantes de 7 perfis, de designers UX e desenvolvedores a empresários e pessoas fora da tecnologia, cada um orientado a me avaliar como candidato. A tese tinha nascido teórica; esse teste deu ao projeto usuários reais e métricas reais.

The scores came back strong (SUS 86.9, "excellent"). To be honest about scope: the SUS measures the SteamAI project; the NPS and the hiring question speak to the portfolio as a whole. The open feedback was the real payload: the problem statement felt buried, the process lacked signposting, and people wanted results sooner. I redesigned the case around those three complaints. The full method and task table live on the SteamAI case.

As notas vieram fortes (SUS 86.9, "excelente"). Sendo honesto com o escopo: o SUS mede o projeto SteamAI; o NPS e a pergunta de contratação falam do portfólio como um todo. O feedback aberto foi o ouro de verdade: o problema parecia enterrado, o processo não tinha sinalização e as pessoas queriam os resultados mais cedo. Redesenhei o case em torno dessas três reclamações. O método completo e a tabela de tarefas estão no case SteamAI.

Finding · 33%Achado · 33%
"The problem feels buried""O problema parece enterrado"
Shipped: an executive summary at the top with problem, solution, and outcome in 30 seconds.Entregue: um resumo executivo no topo com problema, solução e resultado em 30 segundos.
Finding · 28%Achado · 28%
"I can't see the process""Não consigo ver o processo"
Shipped: a visual process timeline, from research to validation, right after the summary.Entregue: uma timeline visual do processo, da pesquisa à validação, logo após o resumo.
Finding · 22%Achado · 22%
"Where are the results?""Cadê os resultados?"
Shipped: headline numbers moved to the first screen instead of waiting at the end.Entregue: os números principais foram para a primeira tela em vez de esperar no fim.

Why this matters beyond a portfolio: this is the same loop I bring to any product team. Instrument, watch real behavior, test with real people, prioritize by evidence, ship, and measure again. The artifact happens to be my own site; the discipline is the job.

Por que isso importa além de um portfólio: este é o mesmo ciclo que eu levo para qualquer time de produto. Instrumentar, observar comportamento real, testar com pessoas reais, priorizar por evidência, entregar e medir de novo. O artefato por acaso é o meu próprio site; a disciplina é o trabalho.

Built by me, with AI in the loop Feito por mim, com IA no processo

No framework, no template, no site builder: plain HTML, CSS, and JavaScript, with AI in the loop. Cursor and Claude Code worked as my pair programmers, and I treated what they produced like any code review: I questioned it, edited it, and rejected plenty. The decisions stayed mine, and owning them is what makes iteration cheap. When Clarity flags a problem, the fix is one commit away.

Sem framework, sem template, sem construtor de sites: HTML, CSS e JavaScript puros, com IA no processo. Cursor e Claude Code trabalharam como meus pares de programação, e eu tratei o que eles produziam como qualquer code review: questionei, editei e rejeitei bastante coisa. As decisões continuaram minhas, e ser dono delas é o que barateia a iteração. Quando o Clarity aponta um problema, a correção está a um commit de distância.

The hand-drawn doodle layer (scribble underlines, checker tape, wiggling stars) exists for the same reason as everything else here: differentiation you can defend. Clean, generic portfolios all look the same. This one looks like me.

A camada de rabiscos feitos à mão (sublinhados rabiscados, fita quadriculada, estrelas que balançam) existe pelo mesmo motivo de todo o resto: diferenciação que se defende. Portfólios limpos e genéricos são todos iguais. Este parece comigo.

Accessible by default Acessível por padrão
Keyboard-operable prototypes, ARIA labels, and full prefers-reduced-motion support: every animation on the site switches off for people who need it to. Protótipos operáveis por teclado, rótulos ARIA e suporte completo a prefers-reduced-motion: toda animação do site se desliga para quem precisa.
Bilingual, no flash Bilíngue, sem flash
EN/PT detection runs synchronously in the head, so the page never flashes the wrong language. The choice persists across visits. A detecção EN/PT roda de forma síncrona no head, então a página nunca pisca no idioma errado. A escolha persiste entre visitas.
Light where it counts Leve onde importa
Lazy-loaded images, compressed galleries, and CSS-drawn cover art instead of heavy screenshots. Recruiters on hotel Wi-Fi deserve love too. Imagens com lazy loading, galerias comprimidas e capas desenhadas em CSS no lugar de screenshots pesados. Recrutador em Wi-Fi de hotel também merece carinho.

You just watched me work. Want this on your product? Você acabou de me ver trabalhando. Quer isso no seu produto?

Open to full-time, part-time, or freelance opportunities. Aberto a oportunidades full-time, part-time ou freelance.

WorkTrabalhos