A construção / Leitura contínua

As decisões
por trás do site.

01 / Olá, sou Fabian

Olá, sou Fabian Umpierre.

Sou Product Designer. Este site também é um projeto.

02 / Você tem pouco tempo

Você provavelmente quer ver meu portfólio antes de conhecer esta história.

Eu imaginei isso. Por isso, criei dois caminhos.

03 / O problema

Todo projeto começa com um problema.

Neste caso, eu queria mostrar como trabalho sem fazer você perder tempo.

Meu processo precisa de contexto. Seu tempo pede um caminho curto. Em vez de forçar os dois a disputar uma única sequência, ofereci acesso direto ao trabalho e um percurso opcional para as decisões.

04 / Perguntas antes das respostas

Eu não tinha todas as respostas.

Na verdade, quase nunca temos.

Quem vai visitar este site?

O que sabemos: Recrutadores, gestores de design e pares são os públicos definidos no brief.
O que pesquisamos: Pesquisas descrevem necessidades diferentes entre quem avalia um portfólio.
Ainda é hipótese: Esses públicos podem preferir níveis diferentes de aprofundamento. Ainda não observei visitantes aqui, para confirmar comt dados estatísticos
O que mudou na interface: Projetos e narrativa têm entradas independentes desde o início.

Referências: Nielsen Norman Group

O que essa pessoa procura?

O que sabemos: O conteúdo disponível inclui contexto, papel e meu porfolio de mercado.
O que pesquisamos: Minhas pesquisas recomendam mostrar tanto o trabalho quanto o raciocínio e a contribuição individual.
Ainda é hipótese: Contexto curto e aprofundamento opcional podem facilitar a avaliação deste portfólio.
O que mudou na interface: O portfólio têm páginas próprias; a construção do site tem um percurso separado.

Referências: Nielsen Norman Group · Interaction Design Foundation

Quanto tempo terá disponível?

O que sabemos: Ainda não medi o tempo das pessoas que visitarão este site.
O que pesquisamos: É recomendável conteúdo fácil de percorrer e sem detalhes desnecessários.
Ainda é hipótese: Parte das visitas pode ser breve. Isso orienta uma escolha, não uma estatística.
O que mudou na interface: O acesso aos projetos não depende de terminar esta história.

Referências: Nielsen Norman Group

Como mostrar experiência sem parecer preso ao passado?

O que sabemos: Longa experiência conectando design, tecnologia, estratégia e pessoas, atravessando diferentes transformações do mundo digital..
O que pesquisamos: Pesquisas reforçam a importância de comunicar competências, processos de pensamento, decisões e resultados, além dos projetos realizados.
Ainda é hipótese: Um portfólio organizado em torno de competências, experiências e aprendizados pode comunicar melhor minha senioridade do que uma sequência tradicional de cases.
O que mudou na interface: O portfólio deixa de ser uma vitrine de projetos para se tornar uma narrativa sobre experiência, interdisciplinaridade, pensamento estratégico, adaptabilidade, autonomia e curiosidade.

Referências: Nielsen Norman Group · Interaction Design Foundation

Quanto do processo vale a pena mostrar?

O que sabemos: Ao avaliar o primeiro protótipo, achei a estrutura convencional demais.
O que pesquisamos: As referências recomendam mostrar processo. Elas não validam esta experiência específica.
Ainda é hipótese: Pequenas demonstrações podem comunicar melhor minhas decisões do que explicações longas.
O que mudou na interface: Nesta iteração, você experimenta as consequências antes de abrir os detalhes.

Referências: Nielsen Norman Group · Interaction Design Foundation · Camara UX

05 / Minha primeira ideia

Minha primeira ideia não funcionou.

Quer dizer, funcionava. Mas não era o que eu queria.

O primeiro protótipo era editorial e vertical. Minha avaliação foi que o conteúdo funcionava, mas a experiência ainda não demonstrava suficientemente a metalinguagem.

Ver os registros reais +

Primeiro protótipo editorial, registro real. — Primeiro protótipo editorial.

Protótipo posterior por estados, registro real. — Protótipo por estados, antes desta iteração.

O problema não era o conteúdo. Era a maneira de contar a história.

06 / Um processo com retornos

“O processo de design é uma linha reta.”

Seria ótimo se fosse. Mas o caminho pode incluir pesquisar, desenhar, testar, errar, revisar e pesquisar novamente. O Design Thinking me ensinou a apreciar as curvas, os desvios e as descobertas que só acontecem quando abandonamos a linha reta.

Às vezes, avançar significa voltar.

07 / Saber o que não fazer

Eu poderia colocar uma animação aqui.

A demonstração interativa aplica escala, rotação e deslocamento a um elemento e depois o restaura. Nenhuma informação nova é acrescentada.

Mas por quê? Nem toda possibilidade técnica precisa virar uma funcionalidade.

08 / Não trabalhei sozinho

Eu não construí este site sozinho.

Aliás, raramente construí alguma coisa sozinho.

A implementação foi feita com auxílio de IA, num processo de vibe coding. Eu defini problema, intenção e critérios, avaliei o resultado e pedi ajustes.

Minha solicitação
“um protótipo editorial do site e do primeiro capítulo da narrativa”
Trecho do pedido real que originou o primeiro protótipo.
Resultado da IA
A primeira proposta tinha conteúdo organizado, seções verticais e uma narrativa editorial.
Há uma captura real no capítulo sobre a primeira ideia.
Minha avaliação
Funcionava, mas a metalinguagem estava tímida. A experiência ainda parecia convencional.
Síntese do meu próprio feedback.
Nova direção
Pedi estados progressivos, elementos que mudam de função e uma interface que demonstra as decisões.
A direção veio da avaliação do protótipo, não de um teste com visitantes, tudo pode mudar ainda.
Resultado refinado
A IA foi bem e implementou o percurso por estados. Depois refinei navegação, ordem, cores e conteúdo a partir do que fui experimentando.
Esta versão continua em avaliação.

09 / Cada escolha tem consequências

Até esta tipografia foi uma decisão.

Você pode experimentar algumas escolhas na própria interface.

A tipografia serifada vem do primeiro estudo editorial; a sem serifa é a escolha atual. As paletas já aparecem no percurso. As novas densidades de espaço são experimentos desta iteração.

A base do sistema foi construída em cooperação: eu direciono e avalio; a IA ajuda a organizar tokens, explorar variações e implementar componentes.

A tecnologia que sustenta a experiência +

Escolhi Next.js e React como base deste site. A escolha entra para dar forma à experiência: organizar páginas, reutilizar componentes e conectar os estados da narrativa. Com a IA, transformei essa direção em uma estrutura funcional e fui avaliando o que ela produzia.

Next.js + React: Páginas próprias para os cases e componentes compartilhados com a narrativa.
Movimento nativo: Transições de posição e escala com a API do navegador. O conteúdo continua disponível com movimento reduzido.
Conteúdo separado: Os relatos dos projetos ficam em arquivos próprios, sem depender da apresentação experimental.

A interface muda. Os critérios permanecem.

10 / Uma trajetória em constante evolução

A tecnologia mudou. Muitas vezes. Eu também.

Trabalho com design digital desde 1999. Nesse tempo, vi tecnologias surgirem, dominarem o mercado e desaparecerem. Precisei aprender, desaprender e começar de novo algumas vezes.

Sou Senior Product Designer e atuo entre estratégia, pesquisa e execução.

Meu trabalho se concentra em estruturar produtos como sistemas funcionais: entender comportamento, regras e fluxos antes de avançar para a interface. Combino pesquisa, modelagem e prototipação para explorar soluções e reduzir incertezas.

Nos últimos anos, incorporei prototipação em código e IA ao processo, para explorar hipóteses e apoiar decisões. Facilitação, design thinking e minha formação no Kaospilot também orientam como colaboro com times de produto, tecnologia e negócio.

Conhecer minhas habilidades

Estratégia e visão de produto

Estratégia de produto, planejamento e levantamento de requisitos. Visão de sistemas, uso de dados e decisões que equilibram pessoas, negócio e viabilidade técnica.

Pesquisa e design

Pesquisa com usuários, testes de usabilidade, UX/UI, design de interação e arquitetura da informação. Prototipação, inclusive de alta fidelidade, e design systems. Atuação prática para explorar problemas complexos e critério para aprofundar ou simplificar.

Colaboração e liderança

Facilitação, discovery e mentoria. Comunicação e relacionamento interpessoal, inteligência emocional, responsabilidade e agilidade para alinhar times e stakeholders.

Ferramentas e construção

Figma, FigJam, Miro e plataformas de analytics. Prototipação em código e fluxos de trabalho assistidos por IA.

1999 · início