Home Projetos Contato
Educação Médica · Primum · 2025–2026

Aristo

Site institucional completo para uma das maiores plataformas de preparação para residência médica do Brasil.

Papel
Solo, UX · Visual · Copy
Escopo
8 páginas · Desktop + Mobile
O Problema

A Aristo tinha autoridade clínica reconhecida no mercado, metodologia sólida, professores médicos, produto validado. Mas a presença digital não estava à altura. O site existente não refletia a profundidade da plataforma, não tinha jornada clara e tratava públicos completamente diferentes como se fossem um só.

Médicos que precisam revalidar diplomas e estudantes na reta final da faculdade têm ansiedades, vocabulários e decisões de compra completamente diferentes. Isso precisava de tratamento separado.

Decisões de Design
  • 01
    Arquitetura orientada por momento, não por produto Os cursos foram organizados por quanto tempo o aluno tem até a prova, Preparação a longo prazo / Ano da preparação / Reta Final. O aluno encontra o curso certo pelo contexto da vida dele, não por nome ou preço.
  • 02
    Revalida como seção própria, não como filtro Médicos com diploma estrangeiro têm um processo totalmente diferente, com legislação, timelines e inseguranças próprias. Criar uma seção dedicada com linguagem, mapa e trilha específica foi a decisão que mais diferenciou o projeto.
  • 03
    Central de Editais como produto, não página Filtros funcionais por instituição, tipo de prova (ENARE/SURCE/REVALIDA), status e data. Uma ferramenta real que o aluno usa ativamente, não um bloco de texto informativo.
  • 04
    CTA anchor consistente em todas as páginas "Vamos construir sua aprovação juntos?" aparece em todas as 8 páginas, ancora a conversão sem interromper o fluxo editorial de cada seção.
  • 05
    Metodologia Pareto como narrativa de posicionamento A metodologia (6 pilares) não foi apresentada como lista de features. Foi o argumento central do hero, o "por quê" antes do "o quê".
Resultado

Sistema de design do zero, 8 páginas desktop + mobile completas, copy de todas as seções, entregue em projeto solo. O site reflete a autoridade clínica da Aristo com estrutura que guia o aluno pelo momento certo de compra.

Próximo projeto
Identidade Visual · Motion Design · 2023

Cap.co

Identidade visual e motion design para a Cap.co, marca com linguagem animada, sistema de cor forte e movimento como parte central da comunicação.

Papel
Direção · Identidade · Motion
Escopo
Brand system completo
Entrega
Brand + Assets
Literatura, além da leitura

A Cap.co surgiu a partir da ideia de criar uma editora colaborativa de publicações independentes e uma plataforma digital na qual fosse possível o compartilhamento de ideias de forma democrática e focada no público brasileiro. A proposta era incentivar estudantes, professores, pesquisadores e amantes do universo do design e da arte a divulgarem seus trabalhos, compartilharem experiências e disseminarem suas ideias em prol da democratização do conhecimento e da valorização dos produtores e narrativas independentes do Brasil.

O Desafio

A Cap.co precisava de uma identidade que comunicasse agilidade e precisão sem cair no genérico. O desafio era construir uma marca onde o movimento fosse funcional, não decorativo, e cada animação tivesse uma razão estrutural dentro do sistema.

Mais do que logo e paleta, era preciso definir como a marca se comporta em redes, apresentações, peças comerciais e interfaces. Todas precisavam reconhecer a Cap.co de longe, mesmo sem texto.

Decisões de Design
  • 01
    Motion como linguagem, não como efeito As animações foram definidas antes dos estáticos, o movimento revelou a lógica da marca mais rápido do que qualquer grid ou paleta. Toda peça estática é um frame-chave desse sistema.
  • 02
    Sistema reduzido de cor para máxima legibilidade Paleta enxuta com alto contraste, pensada tanto para estáticos quanto para o movimento, em especial nos formatos pequenos (stories, feeds, ícones de app), onde cor genérica seria o primeiro sintoma de marca fraca.
  • 03
    Símbolo que funciona como loop, não como assinatura O marcador da Cap.co foi desenhado para respirar, tem estado inicial, estado em movimento e retorno. Vira abertura, transição e fechamento sem precisar de versão alternativa.
  • 04
    Sistema aplicado em estáticos, keyframes e assinaturas A entrega foi além do logotipo: incluiu peças estáticas com assinatura consistente, carrosséis, capas de apresentação e abertura animada, provando o sistema em todos os contextos reais de uso antes da entrega.
Resultado

Identidade visual completa com sistema de motion integrado. A Cap.co passou a ter comportamento reconhecível em qualquer formato, redes sociais, apresentações, peças comerciais e aberturas, com consistência que não depende de logo aparecer em tela para a marca ser identificada.

Próximo projeto
EdTech Saúde Mental · Primum · 2025–2026

CBI

Ecossistema digital completo para a maior plataforma de educação em saúde mental do Brasil.

Papel
UX · Visual · Sistema de design
Escopo
5 páginas · 10 cursos · Desktop + Mobile
O Problema

O CBI, vinculado à Primum, precisava de uma presença digital que refletisse a autoridade que já tinha no mercado de saúde mental. A plataforma oferece pós-graduações altamente especializadas em autismo, ABA, neurodivergência e educação especial, para um público que é simultaneamente exigente no conteúdo e sensível ao posicionamento institucional.

O desafio não era só um site bonito: era criar um sistema que vendesse formação acadêmica de alto padrão, exibisse credenciais internacionais sem parecer arrogante, e guiasse o profissional de saúde, que não tem tempo, até o curso certo no menor número de cliques.

Decisões de Design
  • 01
    Metodologia VAHA como âncora de credibilidade Em vez de listar features da plataforma, a metodologia proprietária (VAHA) foi colocada na home como argumento central. Dá nome ao diferencial e cria identidade de marca antes de falar em preço ou cursos.
  • 02
    Catálogo organizado por área clínica, não por formato Os cursos foram agrupados por especialidade, Autismo, Educação e Neurociência, Neurodivergências, espelhando o vocabulário do profissional de saúde, não a taxonomia interna da empresa. Quem chegou com um problema clínico encontra o curso sem fricção.
  • 03
    Páginas individuais de curso como páginas de venda Cada um dos 10 cursos tem página própria com grade curricular completa, professores especializados, preço parcelado, FAQ e cursos relacionados. Nenhum redirecionamento externo, a decisão de compra completa dentro do ecossistema CBI.
  • 04
    Certificações internacionais como sistema visual, não lista ASA, NAS, USDLA, AAUP, ABED, EADL, FDLA foram apresentadas com logos, não como texto. O profissional reconhece instantaneamente o peso institucional sem precisar ler o nome completo de cada entidade.
  • 05
    Dream Team como prova de especialidade, não de quantidade A seção de professores na página Sobre não é um grid de fotos genérico. Cada professor tem contexto de especialidade, o argumento é "quem ensina", não "quantos professores temos".
Resultado

Ecossistema completo com 5 tipos de página + 10 landing pages de curso, desktop e mobile. O site traduz a autoridade científica do CBI em experiência de navegação, da home ao checkout. Sistema de design unificado sob a identidade Primum com identidade visual própria do CBI.

Próximo projeto
Edtech | Faculdade · Rocketseat × UniFECAF · 2024

Rocketseat
× UniFECAF

Concepção de duas graduações inéditas, IA & Automação Digital e Gestão da Educação 4.0. Do produto (Lean Canvas, grade curricular, esteira de captação) até a LP de conversão.

Papel
Produto · Currículo · LP
Escopo
2 graduações · LP + planejamento
Parceiros
Rocketseat · UniFECAF
O Desafio

A Rocketseat e a UniFECAF decidiram lançar duas novas graduações, IA & Automação Digital e Gestão da Educação 4.0. Cada uma começava do zero: sem produto definido, sem matriz curricular, sem esteira de captação e sem página para converter alunos.

O escopo ia muito além de uma LP. Era preciso desenhar o produto educacional, quem é o avatar, qual a proposta de valor, que dores resolve, quais disciplinas compõem a jornada e como os alunos entram no funil, antes que qualquer pixel de marketing fizesse sentido.

Decisões de Design
  • 01
    Produto Report antes de qualquer disciplina Cada graduação começou por um mapa único, público-alvo, vertical de negócio, dores, solução, concorrência, estrutura, pontos sensíveis e proposta de valor. Só com esse retrato pronto é que currículo, preço e captação começaram a ser desenhados.
  • 02
    Lean Canvas + AI Business Lab como tese de curso Para a graduação em IA & Automação, a própria tese pedagógica virou o diferencial: o aluno monta o Lean Canvas do próprio projeto dentro do AI Business Lab, a grade forma empreendedores, não só usuários de ferramentas.
  • 03
    Esteira de captação desenhada em paralelo à grade Módulos, active learning, hands-on, interação pedagógica e networking foram modelados como fluxo. A jornada do aluno foi planejada do primeiro contato até a matrícula, no mesmo board que define o que ele vai aprender.
  • 04
    Planejamento de turmas em escala real (P1–P9, OP1–OP9) O calendário operacional foi montado de Maio a Março cobrindo turmas principais e opcionais, com estrutura de up-sell clara. Sai do território de apresentação comercial e entra em plano de operação.
  • 05
    LP com DNA Rocketseat para falar com o não-técnico A página de captação da IA & Automação adota o escuro + roxo da Rocketseat como selo de credibilidade tech, com argumento central "mude de nível sem precisar aprender a programar" e bolsa de 55% como gancho de entrada.
Resultado

Dois produtos educacionais desenhados de ponta a ponta. Produto Report, grade curricular, Lean Canvas, esteira de captação e plano de turmas para as duas graduações, somados à LP de conversão com identidade Rocketseat para a IA & Automação Digital. Entregue como pacote integrado: estratégia do curso e material de marketing nasceram do mesmo board.

Próximo projeto
Ferramenta · Plugin Figma · 2024

html-para-figma

Plugin Figma que importa qualquer URL como frames editáveis, converte HTML/CSS em Auto Layout, preserva imagens, tipografia e espaçamentos.

Papel
Design · Desenvolvimento
Escopo
Plugin Figma · TypeScript
Status
Build ok · Publicável
O Problema

Toda vez que um designer precisa recriar um site ou página web no Figma, para análise de concorrente, redesign ou benchmark, o processo é manual: printscreen, recorte, ajuste de layer por layer. Para páginas longas isso leva horas.

O plugin resolve isso com uma única URL: o HTML é parseado, convertido em frames com Auto Layout e importado diretamente no canvas, pronto para editar.

Como funciona
  • 01
    postMessage bridge entre UI e plugin A UI do plugin roda num iframe sandboxed. O HTML da página-alvo é carregado lá, parseado no DOM real do navegador, e os dados estruturados são enviados via postMessage para o código do plugin que escreve no Figma.
  • 02
    CORS proxy com fallback triplo Quando a URL bloqueia cross-origin direto, o plugin tenta três proxies em sequência (corsproxy.io → allorigins.win → codetabs.com) antes de falhar, maximizando compatibilidade sem intervenção do usuário.
  • 03
    SSRF guard contra URLs maliciosas Antes de qualquer fetch, a URL é validada contra uma blocklist de IPs privados, loopback, link-local e cloud metadata endpoints, o plugin só acessa hosts públicos.
  • 04
    Limite de 15.000 nós e 20 MB de imagens Páginas grandes colidem com os limites de memória do Figma. O plugin rastreia nodeCount e imgFetchBudget em tempo real e corta a importação antes de travar o app.
Resultado

Plugin funcional com build ok, pronto para publicação na Figma Community. Reduz de horas para segundos o processo de recriar uma página web no Figma, com layout, imagens e tipografia preservados.

Próximo projeto
Editorial · Cultura · 2023

Hip-Hop
Delas

Projeto editorial que documenta e celebra a presença feminina no hip-hop brasileiro, da identidade visual à diagramação e sistema tipográfico.

Papel
Direção · Editorial · Tipografia
Escopo
Publicação editorial
Tema
Cultura · Hip-Hop
O Projeto

Hip-Hop Delas surgiu da necessidade de criar um registro visual à altura de uma cena subestimada. O projeto precisava de uma linguagem gráfica que fosse ao mesmo tempo politicamente comprometida e esteticamente sofisticada, sem romantizar nem diluir a força do movimento.

O sistema tipográfico e a paleta foram desenvolvidos para funcionar tanto em impressão quanto em formatos digitais, permitindo que o projeto vivesse em múltiplos contextos.

Decisões de Design
  • 01
    Tipografia como elemento identitário A escolha tipográfica foi o primeiro sistema a ser definido, antes da paleta. O tipo carrega a tensão entre o urbano e o refinado que define a proposta editorial e dá voz para as MCs sem trocar gíria por elegância gráfica vazia.
  • 02
    Grid com ritmo visual intencional O layout foi construído com margens e entrelinhamento que criam pausas, o design não compete com o conteúdo, amplifica. Cada página respeita o tempo de leitura de uma cena de rap: verso, respiro, próxima colocação.
  • 03
    Fotografia tratada como arquivo, não como moldura As imagens foram editadas com granulação e alto contraste para criar a sensação de registro documental, não releitura estética. A prioridade é que o material sobreviva como documento histórico da cena feminina no hip-hop brasileiro.
  • 04
    Cor como posicionamento político Paleta enxuta e carregada que conversa com o grafite e a serigrafia de rua, não com o catálogo de moda. O sistema cromático nasce do contexto onde o hip-hop nasceu, não de tendência de design editorial.
Resultado

Publicação editorial com identidade visual consistente do início ao fim. O projeto entregou um sistema replicável para futuras edições, materiais de divulgação e conteúdo digital, e virou referência visual para as próprias artistas documentadas usarem em peças próprias.

Próximo projeto
Editorial · Livro · Design Gráfico

Admirável
Mundo Novo

Projeto de design editorial para o clássico de Aldous Huxley, reinterpretação visual da obra com sistema tipográfico e identidade gráfica que dialogam com a narrativa distópica.

Papel
Design Editorial · Capa · Miolo
Escopo
Livro impresso
Referência
Huxley · 1932
O Projeto

O desafio foi criar uma edição que respeitasse o peso intelectual da obra sem cair em soluções óbvias. Admirável Mundo Novo é um texto sobre controle e aparência, o design precisava subverter sutilmente, não decorar.

O sistema foi construído para criar tensão visual: elementos ordenados demais, espaços que parecem calculados, espelhando o mundo que Huxley descreve.

Decisões de Design
  • 01
    Capa como manifesto silencioso A capa foi tratada como o argumento visual do livro, não como ilustração do enredo. A solução abstrai o tema sem explicá-lo, forçando o leitor a formar uma hipótese antes mesmo de abrir a primeira página.
  • 02
    Miolo com ritmo controlado A diagramação do miolo foi pensada para criar uma leitura fluida com pequenos pontos de tensão, o leitor sente que algo está "levemente errado" sem conseguir identificar o quê. O design reproduz, em leitura, a sensação de controle disfarçado de normalidade que define a obra.
  • 03
    Aberturas de capítulo como tradução visual Cada capítulo ganhou página dupla de abertura com arte construída a partir do tema específico daquele trecho: uma tradução visual composta por recortes das cenas descritas, não uma ilustração genérica. O design extrai do texto em vez de decorá-lo. Uma pausa calculada no fluxo de leitura que cria contraste para o retorno à diagramação contida do miolo.
  • 04
    Sistema tipográfico em duas vozes Tipos serif clássicos para o corpo, sans geométrico para títulos e metadados, o contraste entre "tradição literária" e "sistema racional" espelha o conflito central da distopia de Huxley.
Resultado

Edição com identidade gráfica coerente da capa ao miolo. O projeto foi desenvolvido como exercício editorial completo, capa, tipografia, grid, sistema de aberturas e páginas especiais, mostrando que design editorial é curadoria de ritmo, não decoração do texto.

Próximo projeto
Startup Saúde · Território Seguro · 2024–2025

Território Bullying

Duas landing pages distintas para o mesmo tema, uma para instituições de ensino (B2B) e uma para famílias (B2C). Avatares, linguagem e funis completamente separados.

Papel
UX · Copy · Visual
Escopo
2 LPs · Desktop + Mobile
Audiências
B2B + B2C
O Problema

O programa Território Seguro combate o bullying nas escolas, mas atende dois públicos radicalmente diferentes. Gestores escolares e diretores de RH tomam decisões de contratação com base em ROI, compliance e certificação institucional. Mães e pais decidem com base em medo, urgência e identificação emocional com o problema do filho.

Uma única LP serviria mal a ambos. A decisão foi criar duas experiências independentes, com copy, hierarquia, prova social e CTA pensados especificamente para cada avatar.

Decisões de Design
  • 01
    LP B2B, credibilidade antes de emoção Abertura com dados de prevalência e impacto institucional. Copy técnico, referências a legislação educacional e selo de certificação em destaque. O tomador de decisão quer justificar a compra para um comitê, o design entrega argumentos prontos para isso.
  • 02
    LP B2C, emoção antes de produto Hero com pergunta direta ao pai ou mãe que já viveu o problema. A prova social são depoimentos de famílias, não de especialistas. O CTA fala em proteger o filho, não em comprar o curso.
  • 03
    Gabriel Chalita como âncora de autoridade Ex-Secretário de Educação de SP e autor reconhecido no tema, posicionado no topo de ambas as LPs. A autoridade é a mesma, o enquadramento muda: credencial institucional no B2B, "especialista que entende sua família" no B2C.
  • 04
    Módulos do curso revelados progressivamente O conteúdo do programa é apresentado em carrossel acordeão, o usuário expande o que quer aprofundar. Evita sobrecarga sem esconder informação.
Resultado

Dois funis completos com jornadas independentes, desktop e mobile. A separação por avatar eliminou a ambiguidade de copy que existia na versão anterior e tornou o argumento de cada LP mais preciso para seu público específico.

Próximo projeto
UX · Produto · EdTech Médica · 2024

MedQ

Redesign de plataforma adaptativa de estudos para medicina, diagnóstico em dados de suporte, priorização Pareto, máximo impacto com escopo mínimo.

Papel
UX Designer, Discovery · Redesign
Escopo
12 telas · Produto web
Resultado
−60% tickets de navegação
O Problema

O sintoma era o volume de suporte. O MedQ é um study buddy, não tem jornada linear, o aluno entra, resolve o que precisa e sai. Mas três perguntas apareciam repetidamente: "Por onde começo?", "Como sei em que estou indo bem?" e "Como monto meu plano?". A plataforma não respondia nenhuma delas de forma clara.

O resultado estava nos dados: alunos satisfeitos com o desempenho nas provas, frustrados com a navegação, e um volume crescente de tickets de suporte sobre como usar o produto.

Discovery

O discovery foi conduzido em duas frentes: imersão em comunidades de alunos em redes sociais, onde os padrões de frustração emergem sem filtro, e parceria com uma profissional que faz mentoria individual aluno por aluno, acompanhando de perto as dificuldades reais da jornada. O padrão que emergiu quebrou uma suposição inicial: o problema não era conteúdo nem desempenho. Era orientação. Os alunos não sabiam onde estavam dentro da plataforma nem o que fazer a seguir.

Ao mapear onde as dúvidas se concentravam, ficou claro que não era um problema distribuído pela plataforma inteira. Eram pontos específicos: poucas interseções da jornada gerando a maioria do atrito.

Decisões de Design
  • 01
    Home como resposta imediata, não como boas-vindas O dashboard foi redesenhado para responder "por onde começo?" antes de qualquer outra coisa. Atividades em atraso, atalhos para as seções mais usadas e alertas de urgência contextual, o aluno aterra orientado, não perdido.
  • 02
    Agenda com metas diárias visíveis Integrar questões e desempenho do dia diretamente na agenda transformou o cronograma de calendário passivo em painel de progresso ativo. O aluno sabe o que fez, o que falta e o que está em atraso, sem precisar buscar essa informação.
  • 03
    Painel de Assuntos inteligente 704 temas organizados por relevância para as provas do aluno, filtráveis por dificuldade e status de revisão. Cada card mostra progresso individual, o aluno encontra o que precisa estudar sem precisar saber o que buscar.
  • 04
    Missões como onboarding progressivo com IA por baixo Três missões guiadas, perfil de estudos, cronograma, personalização, resolvem o "Como começo?" sem expor a complexidade do sistema adaptativo. A IA calibra o plano; o aluno só responde três perguntas.
  • 05
    O erro de escopo, e a virada O primeiro diagnóstico gerou uma solução grande demais: reestruturei fluxos, propus nova arquitetura de navegação, defendi decisões que levariam meses. Quando levei para engenharia, parte era inviável no prazo. Tive que recuar. Voltei aos dados de suporte com uma pergunta diferente: quais 20% da plataforma geravam 80% dos tickets? Redesenhei exclusivamente esses pontos. O critério de priorização ficou simples: maior impacto no suporte com menor esforço de desenvolvimento.
Resultado

−60% nos chamados relacionados a dificuldade de navegação com mudanças em menos de 20% da plataforma. O time de CX recuperou horas de triagem de tickets. E a lógica de Pareto aplicada ao escopo mudou como o time priorizava os projetos seguintes.

Próximo projeto

Próximo passo

Vamos criar algo
que converte.

marcelof.mendes@hotmail.com
Iniciar conversa