AI Cockpit
Eficiência Impulsionada por IA para Equipes e Desenvolvedores
Cliente
CompassUOL | AI/R Group
Design System, Estratégia de UX/UI & Integração com IA
Com mais de uma década de experiência em UX/UI, Design Systems e inovação em produtos impulsionados por IA, desempenhei um papel essencial na construção do AI Cockpit—a plataforma proprietária baseada em IA da Compass UOL. Meu trabalho otimizou a gestão ágil de equipes e a automação de processos, além de aprimorar os fluxos de trabalho dos desenvolvedores com integração fluida de IA no VSCode e em interfaces web.
Como designer UX/UI, desenvolvi e administrei um Design System escalável com mais de 2.000 componentes reutilizáveis, garantindo consistência, eficiência e acessibilidade em toda a plataforma.
Ano
2022 - 2025
Ferramentas
Figma, Miro, FigJam, VSCode, Hotjar
Visão Geral & Objetivos do Projeto
Em 2022, entrei para a Compass UOL para desenvolver a UX/UI e o Design System do AI Cockpit, uma plataforma inovadora baseada em IA para otimizar fluxos de trabalho ágeis, gestão de equipes e automação de processos. Meu papel incluiu a estruturação de um Design System escalável com mais de 2.000 componentes reutilizáveis, garantindo uma experiência do usuário consistente em duas versões distintas do AI Cockpit:.
O AI Cockpit foi projetado para solucionar desafios críticos enfrentados por equipes de desenvolvimento e gestão de projetos, trazendo eficiência, automação e integração contínua com ferramentas de trabalho. A plataforma existe em duas versões distintas:
AI Cockpit Web
Uma plataforma completa baseada em IA que aprimora a colaboração da equipe, a criação de tarefas, a geração de relatórios de teste, a documentação de código e a criação de conteúdo para redes sociais. Essa versão se integra com Jira, Bitbucket, GitHub e BusinessMap para aprimorar fluxos de trabalho ágeis e automatizar o gerenciamento de projetos.
AI Cockpit VSCode Plugin
Uma ferramenta especializada desenvolvida especialmente para desenvolvedores e arquitetos, incorporando IA diretamente ao Visual Studio Code para auxiliar na modernização de código legado, documentação e geração automatizada de código. Esse plugin garante que os profissionais tenham acesso a automação baseada em IA sem precisar sair de seu ambiente de desenvolvimento.
Problemas e Desafios
Antes do AI Cockpit, as equipes e desenvolvedores enfrentavam diversas ineficiências:
-
Fluxos de trabalho fragmentados: Os profissionais precisavam alternar entre várias ferramentas para gerenciamento de projetos, rastreamento de tarefas e testes.
-
Manutenção ineficiente do código: A documentação e modernização de código legado eram processos complexos e demorados.
-
Relatórios de teste demorados: Os QAs não tinham automação para documentar testes e rastrear bugs.
-
Capacidades de IA dispersas: Ferramentas de IA estavam disponíveis, mas não eram totalmente integradas ao fluxo de trabalho diário.
O desafio era desenvolver um ecossistema unificado impulsionado por IA que aumentasse a produtividade para diferentes funções, garantindo uma experiência UX/UI intuitiva e escalável.
Design Process
imersão
ideação
protótipo
teste
Imersão / Observação
O que?
Uma plataforma proprietária desenvolvida para integrar ferramentas de IA generativa e automaçãocom o objetivo de agilizar o desenvolvimento de produtos digitais, software e aplicações.
Quem?
-
Desenvolvedores: Usam a IA para modernizar código legado, gerar documentação automática e criar código assistido por IA via VSCode Plugin.
-
Gestores de produto e projetos ágeis: Contam com ferramentas de IA para gestão de tarefas, user stories e automação de fluxos de trabalho.
-
QAs (Quality Assurance): Beneficiam-se da automação de relatórios de teste e rastreamento de bugs.
-
Profissionais de marketing e social media: Utilizam a IA para criar conteúdo otimizado para redes sociais com base em manuais de voz e tom.
-
Demais profissionais: UX Designers, Squad leads, etc
Quando?
O projeto já estava sendo desenvolvido pela CompassUOL antes de inha entrada, mas eu entrei na Compass UOL em 2022. O projeto segue em constante evolução. Inicialmente, foi criado para gestão e automação de tarefas, mas cresceu para incluir funcionalidades voltadas para desenvolvimento de software e qualidade de código.
Onde?
-
Na Web: A versão web é usada por equipes ágeis, gerentes de projeto e profissionais de marketing.
-
No VSCode: O plugin de IA para Visual Studio Code é utilizado por desenvolvedores e engenheiros de softwarediretamente no ambiente de programação.
Porque?
-
Para eliminar gargalos no desenvolvimento de software, permitindo que equipes trabalhem com mais agilidade e precisão.
-
Para centralizar e automatizar fluxos de trabalho dentro das ferramentas já utilizadas pelos profissionais, como Jira, Bitbucket, GitHub e BusinessMap.
-
Para melhorar a documentação e modernização de código legado, reduzindo a carga manual dos desenvolvedores.
-
Para garantir acessibilidade e inclusão no ambiente de trabalho digital, com design adaptável e suporte para neurodivergentes.
-
Para integrar IA de forma prática e eficiente, tornando as tarefas mais inteligentes, contextuais e alinhadas às necessidades do usuário.
Solução & Contribuições de UX/UI
Criação de um Design System Escalável
Uma das minhas principais contribuições foi a criação e administração de um Design System robusto, permitindo:
-
Iteração e implementação mais rápidas de novas funcionalidades nas versões Web e VSCode Plugin.
-
Consistência visual entre diferentes interfaces do AI Cockpit.
-
Otimização de fluxos de trabalho, reduzindo gargalos e aumentando a eficiência da equipe.
Trabalhando com uma equipe pequena (apenas dois designers), precisei equilibrar múltiplas funções, atuando tanto na manutenção do Design System quanto nas melhorias diárias da UI/UX.
Soluções de IA & Automação
O AI Cockpit se diferencia por integrar IA diretamente no fluxo de trabalho dos usuários, trazendo inovação e eficiência em diversos aspectos:
Funcionalidades do AI Cockpit Web:
-
Criação e gerenciamento de tarefas com IA, acelerando fluxos de trabalho ágeis, com integração a ferramentas como Jira, Businessmap, BitBucket, Github, e outros.
-
Automação de testes, com relatórios de bugs gerados por IA e documentação estruturada.
-
Assistente de IA para writting para redes sociais, permitindo que profissionais de marketing criem postagens alinhadas com diretrizes de voz e tom da marca.
-
Implementação de RAG (Retrieval-Augmented Generation), garantindo que o conteúdo gerado pela IA seja contextualizado e preciso.
-
Funcionalidades do AI Cockpit VSCode Plugin:
-
Documentação de código assistida por IA, tornando a manutenção de código legado mais eficiente.
-
Análise de código automatizada, sugerindo otimizações e correções em tempo real.
-
Integração com ferramentas de desenvolvimento, permitindo a criação de tarefas dentro do VSCode sem necessidade de alternar entre plataformas.
-
Modernização de código legado.
Garantindo Acessibilidade & Inclusão
Nossa análise de histórias de usuários nos ajudaram a determinar os recursos essenciais que o portal precisaria apresentar para torná-lo bem-sucedido e útil.
Todo o Design de Interação foi pensado com foco na maneira como os usuários poderão interagir com o site, buscar por produtos e facilmente encontrar os serviços que precisam. Nesta abordagem, considerou-se o estudo de contato do cliente com a marca de forma ainda mais aprofundada.
Também criamos um diagrama de fluxo do usuário no Miro para mapear esses recursos e ver que tipo de telas seriam necessárias para o site.
Protótipo
Em seguida, wireframes de baixa e alta fidelidade foram esboçados. Depois de concordarmos com os layouts gerais de nossas telas, recorremos ao Figma para nossos wireframes de média fidelidade. Como grande parte do trabalho foi realizado de forma remota, criamos um projeto compartilhado para que todos estivessem na mesma página. Antes de iniciarmos o wireframe, decidimos alinhar os pontos de quebra (Break Points) e padrões de tipografia para criar uma aparência organizada e consistente em todas as nossas telas.
- Branding -
A marca foi criada para representar uma iniciativa que busca tornar a comunicação intuitiva uma linguagem universal, favorecendo valores que tem como objetivo expandir a consciência humana e sua conexão com a natureza.
Mesmo sendo um dos símbolos geométricos mais simples e fundamentais, o triângulo abrange uma gama de significados. Ele é o símbolo da trindade dos deuses - Santíssima Trindade - nas culturas cristã, hindu, egípcia, babilônica.
Por ser formado por três segmentos, ele também faz alusão à várias tríades, como, por exemplo o início, o meio e o fim.
Sua ligação com o número 3, simboliza perfeição e unidade entre o corpo, o espírito e a mente, representando, portanto, pessoas que procuram manter o equilíbrio.
O símbolo final é formado por 9 triângulos. O 9 é o último número com apenas um dígito, o 9 traz um sentido de plenitude. Indica realização, perfeição e consecução, as sementes para novos inícios e o fundamento para futuro crescimento no ciclo seguinte ou mais elevado.
- Style Guide -
Em nosso arquivo Adobe XD compartilhado, compilamos todos os nossos componentes, cores, ícones e tipos de letra na página Estilos do arquivo. Mais tarde um guia de estilo de marca foi criado para mostrar e instruir outras pessoas sobre as escolhas finais para todos os aspectos da interface do usuário e manter a identidade de marca sendo usada de forma harmônica.
Testes
Realizei Teste de Usabilidade para avaliar a capacidade de aprendizado de novos usuários interagindo com o portal pela primeira vez. Observei e medi se os usuários entendem o site e como concluir funções como fazer login, pesquisar serviços, marcar uma consulta e conversar com a mentora. Graças ao Teste de Usabilidade consegui definir e resolver alguns problemas.
Mais Design de Produtos
Live Site
Hoje o site é mantido pela própria cliente que recebeu instruções sobre como adicionar conteúdo e fazer alterações de acordo com suas necessidades.
Live site:
Gostou do que viu?
Se você gostou de meu workflow e quer trabalhar comigo, entre em contato!