Portfolio

Yago
Moreira

UX/UI Designer.

Principais Habilidades

Pesquisa

Entrevistas com usuários, benchmarking e análise de dados para fundamentar decisões de design.

Wireframes e Prototipagem

Criação de wireframes de baixa e alta fidelidade e protótipos interativos no Figma.

Arquitetura da Informação

Organização de conteúdo e fluxos de navegação intuitivos para experiências claras.

Testes de Usabilidade

Validação de soluções com usuários reais, coleta de feedback e iteração contínua.

Explore alguns projetos que já desenvolvi

GymPro

GymPro

Design completo de três produtos digitais integrados para uma rede de academias premium: website, portal do membro e painel operacional.

Bikcraft

Bikcraft

Projeto de UI para a marca Bikcraft, bicicletas premium. Foco em usabilidade, identidade visual e conversão.

Nutrinice

Nutrinice

Projeto de UX/UI (redesign) para o site da Nutrinice. Foco em experiência do usuário, layout moderno e navegação intuitiva.

Ver detalhes
Estudo de caso · UX/UI Design · 2026

GymPro

Desenhando a experiência digital de uma academia premium, do portal do membro ao painel operacional.

Função

UX/UI Designer

Tipo

Redesign de produtos digitais

Ferramentas

Figma, Claude AI

Ano

2026

GymPro — mockup do projeto

01

Contexto

A GymPro é uma academia moderna, desenvolvida para atender clientes de alto padrão, incluindo serviços como academia, spa, piscina, mini-bar e restaurantes, personal trainer, esportes radicais como escalada, lutas, entre outros serviços exclusivos.

Mesmo sendo uma academia com toda a tecnologia, começou a perceber que o controle de membros não está sendo bem feito, e que os clientes estão reclamando sobre o portal de membros.

Outros serviços digitais que a academia vem procurando lançar seria uma loja online para vender produtos da marca, itens e acessórios, porém essa loja seria apenas acessível para membros da academia utilizando o portal.

02

O problema

Como identificamos: comecei com desk research e análise competitiva de Equinox, Barry's e Third Space London. Nenhum oferece portal unificado com controle de acesso físico integrado, painel para recepcionistas ou loja exclusiva — uma oportunidade real de diferenciação.

Em seguida conduzi 6 entrevistas semiestruturadas (3 membros e 3 recepcionistas) usando o protocolo Think Aloud, focando comportamentos reais, não hipotéticos.

Dores da Rafaela (membro): descobria que sua mensalidade estava vencida somente quando a catraca negava o acesso, na frente de outras pessoas. Frase mais repetida: "Eu pago caro e isso deveria ser mais fácil."

Dores do Carlos (recepcionista): no pico das 5h às 7h, com 40 a 60 membros em duas horas, qualquer problema de acesso criava fila imediata. Toda exceção precisava ser anotada em planilha e escalada por ligação.

Dores do negócio: churn silencioso por fricção digital, custo operacional elevado, reclamações no Google e uma loja exclusiva para membros que não existia no digital.

03

A solução

O princípio central foi um: eliminar o momento de crise na catraca, resolvendo o problema antes que ele aconteça. Isso se traduziu em três produtos integrados com um design system unificado.

  • Website público: foco em conversão e identidade premium, com hierarquia editorial clara, três planos com Premium em destaque e prova social visível.
  • Portal do membro: status do cadastro em destaque ("Tudo certo" ou "Ação necessária"), banner de alerta 7 dias antes do vencimento com link direto para renovar, histórico, pagamentos e loja na mesma interface.
  • Painel do recepcionista: ferramenta de trabalho com informação densa, hierarquia de alerta clara e fluxo otimizado — Carlos libera o acesso com um clique e o log é gerado automaticamente. Fim da planilha Excel.
  • Loja exclusiva: primeiro canal digital de produtos para membros Premium — suplementos, vestuário e acessórios com desconto integrado ao plano.

04

O processo

O projeto seguiu as cinco fases do Double Diamond com metodologias aplicadas em cada etapa.

  • Descoberta: desk research, análise competitiva com critérios de UX, 6 entrevistas semiestruturadas (Think Aloud) e 12 perguntas HMW.
  • Definição e síntese: duas personas com mapas de empatia, jornadas com momentos de crise destacados, JTBD no padrão "Quando X, quero Y, para Z" e matriz MoSCoW para o MVP.
  • Arquitetura de informação: sitemap dos três produtos, dois user flows críticos detalhados e card sorting para definir hierarquia.
  • Prototipação: progressão lo-fi → mid-fi → Hi-Fi com design system documentado (tokens, escala tipográfica, componentes) e validação por Heurísticas de Nielsen e checklist WCAG.
  • Testes e validação: 5 sessões moderadas com tarefas baseadas em jornadas, SUS aplicado ao final, Affinity Diagram para consolidar insights e três melhorias críticas implementadas.

05

Como usei IA no projeto

Usei Claude AI de forma intencional em etapas específicas, sempre com análise crítica dos outputs gerados. A IA acelerou a produção do esqueleto; eu preenchi com evidência real.

  • Síntese de pesquisa e categorização de insights de entrevistas
  • Estruturação de personas, mapas de empatia e jornadas
  • Exploração de alternativas de sitemap e hierarquia de navegação
  • Prototipagem em HTML e CSS para testes reais com usuários
  • Co-criação de roteiro de usabilidade e narrativa do case

O que não foi delegado à IA: pesquisa com usuários, entrevistas, decisões de design, validação e julgamento crítico. A responsabilidade das decisões foi sempre minha.

06

Impacto e aprendizado

  • SUS Score: 78/100 — acima do benchmark "bom" da indústria (68). Meta pós-iteração: 85 ("excelente").
  • Renovação em 2 cliques: todos os 5 participantes completaram a tarefa sem ajuda.
  • Menos de 3 segundos do alerta ao acesso liberado no painel do Carlos.
  • Diferencial competitivo: painel do recepcionista e loja exclusiva integrada não existem em nenhum dos três concorrentes analisados.

Aprendizado mais importante: o problema do briefing "controle de entrada e saída" era um sintoma. A causa raiz era ausência de comunicação proativa. A maior melhoria de experiência veio da notificação enviada 7 dias antes do vencimento. Design preventivo tem impacto emocional maior do que qualquer solução reativa.

Estudo de caso

Nutrinice

Redesign de UX/UI do site da Nutrinice, com foco em criar uma experiência mais clara, moderna e intuitiva para os usuários.

Função

UX/UI Designer

Tipo

Redesign de site

Ferramentas

Figma

Ano

2025

Nutrinice

01

Visão geral

A Nutrinice é uma marca do segmento de alimentação saudável que buscava modernizar sua presença digital. O site original apresentava limitações de navegação, hierarquia visual confusa e baixa conexão com a identidade da marca.

Este projeto teve como propósito repensar a experiência do usuário, reorganizar a arquitetura de informação e propor uma interface visualmente alinhada ao posicionamento atual da marca.

02

Objetivo principal

Reestruturar a arquitetura de informação para reduzir fricção na navegação e adequar a experiência ao perfil do público-alvo — usuários com menor familiaridade digital, que demandam clareza estrutural, hierarquia visual consistente e caminhos de navegação previsíveis.

  • Reorganizar a taxonomia de categorias e a estrutura de menus para eliminar ambiguidades e reduzir o número de cliques até o produto
  • Padronizar padrões de interação ao longo do site para reduzir a carga cognitiva do usuário durante a jornada de compra

03

Pesquisa e descoberta

A fase inicial envolveu análise heurística do site existente, benchmarking com concorrentes do setor de alimentos saudáveis e mapeamento dos principais fluxos de navegação.

Foram identificados pontos de fricção como excesso de informação na página inicial, falta de destaque para produtos e baixa consistência visual entre seções.

04

Soluções e recursos de design

A partir dos insights, foi construído um novo sistema visual com tipografia mais legível, paleta refinada e componentes reutilizáveis. A arquitetura foi reorganizada para priorizar produtos, marca e conteúdos institucionais.

  • Hierarquia visual clara e consistente
  • Microinterações para reforçar a navegação

05

Impacto e aprendizagem

O redesign resultou em uma interface mais alinhada à proposta da marca, com fluxos simplificados e maior clareza na comunicação dos produtos. O processo reforçou a importância de equilibrar pesquisa, estética e usabilidade em projetos de redesign.

Como aprendizado, destaco o valor de validar hipóteses cedo e iterar com base em feedback, mantendo o usuário no centro de cada decisão de design.