UX/UI Design • Gov Tech • Acessibilidade • 2017

Modernizando o acesso a serviços fiscais para milhões de contribuintes

Objetivo: Redesign completo do portal da SEFAZ-RJ aplicando heurísticas de usabilidade e princípios de UX para facilitar o acesso a serviços fiscais

100% Responsivo
WCAG Acessibilidade
Hotjar Análise
Redesign do Portal SEFAZ-RJ
Ver o processo

Meu Papel

  • Análise Heurística
  • Pesquisa com usuário
  • Arquitetura de Informação
  • UI Design
  • Prototipagem
  • Análise com Hotjar

Meu Impacto

  • Aplicação das 10 heurísticas de Nielsen para identificar problemas críticos de usabilidade
  • Reestruturação da arquitetura de informação seguindo princípios de findability e scannability
  • Criação de interface responsiva com foco em consistência visual e padrões de interação
  • Implementação de diretrizes WCAG para garantir acessibilidade universal
  • Análise de comportamento do usuário com Hotjar para validar decisões de design

O Desafio: Modernizar Sem Perder Credibilidade Institucional

Contexto (2017): Este projeto foi realizado em um momento crucial da minha carreira, quando estava começando a aplicar sistematicamente conhecimentos de UX em projetos reais. Foi uma oportunidade de validar na prática os princípios de usabilidade e heurísticas que estava estudando.

O portal da SEFAZ-RJ é um dos principais canais de relacionamento entre o Estado do Rio de Janeiro e contribuintes, atendendo milhões de acessos mensais. No entanto, uma análise heurística revelou violações críticas de usabilidade que prejudicavam a experiência do usuário.

Objetivo Principal

Redesenhar o portal aplicando as heurísticas de Nielsen e princípios de UX para melhorar a eficiência, satisfação e confiança dos contribuintes ao acessar serviços fiscais digitais.

Principais Problemas Identificados (Análise Heurística)

  • Visibilidade do Status do Sistema: Falta de feedback visual sobre ações realizadas
  • Consistência e Padrões: Ausência de padronização visual entre diferentes seções
  • Reconhecimento em vez de Memorização: Navegação complexa exigindo memorização de caminhos
  • Design Estético e Minimalista: Interface poluída com informações irrelevantes
  • Flexibilidade e Eficiência: Ausência de atalhos para usuários frequentes
  • Prevenção de Erros: Falta de validações e mensagens claras em formulários

Meu Processo: Metodologia Centrada no Usuário

Apliquei metodologia de UX estruturada, começando com análise heurística e pesquisa com usuário, seguindo com iterações baseadas em testes de usabilidade e validação com stakeholders. Este projeto foi fundamental para consolidar minha transição para a área de UX/UI Design.

1

Análise Heurística

Avaliação sistemática do portal usando as 10 heurísticas de Nielsen, identificando violações críticas e oportunidades de melhoria.

2

Pesquisa com Usuário

Entrevistas com contribuintes para entender contextos de uso, dores e expectativas ao acessar serviços fiscais digitais.

3

Arquitetura de Informação

Reestruturação da organização de conteúdo aplicando card sorting e tree testing para validar a nova estrutura.

4

UI Design e Iterações

Criação de múltiplas versões da interface, incluindo adaptação ao padrão do Governo do Estado do RJ (posteriormente abandonado).

5

Prototipagem Responsiva

Desenvolvimento de protótipo de alta fidelidade mobile-first, garantindo adaptabilidade a diferentes dispositivos e contextos de uso.

6

Análise com Hotjar

Implementação de mapas de calor para validar comportamento real dos usuários e otimizar áreas críticas da interface.

Contexto: Análise da Interface Antiga

O portal anterior apresentava múltiplas violações das heurísticas de usabilidade, resultando em baixa eficiência na localização de informações e frustração dos usuários.

A falta de consistência visual, navegação confusa e ausência de responsividade criavam barreiras significativas ao acesso aos serviços fiscais, especialmente para usuários com menor literacia digital.

Interface antiga do portal SEFAZ-RJ
Antes: Portal antigo violando múltiplas heurísticas de usabilidade

Principais Violações Heurísticas Identificadas

  • Falta de Visibilidade do Status: Usuários não recebiam feedback claro sobre ações realizadas, gerando insegurança e retrabalho.
  • Inconsistência Visual: Diferentes padrões de layout, tipografia e cores entre seções, aumentando carga cognitiva.
  • Navegação Não Intuitiva: Estrutura de menu complexa exigindo memorização, violando o princípio de reconhecimento vs. memorização.
  • Interface Poluída: Excesso de informações simultâneas prejudicando escaneabilidade e foco em tarefas prioritárias.
  • Zero Responsividade: Layout fixo impossibilitando acesso via dispositivos móveis, excluindo grande parte dos contribuintes.

Evolução do Design: Iterações e Aprendizados

O processo de redesign passou por múltiplas iterações, incluindo uma versão baseada no padrão visual do Governo do Estado do RJ que foi posteriormente abandonada.

Primeira Iteração: Padrão Gov RJ (Abandonado)

Primeira versão do portal SEFAZ-RJ seguindo padrão Gov RJ
Primeira Iteração: Versão seguindo padrão visual do Governo do Estado do RJ (posteriormente abandonado)

Esta primeira versão foi desenvolvida seguindo o padrão visual estabelecido pelo Governo do Estado do Rio de Janeiro. No entanto, após análise e discussões com stakeholders, identificou-se que este padrão não atendia às necessidades específicas da SEFAZ-RJ, sendo necessária uma abordagem mais personalizada.

Versão Final Aprovada

Versão final aprovada do portal SEFAZ-RJ
Versão Final: Interface moderna aplicando hierarquia visual clara e padrões de interação consolidados

Decisões de Design Baseadas em Heurísticas

  • Visibilidade do Status: Implementação de breadcrumbs, indicadores de progresso e feedback visual imediato em todas as interações.
  • Consistência Visual: Criação de sistema de design com componentes reutilizáveis, garantindo uniformidade em todo o portal.
  • Reconhecimento vs. Memorização: Menu simplificado com categorias claras e ícones representativos, facilitando navegação intuitiva.
  • Design Minimalista: Remoção de elementos desnecessários, focando em conteúdo essencial e tarefas prioritárias.
  • Flexibilidade: Implementação de busca inteligente e acesso rápido a serviços mais utilizados.

Validação com Hotjar: Mapas de Calor

Após a implementação do redesign, utilizei o Hotjar para analisar o comportamento real dos usuários na nova interface. Os mapas de calor revelaram padrões de interação e áreas de maior atenção, validando decisões de design e identificando oportunidades de otimização.

A análise foi dividida em 4 setores principais da home, permitindo uma compreensão detalhada de como os usuários navegavam e interagiam com cada área do portal.

Mapa de calor Hotjar - Setor 1 da home SEFAZ-RJ
Hotjar - Setor 1: Análise de interação no topo da página e menu principal
Mapa de calor Hotjar - Setor 2 da home SEFAZ-RJ
Hotjar - Setor 2: Comportamento do usuário na área de serviços principais
Mapa de calor Hotjar - Setor 3 da home SEFAZ-RJ
Hotjar - Setor 3: Padrões de navegação na área intermediária
Mapa de calor Hotjar - Setor 4 da home SEFAZ-RJ
Hotjar - Setor 4: Interação com rodapé e informações complementares

Insights dos Mapas de Calor

  • Áreas de Maior Atenção: Os mapas revelaram quais elementos atraíam mais atenção dos usuários, validando a hierarquia visual implementada.
  • Padrões de Navegação: Identificação de caminhos mais utilizados, permitindo otimização de fluxos críticos.
  • Elementos Ignorados: Detecção de áreas com baixa interação, indicando necessidade de ajustes ou remoção.
  • Validação de Decisões: Confirmação de que as soluções de design estavam alinhadas com o comportamento real dos usuários.

Soluções de Design: Princípios de UX Aplicados

Cada decisão de design foi fundamentada em princípios de usabilidade, acessibilidade e nas heurísticas de Nielsen, garantindo uma experiência eficiente e satisfatória.

Consistência Visual

Sistema de design unificado com componentes padronizados, reduzindo carga cognitiva e aumentando previsibilidade da interface.

Abordagem Mobile-First

Interface responsiva desenvolvida priorizando dispositivos móveis, ampliando acesso e democratizando serviços fiscais.

Acessibilidade WCAG

Conformidade com diretrizes WCAG 2.1, incluindo contraste adequado, navegação por teclado e compatibilidade com leitores de tela.

Resultados: Melhorias Mensuráveis de UX

O redesign resultou em melhorias significativas na experiência do usuário, modernizando a imagem institucional e facilitando o acesso aos serviços fiscais.

Consis-tência
Visual Unificada

Sistema de design padronizado eliminando inconsistências e reduzindo carga cognitiva dos usuários.

100%
Responsivo

Interface totalmente adaptável ampliando acesso universal aos serviços fiscais digitais.

WCAG 2.1
Acessibilidade

Conformidade total com diretrizes de acessibilidade, garantindo inclusão digital.

Hotjar
Validação

Análise comportamental validando decisões de design com dados reais de interação.

Aprendizados: Minha Jornada em UX (2017)

Este projeto foi um marco na minha trajetória profissional. Foi quando comecei a aplicar sistematicamente conhecimentos de UX em projetos reais, validando na prática os princípios e heurísticas que estava estudando. Os aprendizados aqui adquiridos moldaram minha abordagem de design nos anos seguintes.

Análise Heurística é Fundamental

A avaliação sistemática usando as heurísticas de Nielsen foi essencial para identificar problemas críticos e priorizar soluções de maior impacto. Este método se tornou base da minha abordagem de análise.

Iteração é Parte do Processo

A experiência de criar uma versão baseada no padrão Gov RJ e depois abandoná-la ensinou que iteração e pivotagem são naturais no design, não falhas.

Dados Validam Decisões

O uso do Hotjar para análise comportamental mostrou a importância de validar decisões de design com dados reais, não apenas intuição.

Teoria e Prática se Complementam

Este projeto consolidou minha transição para UX ao validar que os princípios teóricos realmente funcionam na prática quando aplicados com rigor metodológico.