Blog
23 de abr. de 2025 - 8 MIN DE LEITURA
Do Mockup ao Mercado: Meu Processo de Design de Produto

Do Mockup ao Mercado: Meu Processo de Design de Produto

Uma análise detalhada da minha metodologia de design iterativo, desde a pesquisa inicial até a entrega final, com dicas práticas para designers em todas as etapas.

Jay Ho Oh

Jay Ho Oh

Criar produtos digitais de sucesso não se trata de seguir uma fórmula rígida — trata-se de desenvolver uma estrutura flexível que se adapte aos desafios únicos de cada projeto. Após refinar minha abordagem em dezenas de produtos, desenvolvi um processo que entrega resultados de forma consistente, deixando espaço para a criatividade e a iteração.

Neste artigo, vou apresentar meu processo de design de ponta a ponta, desde a descoberta inicial até o handoff para o desenvolvedor, usando meu trabalho recente no aplicativo EcoTrack como estudo de caso.

Fase 1: Descoberta e Pesquisa

Todo grande produto começa com a compreensão do problema que ele tenta resolver. Para o EcoTrack, nosso desafio era criar uma maneira envolvente de os usuários acompanharem seu impacto ambiental sem se sentirem sobrecarregados por culpa ou dados complexos.

Entrevistas com Usuários

Comecei realizando entrevistas com 12 usuários em potencial de diferentes perfis demográficos, focando em seus hábitos atuais e atitudes em relação à sustentabilidade. Essas conversas revelaram um insight crucial: a maioria das pessoas queria fazer escolhas ecologicamente corretas, mas se sentia paralisada pela complexidade de calcular seu impacto.

"Eu me preocupo com o meio ambiente, mas não tenho ideia se usar uma sacola de papel é realmente melhor do que o plástico, ou se minha garrafa de água reutilizável faz alguma diferença." — Participante da entrevista

Análise Competitiva

Em seguida, analisei aplicativos de sustentabilidade existentes, criando uma matriz de comparação de recursos para identificar lacunas e oportunidades. A maioria dos concorrentes focava no cálculo da pegada de carbono, mas falhava em fornecer orientações práticas ou reforço positivo.

Definindo o Sucesso

Antes de abrir o Figma, colaborei com os stakeholders para definir métricas de sucesso claras:

  • Aumentar o uso diário ativo em 40%
  • Melhorar a compreensão relatada pelos usuários sobre o impacto ambiental
  • Impulsionar mudanças de comportamento mensuráveis em pelo menos duas categorias de sustentabilidade

Fase 2: Ideação e Conceitualização

Com uma compreensão sólida do espaço do problema, passei para a fase criativa do processo.

Esboços

Eu sempre começo com papel e caneta, explorando rapidamente diferentes abordagens sem as restrições das ferramentas digitais. Para o EcoTrack, preenchi três cadernos de esboços com conceitos que iam de experiências gamificadas a dashboards repletos de dados.

Arquitetura de Informação

Com base nos insights da pesquisa, desenvolvi uma arquitetura de informação centrada no usuário que priorizava a simplicidade e informações acionáveis:

  1. Dashboard — Visão geral personalizada com insights de impacto imediato
  2. Daily Tracker — Registro simples de atividades com feedback imediato
  3. Impact Journey — Visualização do progresso ao longo do tempo
  4. Action Center — Recomendações personalizadas baseadas no comportamento do usuário

Princípios de Design

Estabeleci quatro princípios fundamentais de design para guiar todas as decisões:

  • Simplificar a complexidade — Traduzir o impacto ambiental em unidades compreensíveis
  • Celebrar o progresso — Focar no reforço positivo em vez da culpa
  • Permitir escolhas informadas — Fornecer contexto para a tomada de decisão
  • Design para formação de hábitos — Criar loops de interação satisfatórios

Fase 3: Prototipagem e Testes

Com a estrutura conceitual estabelecida, passei para o ciclo iterativo de prototipagem e testes.

Wireframes de Baixa Fidelidade

Criei wireframes focados nos fluxos do usuário e na hierarquia da informação, mantendo deliberadamente o design visual minimalista para concentrar o feedback na funcionalidade e na estrutura.

Teste de Usuário (Rodada 1)

O teste de wireframes com 8 participantes revelou vários insights importantes:

  • Usuários queriam feedback mais imediato ao registrar atividades
  • A visualização de impacto não era intuitiva para a maioria dos usuários
  • As pessoas ficaram confusas com a terminologia ambiental técnica

Protótipos de Média Fidelidade

Com base no feedback dos testes, refinei o conceito e desenvolvi protótipos interativos com mais detalhes visuais, focando em:

  • Visualização de dados simplificada usando metáforas familiares
  • Reforço positivo imediato para as atividades registradas
  • Divulgação progressiva de informações ambientais mais complexas

Teste de Usuário (Rodada 2)

Uma segunda rodada de testes mostrou melhorias significativas na usabilidade, mas destacou novos desafios:

  • Usuários queriam comparar seu impacto com amigos ou médias da comunidade
  • Resumos semanais foram mais motivadores do que estatísticas diárias
  • O processo de onboarding pareceu muito longo

Fase 4: Design Visual e Refinamento

Com a experiência principal validada, passei para o design visual de alta fidelidade.

Linguagem Visual

Desenvolvi uma linguagem visual que equilibrava acessibilidade com credibilidade:

  • Uma paleta de cores inspirada na natureza com codificação de cores funcional clara
  • Iconografia personalizada que simplificava conceitos complexos
  • Tipografia que priorizava a legibilidade em diversos dispositivos
  • Microinterações que proporcionavam satisfação e reforço

Design System

Para garantir a consistência e facilitar o desenvolvimento, criei um design system abrangente, incluindo:

  • Biblioteca de componentes com estados e comportamentos documentados
  • Diretrizes de layout responsivo
  • Especificações de animação
  • Padrões de acessibilidade

Protótipo Final

O protótipo final reuniu todos os elementos em uma experiência coesa, que testamos com um grupo de usuários mais amplo antes de seguir para o desenvolvimento.

Fase 5: Implementação e Iteração

O processo de design não termina quando o desenvolvimento começa — ele evolui.

Colaboração com Desenvolvedores

Trabalhei de perto com os desenvolvedores durante toda a implementação, participando de revisões de código e ajustando os designs para lidar com restrições técnicas, preservando a experiência principal.

Implementação de Analytics

Integramos analytics para acompanhar nossas métricas de sucesso, configurando dashboards para monitorar interações importantes e jornadas do usuário.

Iteração Pós-Lançamento

Após o lançamento, estabelecemos um ciclo regular de análise e iteração:

  • Revisões semanais de feedback e dados de comportamento
  • Sprints de design quinzenais para resolver problemas emergentes
  • Planejamento mensal de recursos baseado em padrões de uso

Resultados e Aprendizados

Seis meses após o lançamento, o EcoTrack superou nossas métricas iniciais de sucesso:

  • aumento de 52% no uso diário ativo
  • 78% dos usuários relatam uma melhor compreensão de seu impacto ambiental
  • O usuário médio adotou 3.4 novos hábitos sustentáveis

A lição mais valiosa deste projeto foi a importância de tornar conceitos abstratos tangíveis. Ao traduzir dados ambientais complexos em insights pessoais e acionáveis, criamos uma experiência que não apenas educou os usuários, mas os capacitou a fazer mudanças significativas.

Conclusão

O design de produto eficaz nunca é uma jornada linear — é um ciclo contínuo de aprendizado e refinamento. Ao manter o foco nas necessidades do usuário e adotar uma abordagem flexível para a resolução de problemas, podemos criar produtos que não apenas atendem aos objetivos de negócio, mas melhoram genuinamente a vida das pessoas.

Eu adoraria saber mais sobre o seu próprio processo de design e como você aborda desafios semelhantes. Sinta-se à vontade para entrar em contato com dúvidas ou compartilhar suas experiências nos comentários abaixo.

Construído com Nuxt UI • © 2026