Casos de estudo

Produto com IA

Chat AI — UI Kit
& Interface Web

Design System Tokens Multi-modo

Contexto

Projeto de um chat baseado em AI para ambiente web, com foco em clareza, consistência e escalabilidade.

O desafio foi criar uma interface simples para o utilizador, mas robusta a nível de sistema, preparada para evoluir.

Interface do chat AZQ GPT: painel lateral com assistentes e histórico de conversas, área de chat com campo de input, e overlay de avaliação de experiência com escala de emoji
Interface do chat — Python Expert com feedback integrado não intrusivo

O meu papel

  • Definição do UI Kit
  • Criação de tokens semânticos
  • Estruturação para múltiplos contextos (default, confidencial, dark)
  • Design da interface e estados do chat
  • Entrevistas contextuais com utilizadores
  • Testes de usabilidade

Abordagem

O foco foi criar um sistema semântico, separando intenção de apresentação, permitindo:

  • Escalabilidade
  • Consistência entre componentes
  • Melhor alinhamento com desenvolvimento

UI Kit & Tokens

  • Tokens organizados por função: texto, superfícies, ações, notificações
  • Estados claros para ações primárias
  • Reutilização entre modos e contextos
Painel de variáveis no Figma: colecção semântica com tokens de texto, superfície e ícone organizados por grupos, com valores para Default, Confidential e Dark Mode
Tokens semânticos — colecção com modos Default, Confidential e Dark

Interface do Chat

  1. Redução da carga cognitiva

  2. Feedback claro do sistema

  3. Estados explícitos de interação

  4. Avaliação da experiência integrada de forma não intrusiva

Resultado

  • Interface consistente e clara
  • Sistema preparado para crescimento
  • UI Kit reutilizável
  • Menos decisões ad-hoc em novos ecrãs
Componentes em dark mode: campos de texto em vários estados (placeholder, focused, filled), botões secundários, tabs e lista de radio buttons
Componentes em dark mode
Página de Assistentes em dois layouts: versão de coluna única e versão expandida side-by-side, mostrando a grelha de assistentes populares e filtros de categoria
Página de Assistentes — layouts responsivos
Documentação do componente Input Field: estados default, disabled, error e focused, secções de hints, exemplos e especificações de ARIA e navegação por teclado
Documentação de componente — Input Field

O que este
projeto demonstra

  • Arquitectura de design systems semânticos com tokens multi-modo
  • Capacidade de simplificar para o utilizador sem perder robustez de sistema
  • Processo completo: research, interface e sistema de componentes