KITT — sistema de gestão de tarefas e atividades
Redesenhando a experiência de um sistema modular de tarefas para a próxima versão da plataforma.
Problema
Um sistema pedindo mais consistência e escala
O KITT é uma plataforma modular de gestão de tarefas e atividades, com módulos de autenticação, organizações, pacotes e usuários. As telas mais antigas, como o cadastro de empresas, usavam formulários únicos e densos, sem separação clara entre seções e sem nenhuma forma de representar a relação entre matriz, filiais e unidades. Esta reformulação (V2) nasceu da necessidade de resolver esses pontos, melhorando a usabilidade, a consistência visual e a escalabilidade do sistema, mantendo a flexibilidade para workflows complexos de tarefas e atividades.
Solução
Um design system modular e escalável
O redesign cobre os módulos centrais da plataforma com um tema escuro consistente — com variação em tema claro —, hierarquia visual clara e componentes reutilizáveis pensados para crescer junto com novos módulos — dos fluxos de autenticação (primeiro acesso, recuperação de senha) à gestão de organizações, módulos, pacotes e usuários. O cadastro de organização, por exemplo, saiu de um formulário único e denso para um layout dividido em seções (dados gerais, endereço, módulos, pacotes e acesso), e a listagem passou a representar visualmente a hierarquia entre matriz, filiais e unidades.
Módulos redesenhados
Antes e depois
Cadastro de organização: do formulário denso ao design system
Um exemplo real de como o redesign vai além da estética: mesma tarefa — cadastrar uma organização —, duas abordagens completamente diferentes.
- Paleta clara e genérica, sem identidade visual própria
- Componentes datados — avatares cinza, campos e botões sem hierarquia visual
- Fluxo pensado como formulário único, sem separação por contexto
- Paleta escura com identidade própria da marca, com variação em tema claro
- Componentes modernos — cards, badges de status, toggles e paginação
- Visão de sistema organizada em seções — dados gerais, módulos, pacotes, acesso —, não um formulário só
Telas do produto
Uma amostra do redesign
Telas reais do módulo de organizações e do fluxo de autenticação, já com o novo design system aplicado.
Processo
Fluxo completo no Figma
Parte do meu processo é mapear o fluxo inteiro antes de desenhar as telas — estados de sucesso, vazio e confirmação de exclusão, além das variações em tema escuro e claro. Este é o fluxo de cadastro e gestão de organizações, filiais e unidades.
Ver no Figma
Sistema de Design
Construído sobre o Material UI (MUI)
O KITT foi construído originalmente com o Material UI (MUI), biblioteca de componentes React baseada no Material Design do Google. A partir dessa base, documentei tokens de cor e tipografia e uma biblioteca própria de ícones, para manter consistência visual em todo o produto.
Base tecnológica: Material UI (MUI)
Paleta de cores
