Meu Papel
Como Product Designer, liderei a criação da primeira solução estruturada de consulta pública da instituição:
- Arquitetura de Busca e Filtros: Estruturação da jornada de descoberta de projetos por município, estado e categoria.
- Implementação de Data Analytics: Configuração do Google Analytics para medir o sucesso da nova feature e o engajamento dos cidadãos.
- Handoff e Design System: Criação de um Style Guide escalável para suportar a expansão da base de dados sem perda de performance.
- Consultoria Estratégica: Apoio a stakeholders na tradução de dados brutos em decisões de conteúdo.
Foco: Conformidade Legal, UX Service e Decisões Orientadas a Dados.
Créditos
- Paulo Vitor - Redator
- Henrique Alves - Designer
2023
Contexto e Desafio
O IPGC, como OSCIP, tinha o desafio legal de detalhar dados de projetos públicos para a população brasileira. A plataforma anterior era estática, dificultando a análise de engajamento e a transparência ativa.
O Desafio: Transformar dados técnicos dispersos em um sistema de busca intuitivo, escalável e orientado a métricas.
O que foi feito
Redesign do Website Institucional como um todo, e criação do banco de dados sobre projetos da instituição para viabilizar a consulta de dados aberta a todos.
Resultados e Impacto Real
A nova jornada de busca gerou dados confiáveis para a avaliação contínua da experiência:
acessos orgânicos
Validação da arquitetura de informação e indexação dos projetos.
de tempo médio de engajamento
Retenção Qualificada, indicando consumo efetivo dos dados públicos.
Novos usuários
Crescimento orgânico impulsionado pela facilidade de descoberta da ferramenta.
Prova Social :
Durante uma audiência pública em Campos Novos (SC), um cidadão mencionou o uso espontâneo do site para fiscalizar dados relevantes do projeto de sua cidade, provando a eficácia da solução no mundo real.
Aprendizados Estratégicos:
- Design Ops: O Style Guide sistematizado tornou-se uma alavanca que conecta design e entrega de produto.
- Data-Driven Design: Métricas só geram valor real quando traduzidas em melhorias de fluxo e clareza para o usuário final.
- Escalabilidade: A estruturação da V1 permitiu a expansão da base de dados de mais de 117 projetos com baixo esforço técnico.
Descoberta
- Diagnóstico inicial
- Auditoria do site existente
- Reseach e Discovery
O processo inicial contou com iteração dos membros da equipe da Assessoria de Comunicação, com insights de colaboradores relevantes e Key players, além de rodadas de entrevistas com os mesmos para entender melhor as necessidades da instituição com o projeto.
Devido à ausência de dados legados, conduzi uma pesquisa primária quantitativa e qualitativa com usuários reais para embasar as decisões.
Insights
dos entrevistados
Entendem o escopo de atuação do IPGC com inconsistências:
Isso prova que o problema não é a falta de informação, mas a clareza e arquitetura delas.
de usuários
Fariam a busca de dados dos projetos em um Computador Desktop, durante o horário de trabalho.
Definimos duas personas arquetípicas para mapear os diferentes níveis de interação com o sistema.
Esse mapeamento foi essencial para alinhar a interface aos hábitos digitais dos usuários e garantir que a solução atendesse tanto às necessidades de agilidade técnica quanto às de validação institucional.
A estratégia
Como executamos
- Criação do fluxo de jornada do usuário
- Criação de Wireframes de baixa e média fidelidade
Consolidados os insights da fase de discovery, estruturamos o User Flow para mapear a jornada ideal. O objetivo foi traduzir as necessidades dos usuários em uma navegação lógica, garantindo que o acesso aos dados fosse fluido e eficiente no dia a dia.
Iniciei a materialização da solução através de rabiscosframes, utilizando o papel como ferramenta de iteração rápida. Essa abordagem permitiu validar a arquitetura de informação e a hierarquia visual antes de qualquer pixel ser desenhado. Com a estrutura definida, desdobrei os rascunhos em um fluxo navegável, conectando a Home às páginas críticas para garantir uma jornada coesa e sem fricção.
O Design Visual (Execução)
Após a validação das estruturas em baixa fidelidade, avançamos para a interface de alta fidelidade no Figma.
Identificamos que a instituição ainda não possuía um ecossistema visual padronizado para produtos digitais. Diante disso, estruturei a primeira versão do Style Guide digital do IPGC, respeitando o Brandbook existente, e criando uma fundação de componentes reutilizáveis que respeitam a marca, mas priorizam a acessibilidade e a consistência em toda a jornada do usuário.
Style Guide IPGC V1
Fluxo de Jornada para obtenção de informações
Montamos uma nova jornada de usuário que levasse o usuário através da Home Page as informações de interesse, enquanto asseguramos a relevância da instituição, com provas sociais e de autoridade.
Resultados e Impacto Real
A nova jornada de busca gerou dados confiáveis para a avaliação contínua da experiência:
acessos orgânicos
Validação da arquitetura de informação e indexação dos projetos.
de tempo médio de engajamento
Retenção Qualificada, indicando consumo efetivo dos dados públicos.
Novos usuários
Crescimento orgânico impulsionado pela facilidade de descoberta da ferramenta.
Prova Social :
Durante uma audiência pública em Campos Novos (SC), um cidadão mencionou o uso espontâneo do site para fiscalizar dados relevantes do projeto de sua cidade, provando a eficácia da solução no mundo real.
Aprendizados e próximos passos
- Um Style Guide bem definido e sistematizado é uma alavanca estratégica que conecta design e produto
- Métricas só geram valor quando traduzidas em decisões concretas
- Priorizar clareza e navegação é essencial em sites institucionais com múltiplos públicos
Próximo passo natural: testes de usabilidade moderados para refinar jornadas críticas com base em dados quantitativos e qualitativos.
Antes
Depois