Resumo do Projeto
Desenvolvimento de Identidade Visual, UI/UX e criação de um Design System completo para o novo SOF (Sistema de Orçamentos e Finanças) da Cidade de São Paulo, gerido pela Prodam.
O Desafio
Sistemas de gestão financeira e orçamental governamentais são, historicamente, plataformas pesadas, visualmente arcaicas e com uma curva de aprendizagem altíssima para os servidores públicos. O desafio neste projeto não era apenas “fazer uma tela bonita”, mas sim desenhar a arquitetura de um produto digital robusto e escalável que será utilizado diariamente por milhares de funcionários da prefeitura para gerir a saúde financeira da maior cidade da América Latina.
Insight Estratégico
O Design System como motor de eficiência pública. Em vez de desenhar telas avulsas, a estratégia foi construir um Design System atômico e modular. Ao criar uma linguagem visual padronizada, garantimos não só que a interface seja intuitiva para o utilizador, mas também que o tempo de desenvolvimento da equipe de engenharia seja drasticamente reduzido nas futuras atualizações do sistema.
Solução Criativa
A direção de arte e UX focou-se na clareza cognitiva, na acessibilidade e num aspeto corporativo moderno.
Identidade Visual (A Marca): Criámos um logótipo sólido e pragmático. A fusão do globo com as setas de crescimento e gráficos de barras traduz visualmente o rigor financeiro e o progresso, mantendo a sobriedade exigida pelo setor público através de uma paleta de azuis institucionais.
Componentização Escalável: Desenvolvemos uma biblioteca de componentes de interface (UI Kits): botões com múltiplos estados (padrão, hover, inativo), campos de formulário, barras de pesquisa, menus de seleção (dropdowns) e uma iconografia personalizada e minimalista.
Acessibilidade (A11y) no Centro: O sistema foi desenhado com opções nativas de acessibilidade avançada. Incorporamos na interface toggles para Dark Mode (Modo Escuro) e Alto Contraste, além de controles para o redimensionamento dinâmico da tipografia (+/-), garantindo uma experiência ergonômica para todos os servidores públicos.
A Execução
A transposição do conceito para uma interface governamental funcional:
Padrões de Navegação: Criação de cabeçalhos (headers) e rodapés universais que mantêm a coerência da marca “Cidade de São Paulo / Prodam” em qualquer ambiente do sistema, adaptando-se automaticamente ao tema escolhido pelo utilizador.
Microinterações e Popovers: Desenho detalhado de menus de contexto e painéis de ajuste (como o cartão de Perfil do Utilizador e o painel de Ajustes de Exibição), organizando a informação secundária sem poluir a área de trabalho.
O Meu Papel como Diretor de Criação
Arquitetura Visual de Grande Escala: Liderança na estruturação de todo o Design System, definindo as regras de layout, espaçamentos, tipografia e comportamento dos componentes.
Direção de Produto Digital: Supervisão da equipe de Engenharia para garantir que a complexidade dos dados orçamentais da prefeitura fosse traduzida em formulários limpos e intuitivos, reduzindo a carga cognitiva dos utilizadores.
Controlo de Qualidade Operacional: Alinhamento contínuo com a equipe de Desenvolvimento para assegurar que os componentes desenhados fossem implementados com exatidão (pixel-perfect), mantendo a consistência do sistema visual em toda a plataforma.
Expediente
Direção de Criação: Vinícius Novaes (Prodam)
Cliente: Prefeitura da Cidade de São Paulo
