Pular para o conteúdo
Senior AI Product Designer

Projetando a camada
entre humanos
e IA.

Estratégia de produto, IA conversacional e experiências de voz para organizações construindo na fronteira da interação humano–máquina.

Gran Cursos Positivo S+ FNDE Grupo Lago
10+Anos em design
6+Anos em produto
2Produtos de IA
Trabalhos selecionados

Produtos que projetei.

PROJETO  —  Conversational AIEdTech

Lume School

IA conversacional que substituiu a comunicação escolar fragmentada.

Ver projeto  ↗
Conversational AI · Mobile · Strategy · EdTech
Lume School — Interface de chat com IA respondendo perguntas em linguagem natural
BEHANCE  —  UX/UIE-commerce

Inshop

Plataforma de UX/UI para e-commerce moderno.

Ver projeto  ↗
UX/UI · E-commerce · Design · Web
Inshop — Plataforma de e-commerce com telas de home, produtos e rastreamento
BEHANCE  —  EdTechMobile

Gran Pro

Onboarding e fluxo de pagamento para plataforma de educação de concursos.

Ver projeto  ↗
UX/UI · EdTech · Onboarding · Pagamento
Gran Pro — Tela de login e painel financeiro com resumo de recebimentos
BEHANCE  —  InstitucionalWeb

Miracle Building Solutions

Website institucional para empresa especializada em limpeza residencial e comercial.

Ver projeto  ↗
Web · Institucional · Branding · UI
Miracle Building Solutions — Website institucional desktop e mobile
BEHANCE  —  MobileEdTech

EmÁudio Concursos

Redesign do app de cursos em áudio para concursos públicos — nova identidade visual, onboarding e sistema de navegação.

Ver projeto  ↗
Mobile · EdTech · Redesign · Branding
EmÁudio Concursos — Redesign do App
Expertise

A camada em que me especializo.

01

AI Product Design

Camada de interação entre humanos e sistemas inteligentes — estados de voz, confiança, loops de feedback.

02

Conversational UX

Sistemas onde o produto desaparece e só o diálogo permanece.

03

Estratégia de Produto

Pesquisa, discovery e a disciplina de decidir o que não construir.

04

Experiências de Voz

ASR, TTS clonado, máquinas de estado de voz e adaptabilidade em tempo real.

05

Design Systems

Primitivos a tokens semânticos, WCAG. Sistemas que escalam.

06

Ownership Ponta a Ponta

Da pesquisa à especificação técnica final, mantendo o modelo completo do produto.

07

Motion UX

Microinterações, transições e animações que reforçam comportamento e guiam atenção. After Effects, Lottie e motion aplicado a interfaces reais.

Diego Angelos

10+ anos em design, 6+ em produto. Trabalhei em EdTech, IA conversacional, plataformas enterprise e produtos de voz. Hoje projeto na fronteira entre estratégia, experiência com IA e complexidade organizacional.

Resultados antes de entregas

O objetivo nunca é o arquivo Figma. É o que muda no produto depois que ele vai ao ar.

Sistemas antes de telas

Projetar telas sem pensar no sistema é construir uma casa sem fundação. Componentes, tokens e padrões de interação são a infraestrutura invisível que faz o produto escalar.

IA como extensão

O melhor uso de IA em produtos não substitui o humano — amplifica o que ele já faz bem. A IA deve reduzir fricção, não criar dependência.

Clareza é a feature mais difícil

Qualquer produto pode acumular funcionalidade. Poucos conseguem remover o que não deveria estar lá. Clareza é o resultado de decisões difíceis, não de ausência de complexidade.

Disponível para projetos selecionados · 2026
Stack & Ferramentas

Toolbox

As ferramentas com que trabalho para projetar, prototipar e entregar produtos na fronteira entre design e IA.

Figma
Figma MCP
Lovable
WordPress
Ps Photoshop
Illustrator
After Effects
Claude
ChatGPT
Gemini
Manus
Miro
Dovetail
Hotjar
Analytics
Notion
Contato

Vamos construir algo na fronteira.

Construindo na fronteira da IA e precisa de estratégia + design + implementação? Quero ouvir.

angelosdesigner1@gmail.com

Trabalho melhor com equipes construindo:

Produtos de IA onde o modelo de interação é o núcleo
Interfaces voice-first ou conversacionais
Produtos enterprise com complexidade como desafio central
Design systems que precisam escalar sem perder craft
01 · Voice AI · Cliente Internacional · Em Desenvolvimento · 2026

Elisabetta
AI Coach

Um coach de idiomas voice-first construído em torno de uma única voz clonada premium — projetado para executivos e atores de Hollywood que exigem uma experiência premium. Produto em desenvolvimento, MVP V1.

PapelSenior Product Designer
ClienteElisabetta Maccani, US
EscopoEnd-to-end
StatusMVP em desenvolvimento
Elisabetta AI Coach — mockup premium do dashboard no browser
01

Problema de Negócio

Uma metodologia que funcionava. Um teto que não escalava.

Elisabetta Maccani tinha uma metodologia de ensino que funcionava. Seus alunos — executivos, banqueiros e atores de Hollywood — falavam um italiano melhor depois de trabalhar com ela do que após anos em apps convencionais. O problema era que seu método não escalava. Cada sessão exigia sua presença.

A questão que nos pediram para responder não era como construímos um app de idiomas — era como tornamos o método de Elisabetta disponível às duas da manhã em Nova York sem ela estar acordada.

03

Design System

Quiet luxury. Paleta editorial italiana.

A paleta parte de Cream (base editorial aquecida) e Navy (contraponto frio para texto e ações). Wine é usado como acento sparingly — elegância italiana, nunca pastiche. Cada token semântico referencia os primitivos; qualquer mudança propaga automaticamente.

Cream #F5EFE6 Background base · Texto em dark
Navy #1A1F2E Dark base · Ações primárias
Wine #722F37 Acento — uso sparingly
Sand #D4C5A9 Superfícies secundárias
bg/base
navy
bg/surface
navy.100
text/primary
cream
text/secondary
cream.60
accent/primary
wine
surface/secondary
sand
border/default
navy.200
text/muted
sand.dark
04

Dashboard

Dois estados. Primeiro acesso vs. retorno.

O dashboard distingue dois momentos no ciclo do aluno. Na primeira sessão: sem streak, sem métricas, CTA suave ("Try your first conversation"). No retorno: streak ativo, número de conversas, cenários completados. A mesma tela, dois designs — porque o contexto importa.

Dashboard — returning student com streak de 3 dias ativo
Dashboard · Returning student · Streak 3 dias
05

Chat & Conversa

A conversa é o produto. Tudo o mais é suporte.

Três tipos de bubble: usuário (navy, cauda direita), assistente (cream suave, tradução opcional, cauda esquerda) e sistema (divisor, nunca bubble). Mensagens de áudio substituem completamente links de texto. A interface desaparece — só o diálogo permanece.

Chat — do estado vazio à conversa ativa com múltiplos estados de bubble
Chat · Do estado vazio à conversa ativa
Chat — feedback card de sessão, preference drawer e encerramento
Chat · Encerramento de sessão · Feedback + Preference Drawer
Protótipo navegável Vídeo do fluxo interativo em desenvolvimento — será incorporado nesta seção.
06

Voice Composer

9 estados. Uma arquitetura coerente.

O Voice Composer gerencia a transição entre Idle → Recording → Live Transcript → Review → Processing → Speaking → Responding → Error → Tooltip. Cada estado tem visual, trigger e transição definidos. O composer nunca pula estados — o usuário sempre sabe onde está.

Idle
Pronto — escreva ou segure para falar
Recording
Waveform ativa + timer
Transcript
STT ao vivo em tempo real
Processing
ASR processando
Speaking
IA respondendo em voz clonada
Error
Mic indisponível
Voice Mode Button — 6 estados: Idle, Hover, Active, Processing, Speaking, Disabled
Voice Mode Button · 6 estados
Audio Waveform — 5 estados, 24 barras animadas
Audio Waveform · 5 estados · 24 barras
Voice Session Feedback Card — 4 estados: Default, Hover, Rated, Closed
Voice Session Feedback Card · Default · Hover · Rated · Closed
07

Error States

Local antes de global. Borders antes de banners.

Seis cenários de erro com lógica própria: e-mail inválido, e-mail não cadastrado, OTP inválido, OTP expirado, rate limit com countdown em Fraunces 56px, e erro de rede. Cada um com feedback local primeiro — nunca modal antes de border.

Error States — 6 cenários de erro com lógica visual própria
Error States · 6 cenários · Local → Global · Countdown em Fraunces
Vídeo dos estados de erro Demonstração animada dos 6 cenários — será incorporada nesta seção.
Aprendizado-chave

Pessoas não querem falar com IA. Pessoas querem que a IA as ajude a se comunicar melhor. No momento em que paramos de projetar um chatbot e começamos a projetar um companheiro de aprendizado, cada decisão de produto ficou mais clara.

03 · IA Conversacional · EdTech · Branding · 2025

Lume
School

Uma plataforma de IA conversacional que substituiu a comunicação escolar fragmentada com uma única interface onde pais, professores e coordenadores fazem perguntas em linguagem natural e recebem respostas imediatas.

PapelEnd-to-End Product Designer
AtividadesBranding + UX/UI
AnoOut 2025
LocalBrasília, Brasil
Lume School — mockup premium da interface conversacional no browser
01

Problema de Negócio

Cada professor gerenciando dez canais ao mesmo tempo.

Escolas são organizações de comunicação intensa usando ferramentas inadequadas. Professores respondem as mesmas perguntas via WhatsApp, e-mail e circulares impressas. Pais usam canais diferentes e esperam resposta imediata.

Hipótese central

Comunicação é um problema de retrieval, não de delivery. Escolas têm a informação. Pais precisam de acesso a ela.

02

Pesquisa & Personas

Três grupos. Três pontos de dor. Uma plataforma.

Briefings com professores, coordenadores e pais revelaram que cada grupo tinha uma relação diferente com a comunicação escolar. Duas personas guiaram o design: Ana (professora, 38) que gerencia múltiplos grupos; e Marcos (coordenador, 45) sem visibilidade do que chega aos pais.

Personas — Ana professora 38 anos e Marcos coordenador 45 anos com pontos de dor e objetivos
Personas · Ana (professora) + Marcos (coordenador) · Pontos de dor e objetivos
03

Identidade da Marca

Lume — luz, clareza e a forma de uma conversa.

O símbolo é um "L" estilizado que também é um speech bubble — referenciando o núcleo conversacional enquanto ancora a letra da marca. Verde #00CD76 comunica acessibilidade e movimento. Navy #1A1F3B dá autoridade institucional. Montserrat em múltiplos pesos cobre da headline ao caption.

Brand Identity Guide — capa com logo Lume e fotografia editorial
Brand Identity Guide · Capa · Out 2025
Paleta de cores — Verde #00CD76 e Navy #1A1F3B com escala tonal completa
Paleta · Verde #00CD76 + Navy #1A1F3B
Tipografia — Montserrat com escala de pesos ExtraLight a Bold
Tipografia · Montserrat · ExtraLight → Bold
Variações do logo — verde primário, cinza neutro, lilás secundário
Logo · Verde primário · Cinza neutro · Lilás secundário
04

Decisões Estratégicas

Três pivôs que definiram o produto.

Decisão 01
Conversa em vez de navegação
A alternativa a comunicação fragmentada seria um dashboard centralizado. Construímos algo diferente: usuários fazem perguntas em linguagem natural, sem aprender estrutura de menu.
TRADE-OFF · Maior complexidade de IA em troca de menor carga cognitiva para o usuário final.
Decisão 02
IA como facilitador, não criador
A IA não cria nem interpreta. Recupera, organiza e entrega o que educadores já validaram. Essa restrição tornou a confiança institucional possível.
TRADE-OFF · Automação limitada em troca de confiança da instituição.
Decisão 03
Mobile-first, baixo letramento digital
O usuário de menor literacia define a complexidade máxima. Um produto simples que funciona para todos vale mais do que um sofisticado que exige treinamento.
TRADE-OFF · Profundidade limitada no V1 em troca de adoção ampla.
05

Telas do Produto

Mobile iOS · Do onboarding ao chat conversacional.

Fluxo de Pesquisa · Mobile
Pesquisas — lista de pesquisas disponíveis
Lista de pesquisas
Pesquisa — tela de introdução e contexto
Introdução
Pesquisa — perguntas com escala de resposta
Perguntas
Pesquisa — revisão das respostas
Revisão
Pesquisa — confirmação de envio com XP ganho
Confirmação
Interface Conversacional
Chat IA Lume — respostas contextuais em linguagem natural
Chat IA · Linguagem natural · Respostas contextuais
Aprendizado-chave

Usuários raramente querem mais funcionalidade. Eles querem menos esforço. A resposta foi simplicidade radical: uma interface, linguagem natural, resposta imediata.

Ver mais

Veja o projeto completo no Behance — branding, UI e todos os fluxos.

Ver projeto completo no Behance
02 · Enterprise · Design System · AI Assistant · 2025–2026

Nexify
Platform

Uma plataforma enterprise de experiência do colaborador — com assistente de IA embarcado, design system construído de tokens a componentes, e cinco jornadas principais entregues para desktop e mobile.

PapelSenior Product Designer
ContextoPlataforma Enterprise
Ano2025–2026
EscopoEnd-to-end
Nexify Platform — mockup premium do Home Dashboard no browser
01

Problema de Negócio

Colaboradores sobrecarregados de informação, desconectados das metas.

Organizações enterprise têm um problema estrutural: a informação existe mas está dispersa em múltiplos canais. O colaborador passa mais tempo buscando contexto do que agindo sobre ele.

A Nexify centraliza comunicação, metas, pesquisas, desenvolvimento de habilidades e um assistente de IA em uma única plataforma — com arquitetura de informação coesa e design system escalável.

5Jornadas principais
4Levantamento de benchmark
2Desktop + Mobile
1AI assistant embarcado
2Light + Dark mode
02

Benchmark Competitivo

4 plataformas globais. 9 critérios. Oportunidades claras.

Antes de projetar uma única tela, conduzi benchmark contra Workvivo, Viva Engage, Simpplr e Staffbase — avaliando comunicação interna, engajamento, mobile, desenvolvimento, gamificação e usabilidade.

Benchmark Competitivo — capa com critérios avaliados e plataformas analisadas
Benchmark Competitivo · Maio 2026 · 9 critérios avaliados
Workvivo
Feed social · Reconhecimento (Kudos)
OPORTUNIDADE · Busca com IA + integração nativa com metas
Viva Engage
Integração Microsoft · Discussões estruturadas
OPORTUNIDADE · Navegação unificada · Experiência consistente
Simpplr
Personalização · Busca avançada
OPORTUNIDADE · Personalização + comunidade + reconhecimento
Staffbase
Mobile · Funciona offline
OPORTUNIDADE · Gamificação aplicada ao dia a dia
03

Home & Nex AI

Dashboard executivo pessoal + assistente sempre acessível.

A Home exibe NPS interno, metas ativas, pesquisas pendentes e comunicados com prioridade inteligente. O assistente Nex fica na barra superior — acessível de qualquer tela. AI chips contextuais no topo de cada módulo ativam ações em um toque.

Home Dashboard Desktop — NPS 72, 8 metas ativas, comunicados urgentes, pesquisas pendentes
Home · Desktop · NPS · Metas · Pesquisas · Comunicados
Home Dashboard Mobile — visão compacta dos KPIs e ações rápidas
Home · Mobile · KPIs + ações rápidas
Nex AI Assistant — chat aberto com sugestões contextuais e resposta sobre metas
Nex · Chat · Resposta sobre metas em linguagem natural
04

Comunicação

Urgente com borda vermelha. Novo com borda azul. Sem ruído.

O sistema de prioridade visual diferencia urgente (borda vermelha, ação até hoje) de novo (borda azul) e lido (sem borda). AI chips "Resumir não lidos" e "Filtrar urgentes" reduzem a sobrecarga sem exigir que o usuário leia tudo.

Comunicação Desktop — lista com 23 não lidos, urgente em destaque, filtros e AI chips
Comunicação · Desktop · 23 não lidos · Prioridade visual
Comunicação Mobile Dark — urgente com borda vermelha no topo da lista
Comunicação · Mobile · Urgente em evidência
05

Metas Corporativas

Do KPI executivo à meta pessoal — na mesma interface.

KPIs corporativos (receita, NPS, turnover, engajamento) ficam no topo. Abaixo, metas filtradas por escopo: Empresa, Meu time ou Pessoais. AI chips permitem perguntas como "Como bater minha meta?" sem sair da tela.

Metas Desktop — R$ 47.2M receita, NPS 68, turnover 9.2%, lista de metas por categoria
Metas · Desktop · KPIs executivos + lista por categoria
Metas Mobile — cards compactos com progresso e deadline
Metas · Mobile · Cards com progresso e deadline
06

Desenvolvimento & Habilidades

Competências · Detalhe · Plano de crescimento.

Três visões conectadas: lista de competências com % de proficiência, detalhe com critérios por nível (Iniciante → Avançado) e evidências, e kanban de atividades com XP, prioridade e prazo. Tudo dentro do mesmo módulo de Habilidades.

Habilidades Desktop — 18 competências com barra de proficiência e filtros
Competências · 18 habilidades com % de proficiência
Detalhe Competência — Comunicação Assertiva 92%, critérios por nível, evolução mensal
Detalhe · Comunicação Assertiva · 92% proficiência
Plano de Crescimento — kanban A fazer, Em progresso, Concluídas com XP e prioridade
Plano de Crescimento · Kanban · XP + Prioridade
07

Pesquisas

Cada resposta vale XP. Participação vira reconhecimento.

O principal problema de ferramentas de pesquisa enterprise é a baixa taxa de resposta. Cada pesquisa respondida ganha XP e badge. A tela de confirmação reforça o impacto individual — não é uma página de "obrigado", é uma conquista.

Pesquisas Desktop — lista com 23 abertas, prazo e tipo de pesquisa
Pesquisas · Desktop · 23 abertas com prazo e anonimato
Pesquisa Mobile — perguntas com escala Likert e progresso
Pesquisa · Mobile · Perguntas com escala e progresso
Aprendizado-chave

Plataformas enterprise falham porque confundem centralização com unificação. Centralizar é colocar tudo no mesmo lugar. Unificar é fazer tudo fazer sentido junto.