Pular para o conteúdo
Logotipo DM de Danilo Marcello
Todos os projetos

Sistema de Gestão da Qualidade

Categoria
SaaS
Papel
Product Designer
Ferramentas
FigmaFlutterFlowSupabasen8nMicrosoft Authentication

Contexto

Um projeto internacional em que acompanhei o produto do começo ao fim. Uma multinacional precisava tirar a gestão da qualidade de planilhas e caixas de entrada e transformar num sistema único, que tivesse módulo de aprendizagem, inspeção e auditoria, supply chain, projeto, planejamento e gerenciamento de qualidade. Eu comecei desenhando tudo no Figma, passei o front para o FlutterFlow, um software low-code, fiz — usando inteligência artificial — toda a adequação do banco de dados para o desenvolvedor no Supabase, modelei no n8n os fluxos que acontecem por trás do sistema e entreguei o controle da interface com Microsoft Authentication.

Problema

O sistema de gestão da qualidade existia, mas vivia espalhado:

  • Rastro perdido: desvio aberto em um e-mail, plano de ação em uma planilha, evidência em uma conversa — nada se ligava.
  • Aprovação sem fila: lição aprendida e lista de verificação dependiam de um "ok" solto, sem histórico de quem aprovou e quando.
  • Fornecedor fora do ciclo: a auditoria acontecia, mas a não conformidade detectada não voltava para a cadeia como ação.
  • Prazo sem dono: sem notificação automática por trás, a ação vencia antes de alguém assumir.
  • Acesso sem controle: num sistema usado por muitas áreas, cada perfil precisava ver apenas a sua parte.

Meu papel

Product Designer

Product designer do produto inteiro, do desenho à operação:

  • Criação de todas as telas no Figma, do mapa de módulos ao detalhe de cada formulário.
  • Passagem do front-end para o FlutterFlow, ambiente low-code, mantendo a fidelidade ao que foi desenhado.
  • Adequação do banco de dados no Supabase feita com apoio de inteligência artificial, entregando ao desenvolvedor a estrutura pronta para uso.
  • Modelagem no n8n dos fluxos que rodam por trás do sistema — notificações, aprovações, prazos e evidências.
  • Controle de acesso com Microsoft Authentication, para que a própria empresa defina quem entra em cada interface.
  • Estruturação dos módulos: aprendizagem, inspeção de campo, auditoria de fornecedores, supply chain, projeto, planejamento e gerenciamento de qualidade.

Processo

  1. Etapa 1

    Entender o sistema de gestão

    Descoberta de como desvios, oportunidades de melhoria e não conformidades eram registrados, aprovados e cobrados no dia a dia — e o que a planilha não garantia.

  2. Etapa 2

    Desenhar no Figma

    Arquitetura de informação com os módulos do sistema — painel, registros, planos de ação, lições aprendidas, inspeções de campo e auditoria de fornecedores — e o formulário de cada um.

  3. Etapa 3

    Construir

    Front-end no FlutterFlow, banco de dados no Supabase adequado com apoio de inteligência artificial para o desenvolvedor, fluxos automáticos no n8n e acesso com Microsoft Authentication.

  4. Etapa 4

    Acompanhar do começo ao fim

    Ajuste fino de telas com quem usa, validação dos fluxos de aprovação e fechamento do ciclo: a inspeção gera o desvio, o desvio gera o plano de ação, o plano gera a lição aprendida.

Solução

Um sistema de gestão da qualidade organizado em módulos que se conectam:

  • Painel: desvios abertos, oportunidades de melhoria, não conformidades e ações concluídas, com atividades recentes, prazos e ações rápidas.
  • Registros: desvios, oportunidades de melhoria e não conformidades num só lugar, cada um ligado ao seu plano de ação.
  • Planos de ação: registro, consulta e verificação de eficácia, com categoria, origem, projeto, responsável, prazo e evidência anexada.
  • Lições aprendidas: busca por título, tag, status e severidade, fila de aprovação e analytics — e uma lição pode virar plano de ação.
  • Inspeções de campo: formulário com data, projeto, local, inspetor e evidências, listas de verificação por grupo e aprovação das listas entregues.
  • Auditoria de fornecedores: nova auditoria, consulta com filtros e exportação para Excel e PDF de desvios.
  • Acesso: Microsoft Authentication define a interface de cada perfil — a inspeção de campo fica restrita ao time de EHS, a auditoria ao responsável por conduzi-la.

Telas

Resultado

Acompanhei o produto do começo ao fim, do Figma à operação: desenhei as telas, passei o front para o FlutterFlow, adequei o banco de dados no Supabase com apoio de inteligência artificial para o desenvolvedor, automatizei os fluxos internos no n8n e entreguei o controle de acesso com Microsoft Authentication.

Foi o projeto mais complexo que já executei e o que mais chega perto do que entendo por produto: não parar na tela, mas ver o sistema ser construído, ajustado com quem usa e sustentado no dia a dia da empresa.