Facilitando a encontrabilidade no site do Detran

Um estudo de redesign para a plataforma do Detran.

Ao lado esquerdo a página real e versão mobile do site do Detran (maio de 2020) e lado direito o redesign e a versão mobile.

Este estudo de caso foi uma etapa de um processo seletivo para uma vaga de Product Design.

Contexto do problema

Informações fictícias criadas pela empresa para o desafio.

Dos 12 mil atendimentos diários realizados presencialmente no Detran, 85% são de consulta de pontos da CNH, abertura de recursos de infrações e consulta de situação de veículos usados para compra.

Em uma pesquisa realizada com pessoas que fizeram algum tipo de atendimento presencial no Detran, mais de 60% relataram que tentaram realizar esse serviço através do site mas tiveram dificuldade de encontrar.

Desafio

Elaborar uma proposta para a nova home do Detran SP para facilitar a encontrabilidade dos fluxos.

Objetivo

Otimizar a experiência do usuário nos serviços do Detran online.

Por quê?

O Detran deseja ter 90% de seus serviços sendo realizados online de forma self-service.

Timeline

7 dias — o desafio chegou na quarta-feira e na quarta-feira seguinte apresentei online para o time de Product Designers.

Meu processo

Descoberta

Sendo o usuário

Para criar empatia e entender melhor o problema me coloquei no lugar do usuário e simulei cenários baseados nos atendimentos presenciais mais frequentes.

Tarefa 1: Consulta de Pontos da CNH

Acho que recuperei os pontos de uma multa que levei no passado. Como faria para verificar isso?

1. Encontrei rapidamente!

Tarefa 2: Abertura de recursos de infrações

Acho que fui multada injustamente. Como faria para recorrer?

1. Busquei no carrossel e “Saiba mais”
2. Usei Cmd+F para buscar por “infrações”
3. Não apareceu destacada
4. Encontrei depois que vi o menu principal

Tarefa 3: Consulta de situação de veículos usados para compra

Quero comprar um veículo, mas antes quero verificar a situação dele. Onde eu iria para ver isso?

Busquei no carrossel de serviços online e encontrei com certa dificuldade (“será que já passei por todas as opções?” — pensamentos).

Observações do final desta etapa:

• Excesso de informações gerou carga cognitiva dificultando o encontro das tarefas
• Me senti um pouco frustrada e ansiosa
• Links redundantes dentro de diferentes categorias (ex.: “Idoso” em dois lugares na página)
• Categorias e opções confusas (ex.: “Não tenho CNH” em “Seu Perfil”)
• Nomes diferentes para o mesmo serviço
• Carrossel de “Serviços Online” confuso
• Falta de consistência e padrões

User Flow

Registrei as telas de cada etapa para identificar o fluxo do usuário e com isso consegui:

• Avaliar as interfaces
• Observar redundâncias e entender os fluxos
• Acessar de forma rápida as telas

Comecei a levantar algumas dúvidas baseado na minha experiência no site:

• Que vocabulário as pessoas utilizam para os serviços descritos no site?
• Em qual contexto geralmente usam o site?
• Com que frequência acessam?
• Quais palavras são mais pesquisadas na busca?
• Será que existe algum padrão a ser seguido por ser site do governo? Como os outros sites do governo funcionam?

Também levantei hipóteses baseadas no mapa de calor (heatmap) que enviaram com o projeto:

Hipóteses

• Pessoas clicam no banner pois não encontram a informação na página
• Usam opções de “Saiba Mais” por não encontrarem as informações mais diretas
• A maioria das pessoas usam o celular para acessar a página

Desk Research

Fiz uma desk research para levantar hipóteses e identificar o comportamento das pessoas que acessam o site.

Trecho da fala da imagem:

"Quero uma solução rápida por parte do Detran e Correios, pois já entrei em contato várias vezes com a empresa encarregada da entrega, porém todas vezes sem sucesso, com respostas prontas que não me auxiliam em nada. Não quero ser penalizado por algo que não tenho culpa."

— Depoimento de uma pessoa no Reclame Aqui.

Muitas das informações que encontrei eram irrelevantes na resolução das minhas dúvidas ou decisões de design, então segui adiante com essas informações que encontrei.

Definição

Storyboard

Criei um storyboard baseado em hipóteses e na pesquisa de desk research. Defini um contexto e possíveis emoções da pessoa ao usar o site. Isso me ajudou a visualizar e focar em um design centrado nesse contexto e usuário.

Arquitetura da Informação

Captura de tela da etapa de arquitetura da informação

• Categorizei as informações por afinidade do conteúdo
• Eliminei duas categorias ("Seu Perfil" e "Situação")
• Agrupei as informações
• Alterei a nomenclatura de algumas opções

Desenvolvimento

HMW — Como poderíamos?

Criei questões no formato de "Como Poderíamos" (em inglês How Might We) para auxiliar no Brainstorm das soluções e encontrar oportunidades de design.

Ponto de vista: “João em mais um dia corrido de trabalho no comércio precisa consultar como está a situação dos pontos de sua carteira de motorista e tentar recorrer, pois acredita que foi multado injustamente. Ele tem medo que estoure seus pontos e ele perca sua carteira.”

• HMW usar a página para facilitar a busca pela informação?
• HMW aumentar a encontrabilidade dos fluxos importantes?
• HMW tornar aparente no site os serviços mais realizados presencialmente?
• HMW tornar os serviços presenciais do Detran self-service online?
• HMW otimizar a experiência dos usuários nos serviços do Detran online?
• HMW garantir que as pessoas usem o serviço online primeiro?

Brainstorming…💭

Gerei ideias baseadas nas necessidades das pessoas e do negócio. Usei uma matriz de priorização para ajudar a tomar decisões mais objetivas nos critérios de esforço de desenvolvimento e valor para o negócio.

Matriz de priorização

8 rascunhos em 8 minutos

Fiz 8 rascunhos em 8 minutos para gerar uma variedade de soluções, evitando me preocupar com detalhes nesse momento.

Por que escolhi mobile first?

• 97% dos brasileiros acessam a Internet por smartphone
• Mobile first me ajudou a priorizar o conteúdo importante e facilitou a criação da tela para desktop
• Auxiliou na criação de páginas mais limpas, funcionais e visualmente agradáveis

Buscando inspirações

Busquei inspirações em sites e aplicativos com diversas categorias para me inspirar e ajudar a refletir sobre o problema de encontrabilidade que estava tentando resolver.

Linguagem visual

Construi uma linguagem visual para:

• Criar consistência e reconhecimento de marca
• Pensar na acessibilidade dos elementos
• Agilizar a criação de futuras telas

Protótipo de alta fidelidade Mobile V.01

Foquei em uma interface mais minimalista para otimizar a experiência:

• Aumentando a compreensão e leitura rápida do conteúdo
• Criando espaços de respiro minimizando a carga cognitiva
• Trazendo sofisticação para aumentar a confiança

Versão mobile em 3 partes (início meio e fim da página)

Protótipo de alta fidelidade Desktop V.01

Essa foi a primeira versão do redesign para desktop.

Ainda estava insatisfeita com o resultado da seção “Fique por dentro” do site, porém o prazo era curto e essa seção do site impactaria pouco (ou nada) no objetivo de maximizar a encontrabilidade dos serviços principais do site.

Optei por seguir com as validações e depois, com os insumos dos testes de usabilidade, refiz essa e outras partes do site.

Entrega

Teste de usabilidade

Em tempos de quarentena e coronavírus, optei por fazer o teste de usabilidade de forma remota.

Compartilhei o link dos protótipos no Figma e pedi para a pessoa compartilhar a tela dela enquanto eu assistia e fazia as perguntas.

Para o recrutamento usei o Telegram: enviei mensagens para pessoas que eu sabia que tinham carteira de motorista, habilidades (uns mais outros menos) com smartphones e websites, imaginando que o contexto de usuários do Detran poderia ser bem variado.

4 pessoas participaram do teste e esses foram os cenários:

Informações da imagem para acessibilidade:

Tarefa 1 — Consulta de Pontos
“Você quer saber quantos você tem na carteira de motorista. Como você faria para ver isso?”

Tarefa 2 — Abertura de recursos de infrações
“Você acha que foi multada injustamente. Como faria para recorrer?”

Tarefa 3 — Situação de veículos usados para compra
Você quer comprar um veículo, mas antes quer saber a situação dele. Onde iria para ver isso?

Tarefa 4 — Transferência do veículo
Você quer fazer a transferência do seu veículo. Onde iria para fazer isso?

Criei a tarefa 4 para validar a encontrabilidade dos serviços que estavam no menu superior, diferentes das tarefas 1, 2 e 3 que estavam nas primeiras opções da página.

Abaixo está o exemplo de um protótipo interativo para desktop:

Gif interagindo com o protótipo versão web

Esse foi um exemplo do protótipo interativo para mobile:

Gif interagindo com o protótipo versão mobile

Resultados do teste de usabilidade

O teste de usabilidade foi feito nos redesigns de mobile, desktop e também no site original do Detran para que eu pudesse comparar os resultados.

Resultado do teste no site original do Detran

• 3/4 pessoas tentaram outras opções antes de usar o menu
• 1/4 não viu que tinha um menu
• 2/4 usaram a busca quando não encontraram a informação

"Nem tinha visto o menu, achei que era um banner"
— pessoa falando do menu principal do site

"Esse site aqui já é mais poluído, né…tem impressão que você tá navegando em um outdoor."
— pessoa falando do site do Detran

Resultado do teste no redesign para desktop

• 3/4 pessoas encontraram rapidamente os serviços mais frequentes
• 3/4 pessoas tentaram outras opções antes de usar o menu
• 1/4 não viu que tinha um menu

"Nem tinha visto essas abas de cima"
— pessoa falando do Menu

"A navegação aqui é tranquila. Foi até mais fácil que o outro."
— pessoa falando do redesign da página para Desktop

Resultado do teste no redesign para mobile

• 2/4 pessoas tentaram outras opções antes de usar o menu
• 2/4 pessoas clicaram na busca para encontrar a informação
• 1/4 não viu o menu de hambúrguer

Iterando

Com base nos testes, fiz algumas alterações na versão mobile e desktop.

Primeira versão:

Versão alterada após o teste de usabilidade:

Primeira versão do desktop:

Versão de desktop alterada após o teste de usabilidade:

Versão final mobile e desktop

Métricas para medir o sucesso

Um dos requisitos do desafio era saber como eu mediria o sucesso (ou não) da minha proposta. Essas foram minhas sugestões:

Antes do desenvolvimento

• Teste de usabilidade com os clientes do Detran dentro das agências identificando o sucesso e problemas atuais, poupando tempo e custos de desenvolvimento
• Totem (poderia ser com um iPad) na unidade do Detran com a nova home e uma pessoa do time ao lado convidando a pessoa a usar de forma self-service. Uma pessoa do time observaria e anotaria as dores e os insights
• Teste A/B na página inicial enviando parte do público para a página atual e parte para o redesign, rastreando fluxos principais de serviços online para ver quantos deles são concluídos
• Risco: quebra de identidade do site por ter a home diferente das outras páginas
• Minimizar risco: rodar por poucos dias

Depois da solução implementada

• Redução da procura dos serviços presenciais, aumentando a execução desses serviços através do site
• Realização de serviços online sobre visitas no site: número de pessoas que acessaram o site e realizaram serviços online
• Redução dos custos das unidades de atendimentos presenciais
• Coleta de feedbacks no site (ex.: Poll do Hotjar) com categorização dos problemas mencionados antes e depois da implementação

Aprendizados

A empresa que passou o desafio não havia pedido essa etapa, mas achei válido compartilhar os aprendizados que tive durante o projeto.

Questionar cedo teria sido importante

No meio do projeto tive dúvidas se o esperado era refazer um fluxo completo dos serviços. Poderia ter questionado cedo para esclarecer antes de dar início
ao processo de design.

Validar cedo foi importante

No teste de usabilidade percebi que somente o affordance nos menus não eram suficientes para eles serem vistos. A cor azul do menu indo de ponta a ponta lembrou um banner, maximizando o comportamento de “banner blindness".

Novas validações seriam necessárias

Outros testes seriam necessários para validar a solução apresentada.

Exemplo de possíveis testes de usabilidade e de observação com totem e pessoas usando o site no Detran; Card sorting para categorização.

Curiosidade

Com esse estudo de caso e conversas com profissionais da empresa, passei no processo seletivo :)

O UX Collective doa US$1 para cada artigo publicado na nossa plataforma. Esta história contribuiu para o UX Para Minas Pretas (UX For Black Women), uma organização Brasileira focada em promover equidade para mulheres Pretas na indústria de tech através de iniciativas de ação, empoderamento, e troca de conhecimento. Silêncio contra o racismo sistêmico enraizado na sociedade não é uma opção. Construa a comunidade de design na qual você acredita.