Arraste para explorar. Role ou use a pinça para aproximar. Abra a Ajuda para ver os atalhos de teclado.

Yan
ABERTO A
PROJETOS
Vamos conversar
Yan Fontão Boring view
Todos os trabalhos

Case 037Design e implementação de produto com IA

FormaAI

O FormaAI é um espaço de trabalho com IA para transformar áudio, vídeo e links em transcrições e insights estruturados. Ele usa o modelo de chave própria: a pessoa conecta os provedores e escolhe qual serviço cuida da transcrição e da análise.

Meu papel
Design e implementação de produto com IA
Status do projeto
Em desenvolvimento
Gravado da interface em funcionamento. O backend era um substituto local, então nomes, palestras, resumos e chaves são dados de demonstração; nenhum serviço de IA foi chamado.
  1. Conecte um provedor
  2. Ative o provedor
  3. Atribua uma tarefa
Fluxo conceitual, não é uma captura do aplicativo.

01

Separar a conexão da tarefa

As configurações podem ficar difíceis de ler quando a conexão da conta, a escolha do modelo e a atribuição de tarefas disputam o mesmo espaço. No design do FormaAI, cada provedor tem um card, e a página se divide em Provedores, Uso e Idioma.

O card do provedor explica as capacidades, a conexão e o modelo. A seção Uso define quem faz a transcrição e a análise. Isso dá à página uma sequência: conectar e ativar um provedor e, depois, escolher a tarefa dele.

A implementação filtra as opções de tarefa por capacidade e só considera provedores que estejam conectados e ativados. Assim, uma opção precisa cumprir essas condições antes de aparecer no seletor. Essa regra liga a promessa da interface ao estado da aplicação.

Dashboard do FormaAI com ações rápidas, números gerais e transcrições recentes.
O dashboard, com dados de demonstração.

02

Conectado, ativado e em uso são coisas diferentes

Uma conexão salva não precisa ser usada em todas as tarefas. O design diferencia um provedor conectado, um ativado e um que está selecionado naquele momento para transcrição ou análise.

Esses estados aparecem em rótulos e controles. Desativar um provedor mantém a conexão salva; remover uma chave é outra ação. Assim, desligar um serviço fica menos destrutivo, e cada controle mantém um significado específico.

O design também coloca a escolha do modelo no card do provedor, onde essa decisão tem contexto. O resumo da tarefa pode, então, mostrar qual modelo o provedor de análise selecionado vai usar.

Uma página de transcrição com resumo por IA, itens de ação, capítulos e tags.
Uma transcrição e o que é extraído dela. O conteúdo é de demonstração, escrito à mão.

03

Deixar as capacidades guiarem a experiência

Transcrição e análise são tarefas separadas, com requisitos diferentes de provedor. Tratar cada uma à parte deixa o sistema mais fácil de estender, sem exigir que quem usa entenda toda a arquitetura de provedores.

Isso também facilita explicar os limites. O produto web e a proposta de transcrição local são frentes separadas. Este case se concentra nas configurações de provedores e no fluxo web que estão no código e na especificação de design.

Configurações de provedores: cada provedor tem um card, e conectado, ativado e em uso são estados separados.
Configurações de provedores, com chaves fictícias.

04

O trabalho demonstrado

O projeto combina uma aplicação web implementada com um design detalhado das configurações, capacidades de provedores e uma preparação explícita para o lançamento. A configuração de deploy e os smoke tests externos continuam separados do trabalho entregue em código.

A contribuição central é a ligação entre um modelo de interação e sua implementação: um lugar para gerenciar cada provedor, um lugar claro para atribuir cada tarefa e estados visíveis que descrevem o que o produto pode usar naquele momento.

000

Instruções

Yan Fontão
Toque
Abre uma tela
Clique
Abre uma tela
Arrastar
Move pelo mural
Rolagem
Mouse aproxima, trackpad move, pinça aproxima
− +
Afasta até ver o mural inteiro, ou aproxima
Setas
No case: ↑↓ trocam de case, ←→ trocam de mídia. No mural: movem
Espaço
Abre ou volta
Enter
Abre
Esc Backspace
Volta
Home
Volta ao centro, depois à abertura
PgUp PgDn
Canal anterior ou próximo
Tab
Percorre projetos e links
R
Projeto aleatório
0–9
Digite um canal, 1–61
?
Esta página
Atalhos

Música do mural

Arquivos comprimidos e nivelados para a web.

ABERTO A
PROJETOS
Vamos conversar

Nova mensagem para o Yan

Conte quem você é e eu respondo.

000

Sobre o Yan

Oi, eu sou o Yan

Product Designer/ Design Engineer

A maioria dos produtos perde algo entre o design e o código. Os meus não: eu pesquiso o problema, desenho o produto e coloco a interface no ar, então o que você aprova é exatamente o que seus usuários recebem.

  • 2018início em software
  • UI + codedesign e implementação

Trabalhei com Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido ou presencial

Retrato de Yan Fontão sentado, de suéter verde e óculos, segurando um microfone.
ABERTO A
PROJETOS
Vamos conversar
ABERTO A
PROJETOS
Vamos conversar
000

canal bloqueado

Sob NDA

Digite o código

Peça o código ao Yan ↗
ABERTO A
PROJETOS
Vamos conversar
YAN FONTÃO Cases completos

Canal 37 Design e implementação de produto com IA

FormaAI

O FormaAI é um espaço de trabalho com IA para transformar áudio, vídeo e links em transcrições e insights estruturados. Ele usa o modelo de chave própria: a pessoa conecta os provedores e escolhe qual serviço cuida da transcrição e da análise.

Meu papel
Design e implementação de produto com IA
Status do projeto
Em desenvolvimento
Gravado da interface em funcionamento. O backend era um substituto local, então nomes, palestras, resumos e chaves são dados de demonstração; nenhum serviço de IA foi chamado.

FormaAI: deixar compreensível o controle sobre a IA

Gravado da interface em funcionamento, com dados sintéticos.

Separar a conexão da tarefa

As configurações podem ficar difíceis de ler quando a conexão da conta, a escolha do modelo e a atribuição de tarefas disputam o mesmo espaço. No design do FormaAI, cada provedor tem um card, e a página se divide em Provedores, Uso e Idioma.

O card do provedor explica as capacidades, a conexão e o modelo. A seção Uso define quem faz a transcrição e a análise. Isso dá à página uma sequência: conectar e ativar um provedor e, depois, escolher a tarefa dele.

A implementação filtra as opções de tarefa por capacidade e só considera provedores que estejam conectados e ativados. Assim, uma opção precisa cumprir essas condições antes de aparecer no seletor. Essa regra liga a promessa da interface ao estado da aplicação.

Dashboard do FormaAI com ações rápidas, números gerais e transcrições recentes.
O dashboard, com dados de demonstração.

Conectado, ativado e em uso são coisas diferentes

Uma conexão salva não precisa ser usada em todas as tarefas. O design diferencia um provedor conectado, um ativado e um que está selecionado naquele momento para transcrição ou análise.

Esses estados aparecem em rótulos e controles. Desativar um provedor mantém a conexão salva; remover uma chave é outra ação. Assim, desligar um serviço fica menos destrutivo, e cada controle mantém um significado específico.

O design também coloca a escolha do modelo no card do provedor, onde essa decisão tem contexto. O resumo da tarefa pode, então, mostrar qual modelo o provedor de análise selecionado vai usar.

Uma página de transcrição com resumo por IA, itens de ação, capítulos e tags.
Uma transcrição e o que é extraído dela. O conteúdo é de demonstração, escrito à mão.

Deixar as capacidades guiarem a experiência

Transcrição e análise são tarefas separadas, com requisitos diferentes de provedor. Tratar cada uma à parte deixa o sistema mais fácil de estender, sem exigir que quem usa entenda toda a arquitetura de provedores.

Isso também facilita explicar os limites. O produto web e a proposta de transcrição local são frentes separadas. Este case se concentra nas configurações de provedores e no fluxo web que estão no código e na especificação de design.

Configurações de provedores: cada provedor tem um card, e conectado, ativado e em uso são estados separados.
Configurações de provedores, com chaves fictícias.

O trabalho demonstrado

O projeto combina uma aplicação web implementada com um design detalhado das configurações, capacidades de provedores e uma preparação explícita para o lançamento. A configuração de deploy e os smoke tests externos continuam separados do trabalho entregue em código.

A contribuição central é a ligação entre um modelo de interação e sua implementação: um lugar para gerenciar cada provedor, um lugar claro para atribuir cada tarefa e estados visíveis que descrevem o que o produto pode usar naquele momento.