Site PRODAP Proposta atualizada de site institucional

Solução para atualização visual e tecnológica do novo site com foco maior em serviços e interatividade com os clientes.

O Problema

Contexto Geral

Entendendo o cenário

A partir de 2023 gestão do órgão passou a buscar maior interatividade com o cidadão e cliente, além continuar com a busca da melhoria da qualidade de serviço. Para atingir este objetivo novas ferramentas e processos foram implantados e o site precisava refletir este novo momento funcionalmente e visualmente.

Abordagem estratégica

A equipe de UX realizou todo o processo de criação de novos produtos, já que a abordagem sugeria esta ação e não apenas ajustes no site atual, neste caso a abordagem seria exclusivamente feita em torno da usabilidade, o que pouco se refletiria visualmente e não atenderia aos requisitos necessários para a mudança de abordagem.

Sobre o site a ser substituído

Informações Adicionais

O atual site reflete um padrão visual web que vem sendo utilizado deste 2015 e proporcionava algumas amarras para que os objetivos propostos fossem atingidos.

Apesar de haverem recursos de acessibilidade no site, estes não foram migrados ainda para a barra padrão web do GEA (Design System) que na sua versão mais nova inclui o recurso de Libras.

Novas ferramentas poderiam ser incorporadas com dificuldade na manutenção da atual linguagem visual web, como esta não foi atualizada, foi permitida a equipe de UX fazer uma proposta sem seguir os padrões atuais e um pedido específico da gestão foi que elementos amazônicos fizessem parte da composição do produto.

Envolvidos e Ferramentas

Envolvidos

  • Equipe de UX do PRODAP
  • Representantes de áreas diversas do PRODAP
  • Clientes e funcionários do PRODAP

Ferramentas

Elementos que deram suporte ao desenvolvimento do projeto

Processo

Início

Entendimento do produto

Com a necessidade de haver um mecanismo ágil de relacionamento entre o PRODAP, clientes, cidadão e servidores, a equipe de UX buscou estabelecer as principais funcionalidades do produto, as informações necessárias e eventuais automações com outros sistemas corporativo do Governo.

Após este entendimento inicial, a equipe tratou de compor as ideias referentes ao produto para compor uma matriz com as certezas, suposições e dúvidas (Matriz CSD)

Nascia o Conjunto de especificações iniciais do produto, que após rodadas de discussão em equipe com o apoio do resultado de uma pesquisa feita com representantes internos e externos, foi gradativamente atualizado para refletir a realidade.

Matriz CSD

Este quadro inicia o desenvolvimento específico das Ferramentas de UX. Após um processo um brainstorm da equipe todas as ideias foram enquadradas em uma das colunas da matriz. Serão exibidos separadamente os conteúdos de cada coluna.

Certezas

Suposições

Dúvidas

Para validar todas as informações da matriz foi realizada uma pesquisa com os potenciais usuários da solução.

Pesquisa

Foi criada uma pesquisa com perguntas direcionadas e algumas específicas para validar ou não os pontos elencados na matriz CSD e o link enviado via Formulário do Google.

Os resultados foram compilados em arquivos disponíveis em clicar aqui.

Com os resultados consolidados e as outras ideias que surgiram durante a pesquisa ou em contato com alguns dos entrevistados, a matriz passou por um processo de confirmação.

Confirmação da Matriz CSD

Após a pesquisa, as suposições foram sanadas e apenas duas dúvidas permaneceram, a matriz ficou com a seguinte disposição:

Certezas

Suposições

Como é possível perceber, dúvidas foram suprimidas e suposições reduzidas.

De posse deste novo quadro, foram elaboradas as histórias de usuário pertinente a cada um dos itens.

Histórias de usuários

Este instrumento permite sabermos que tipo de usuário, faz o que com qual finalidade no sistema. Se alguma das ideias elencadas anteriormente não puder ser corretamente transformada em uma história de usuário, então corre o risco de poder ser descartada.

A equipe chegou as seguintes histórias, para os seguiintes usuários

Usuários

Clientes

Administrador

Desenvolvedores

Estas histórias foram organizadas em grupos de importância, para a elaboração do MVP.

Mínimo Produto Viável (MVP)

Todas as histórias de usuários devidamente agrupadas em grupos por assunto ou funcionalidade, são colocadas em ordem de importância da esquerda para direita (assunto) e de cima para baixo(histórias de usuário), conforme a ilustração abaixo:

Foram encontrados 7 grandes grupos, relacionados por ordem de importância: Acesso ou navegação, Interface, Recurso, Desenvolvimento, Comunicação, Suporte e Administração.

Jornada do Usuário

Trata-se da representação gráfica das etapas de relacionamento do cliente com um produto ou serviço, que descreve os passos percorridos antes, durante e depois de sua utilização.

A jornadada foi composta em 3 fases ou estágios: antes da oferta do serviço; durante o uso; e pós uso

A partir de cada marco em seus respectivos estágios, é possível fazer a leitura de cada procedimento em ordem de ocorrência que será precorrido pelo usuário. Cada um deles sinalizado por uma cor: verde (ponto de ganho) ou vermelho (ponto de dor)

Devido a natureza do sistema, a jornada do usuário foi feita para Cada um dos perfis, abaixo seguem os diagramas.

Usuário

Perfil destinado a acesso de informações abertas variadas e comunicação com o órgão.

Cliente

Perfil destinado ao estabelecimento de relações institucionais e seus desdobramentos, com esta abordagem serviços podem ser acoompanhados e solicitados on-line.

Administrador

Perfil destinado ao gestor máximo do site, tratando os conteúdos e funcionalidades.

Fluxo do Usuário

Esta ferramenta apresenta de forma macro o caminho percorrido pelo usuário no sistema, dentro da ordem estabelecida de eventos na sua rotina de uso.

A representação conta com a seguinte simbologia

  • Tela ( )
  • Tarefa ( )
  • Decisão ( )
  • Ação ( )
  • Setas verdes (caso a resposta da decisão seja SIM)
  • Setas vermelhas (caso a resposta da decisão seja NÃO)

Apresentações

Como as reuniões aconteceram e foram propostas as soluções

Reunião 1

Na primeira reunião foram apresentados nossos quadros de inspirações (Moodboard) formado por players e sites com tecnologias ou linguagens que são referências e quatro propostas elaboradas por cada membro da equipe, levando em conta características visuais relevantes do Moodboard que estão alinhadas com os requisitos levantados no processo.

Moodboard inicial

Propostas

Houveram sugestões e pedidos pelos participantes da reunião em relação a quebra de paradigma em relação a linguagem gráfica ainda vigente entre outras, como o aumento ao foco ao cliente e a serviços, além da inserção de algum elemento de cunho mais amazônico. Com a liberdade de propor nova linguagem visual, a equipe partiu para a composição nova.

Reunião 2

Com as definições da primeira reunião e a liberdade de composição, foi elaborado um novo Moodboard formado por players e sites com tecnologias ou linguagens que são referências a equipe escolheu um projeto base e propôs variantes com base na cor verde (bandeira) e tons mais escuros para sair do convencional da bandeira, sempre levando em conta características visuais relevantes do Moodboard que estão alinhadas com os requisitos levantados até o momento.

Para atingir o requisito de associar tecnologia a Amazônia, foram feitos testes com ferramentas de IA e resultaram em imagens com base em rio com circuitos e de robôs na floresta. Ambas foram usadas nas propostas.

Moodboard final

Propostas finais

Na proposta escolhida é possível ver o foco em serviços e interação com o cliente e com a instituição, tem área exclusiva com destaque visual para os descritivos de serviços da instituição, seguindo de áreas informativas e vídeos. A nova área de publicações segmenta os arquivos em "Decretos e portarias", "Atas de licitações", além de "Documentos diversos".

Fechando o site, uma linha com a "Agenda do presidente" (transparência), "Aplicativos para você" (com os Apps do GEA) e indicadores dos serviços digitais do GEA (área "Serviços no Portal").

Concluindo, foi criado um novo padrão de rodapé, com sessões bem definidas: uma institucional (inclui as redes sociais), uma com links úteis, acesso rápido e serviços do governo com links à partir das categorias definidas no portal de serviços (Cidadão, Empresa e Servidores). A última linha do rodapé repete os links a áreas mais destacadas do site.

Entregas

A relação abaixo compõe todo acervo técnico produzido pela equipe: