Visão Geral
Na Secretaria de Estado de Fazenda de Minas Gerais (SEF/MG), múltiplos times e áreas atuavam de forma autônoma, sem uma referência compartilhada. Essa fragmentação, somada ao uso de bibliotecas legadas (como o MUI baseado em Material Design 2), resultava em inconsistências visuais e funcionais em dezenas de sistemas governamentais.
O objetivo do projeto foi criar o UAI — Usabilidade, Acessibilidade e Identidade mineira —, um design system unificado capaz de atender à complexidade da Secretaria. Como Product Designer no time central, atuei na conexão técnica entre design e engenharia, na estruturação das fundações do sistema e na defesa estratégica da nova identidade visual junto à liderança.
SEF/MG
UX Design
/
UI Design
/
Interaction Design
2026
Processo
O desenvolvimento do sistema priorizou o alinhamento multidisciplinar e decisões práticas orientadas à realidade do setor público:
Validação técnica e descarte de hipóteses: Após descartar a criação de componentes primitivos do zero (pelo custo de escalabilidade) e a adoção pura do Material Design 3 (que colidia com a sobriedade institucional), abrimos o diálogo direto com a engenharia. A escolha pelo Shadcn/ui combinou alta flexibilidade, código aberto e ampla aderência entre os mais de 40 desenvolvedores da organização.
Defesa da identidade visual: Enfrentamos o receio histórico de que botões vermelhos induziriam o usuário a erros fiscais. Defendemos a inversão do azul genérico pelo vermelho institucional — cor símbolo da bandeira mineira e da SEF —, sustentando a proposta com rigor em hierarquia, contexto de uso e contraste.
Fundações e governança: Estabelecemos a tipografia Geist para maior legibilidade em telas densas de dados, grid desktop de 1920px (área útil de 1400px) validado com desenvolvedores, e ícones abertos via Phosphor Icons. Para sustentação contínua, definimos um fluxo claro: autoria centralizada no Figma para o time do Design System, colaboração aberta para toda a Secretaria e espelhamento em código via Storybook.
Solução
A entrega transformou a relação entre equipes e a qualidade das interfaces da Secretaria:
Acessibilidade nativa (WCAG AA): Com a base do Shadcn/ui garantindo nativamente atributos ARIA e navegação completa por teclado, o foco esteve na auditoria cromática minuciosa (via Figma Contrast Checker e Stark), alcançando 100% de conformidade WCAG AA nos pares essenciais de texto e ação.
Consistência em escala: Formulários, tabelas analíticas densas e dashboards — antes desenhados e programados do zero por cada equipe — passaram a consumir uma biblioteca única e padronizada.
Alinhamento cultural: Mais do que uma entrega visual, a solução aproximou design e desenvolvimento, estabelecendo uma linguagem comum entre áreas e consolidando uma experiência digital proprietária, acessível e funcional para o Estado.
