CONCRETIZE 360

visão geral

O sistema foi inspirado em práticas reais de gestão pública e adaptado ao setor privado de construção civil, mantendo linguagem visual sólida e neutra (tons terrosos/cinzas) para transmitir confiabilidade e robustez. O objetivo é permitir que gestores enxerguem status de obras, pendências críticas e prioridades sem sair do painel principal, enquanto os times operacionais executam rotinas padronizadas com o mínimo de atrito.

Principais módulos

  • Panorama Geral (Dashboard): status consolidados das obras (andamento, paralisadas, sob fiscalização, concluídas) + alertas.

  • Gestão de Obras: cadastro/edição, filtros por localidade, status e tipo de execução.

  • Terceirizadas: registro, acompanhamento e avaliação de prestadoras.

  • Mensageria: canal interno entre administradores, engenheiros e gestores.

  • Usuários & Perfis: convites, papéis e níveis de acesso.

  • Campanhas: comunicados informativos/operacionais vinculados a projetos.

meu papel

Liderei o projeto end-to-end: da ideação (diagnóstico de necessidades, modelagem de fluxos) ao visual final (design system, protótipos clicáveis) e documentação de handoff.

  • Descoberta: entrevistas com 3 donos de construtoras, levantamento de processos atuais, priorização de dores.

  • Produto & UX: arquitetura de informação, fluxos de permissão e “happy path” por persona.

  • UI & Design System: componentes reutilizáveis, estados, tokens e guidelines de uso.

  • Validação: protótipo testado com [N] usuários (gestores, engenheiros, administrativos), iterações rápidas.

Pesquisa de Usuário & Insights

Quem entrevistei: engenheiros/gestores de obra, administrativo e responsáveis por terceirizadas

Dores recorrentes

  • Fragmentação de informação em planilhas/grupos de mensagem.

  • Dificuldade em auditar histórico (quem mudou o quê, quando).

  • Falta de padrão para cadastro e comunicação com terceirizadas.

  • Gestão de perfis e permissões pouco clara; risco de ações indevidas.

Oportunidades

  • Um painel unificado com filtros e estados padronizados.

  • Fluxos guiados para cadastro de obra e empresas, reduzindo erros.

  • Mensageria contextual (mensagens ligadas a obra/tarefa).

  • Trilhas de auditoria por objeto (obra, contrato, campanha, usuário).

Diretrizes de design que emergiram

  • Clareza antes da densidade: primeiro o “quadro geral”, depois o detalhe.

  • Sem surpresas: padrões de navegação estáveis (sidebar + breadcrumbs).

  • Prioridade visual para riscos/pendências.

  • Registros auditáveis (quem/quando/por quê).

projeto

A identidade visual utiliza tons terrosos/neutros/azul-escuro, alinhados à estética da engenharia civil, para transmitir confiabilidade e robustez.
Diferenciais-chave:

  • Baseado em um case real de gestão pública, adaptado ao privado.

  • Navegação simplificada (menu lateral + hierarquia consistente).

  • Modularidade por seção (facilita evolução e novos módulos).

  • Escalabilidade: fluxos pensados para pequenas empreiteiras até grandes construtoras.

  • Gestão 360º: informações de diferentes frentes convergindo no mesmo ecossistema.

mapa de navegação

JORNADA DO USUÁRIO

dESIGN SYSTEM

Consistência, legibilidade para uso intenso e hierarquia visual objetiva guiaram as decisões. A interface foi projetada exclusivamente para Web.

  • Paleta (hex): #1C2E4A (azul petróleo estrutural), #D86A2C (destaques/estado de atenção), #F4F1EE (fundo claro) e #BCC2C9 (neutros/contornos). Combinações seguem a meta de contraste mínimo WCAG 2.1 AA (≥ 4.5:1 para texto comum); pares críticos são validados com checker. W3C+1

  • Tipografia: Roboto (Google). Escolha por legibilidade em interfaces e ampla disponibilidade na Web; família versátil com pesos que sustentam hierarquia sem ruído. Google Fonts+1

  • Ícones: Phosphor Icons. Conjunto flexível, múltiplos pesos e consistência de traço, mantendo unidade visual entre estados e tamanhos. Phosphor Icons+1

  • Princípios de uso:

    1. priorizar contraste e tamanho de texto para leitura contínua;

    2. reduzir variações de peso/estilo para preservar ritmo;

    3. manter ícones e texto alinhados na grade para facilitar varredura.

Protótipo & Testes de Usabilidade

Abordagem: protótipo navegável no Figma com cenários de ponta-a-ponta (listar obras → filtrar → entrar na obra → revisar pendências → enviar mensagem).
Roteiro de tarefas:

  1. “Encontre rapidamente uma obra paralisada por fiscalização e veja as últimas ações.”

  2. “Cadastre uma nova empresa terceirizada e associe a uma obra existente.”

  3. “Envie um comunicado para as equipes de duas obras específicas.”

Métricas acompanhadas (exemplo):

  • Tempo até achar obra com status X (antes/depois da iteração).

  • Erros de navegação (cliques em áreas não relacionadas).

  • Compreensão de rótulos (acertos nos filtros).

Achados & Iterações (exemplos):

  • Filtros renomeados para termos usados pelo time → queda de erros de seleção.

  • Destaque visual para “Ações rápidas” no detalhe da obra → menos tempo para iniciar tarefas.

MOCKUPS