Estudo de Caso UX e UI Design — Landing Page Alertas do Diário Oficial

Brefing: a landing page Alertas do Diário Oficial tem como objetivo emitir alertas aos seus cadastrados quando um assunto do seu interesse for publicado no Diário Oficial da União, tais como licitações, decretos, editais e concursos públicos, por exemplo.

Landing Page atual da ferramenta:

A página é extensa, o que pode desmotivar o usuário a navegar por toda estrutura e deixar de acessar os recursos chaves. Outra coisa, a quantidade e intensidade das cores pode ser outro fator limitante de usabilidade, já que demonstra um certo volume visual sem necessidade. Ademais, informações sobre a utilização da ferramenta não estão muito claras para quem acessa a página pela primeira vez; é crucial que o usuário entenda as entenda logo que entra na plataforma para compreender a proposta de valor.

As landing pages têm por objetivo venderem um produto ou serviço, capturar assinantes e dados sobre eles, logo tais características podem interferir no foco principal da página.

Problema:

1. Usuários não compreendem o propósito da ferramenta, podendo ocorrer perda de leads;

2. Volume visual, comprometendo o foco do visitante na proposta da página.

Objetivos:

1. Analisar e identificar pontos positivos e negativos da Landing Page Alertas do Diário Oficial;

2. Esclarecer do que se trata e qual a função da plataforma;

3. Melhorar identidade visual e call to action.

Análise da página:

A falta de uma logomarca pode dificultar a associação do site com o Diário Oficial da União, a atual imagem do banner não aparenta relação com as atividades desempenhadas pelo site e ainda, o texto está aglomerado e pode dificultar a visualização das informações pelo usuário. Pequenas mudanças como os itens do texto serem colocados em tópicos, uma imagem ou vídeo relacionados com a proposta da página ajudariam a contar melhor uma história.

Os tópicos colocados em recursos são um tanto redundantes e podem ser pontuados em ‘como funciona a plataforma’ em um breve vídeo explicativo. Deve ficar claro as vantagens que o usuário terá quando usar a ferramenta, dizendo por exemplo “fique informado sobre novos concursos públicos”.

Os passos a serem seguidos estão de acordo com o objetivo da página, no entanto, não são relevantes se o usuário não compreender a proposta de valor. Por exemplo, no passo 2 está escrito “Vá em MEUS TERMOS e insira palavras de seu interesse (nome, documentos, processos, instituições)”, sendo assim, caso o usuário não entenda a ferramenta podem lhe surgir questões do por quê ele colocaria seus documentos ali e com qual finalidade. Isso também se reflete no passo 3, do por que ele verificaria a caixa de entrada todos os dias, com qual propósito?

Na sessão dos planos, o usuário consegue perceber intuitivamente que as vantagens ao lado esquerdo atende ao plano Basic e o direito ao Pro, no entanto, existem algumas considerações. O check dos itens e cores estão confusos, e ainda o item “anúncios” pode conotar ao usuário um senso de emergência e incômodo, uma alternativa seria colocar “sem anúncios”.

O design fica pior em sua versão mobile, onde os textos se desencontram:

Um melhor posicionando dos ‘checks’ com cores fixas e chamando atenção para as vantagens dos planos com um botão de call to action são uma alternativa.

Como pontos positivos, a espécie de social proof no texto em destaque ‘18000+’ usuários é positivo, pois trás o senso de aprovação e pertencimento. Mais um ponto positivo para a janela “Envie suas dúvidas” permitindo aproximação com imediata com o usuário.

Proposta:

Com base na análise propomos uma Landing com os seguintes itens em sua estrutura:

· Redução da extensão da página;

· Logomarca adicionada ao topo e no final da página;

· Principais serviços fornecidos em tópicos e centralizados;

· Vídeo sobre a plataforma, serviços e planos;

· Manutenção da janela “Envie suas dúvidas”;

· Reestruturar na call-to-action.

Versão WEB

Versão Mobile

Guia de estilo

Paleta de Cores

As associação das cores escolhidas trazem uma combinação harmônica entre o senso de eficiência e responsabilidade evidenciados pelo tom cinza escuro com indicativos de ‘seguir em frente’ pelo tom verde; a cor cinza clara completa a cartela proporcionando equilíbrio visual.


Tipografia

Conclusão

Design é muito mais do que uma interface bonita. Neste estudo de caso, o propósito não foi somente deixar a plataforma mais atrativa visualmente, mas também apresentar ao usuário as funções e serviços que a ferramenta oferece de maneira facilitada e sem esforço já nos primeiros instantes em que acessá-la.


Obrigada por ler!

Se você curtiu deixa seu 💚 para me motivar ainda mais! Adoraria saber sobre suas ideias.

Se quiser conversar sobre UX/UI Design ou mesmo dizer um ‘oi’, fala comigo! abigail.mgouveia@gmail.com ou conecte-se a mim no LinkedIn