top of page
Image by UX Indonesia

Projeto de redesign de site 

  • Análise da interface (UI) do site: Análise Heurística do site vigente;

  • Benchmarking dos sites de concorrentes e realização de pesquisas;

  • Mapear os stakeholders e fazer o sitemap;

  • Construir personas, desenhar as jornadas dos usuários e fazer um guia de conteúdo;

  • Criar wireframes, style guide e protótipos de alta fidelidade;

  • Realizar teste de usabilidade;

  • Implementar melhorias com base nos dados obtido através dos testes;

  • Design Handoff.

Contexto

O desafio escolhido para o programa de treinamento UX/UI Design foi redesenhar o site da empresa. O objetivo era atualizá-lo e deixá-lo mais moderno, atraente e amigável para os públicos que o acessam. 

 

A empresa em questão é a Fóton Informática. Com 30 anos de história, é especializada em automação bancária. O site atual tem como foco mostrar os produtos e serviços que oferecem, mas também atrair talentos, já que a empresa passa por um processo de crescimento e precisa de profissionais qualificados para trabalhar nos projetos de seus clientes. 

Processo

Objetivo

Melhorar o site da empresa, deixando-o mais moderno. Usar as melhores práticas de UX para atualizar o visual e refinar os conteúdos.

​

Atuação

Para chegar a versão final, realizei as seguintes atividades:

  • Análise Heurística​;

  • Sitemap;

  • Mapeamento dos stakeholders e seus interesses dentro do projeto;

  • Criar personas e desenhar a jornada dos usuários;

  • Benchmarking e pesquisa de referências visuais;

  • Desenhar um Guia de Conteúdo;

  • Wireframes, Style Guide e protótipos de alta fidelidade;

  • Realizar testes e pesquisas com usuários;

  • Design Handoff.

​

Ferramentas

  • Figma

  • Figjam

​

As fases do processo 

O processo foi divido em três fases, utilizando a metodologia do Duplo Diamante: descoberta, ideação e validação.​

​

Fase 1: Descoberta

A primeira atividade realizada nesta fase inicial foi fazer uma análise aprofundada da interface do site da empresa. 

Fiz a Análise Heurística, baseada nas 10 heurísticas de Nielsen. Foi preciso entender quem eram os usuários do site para fazer a avaliação da experiência e apontar os pontos que precisavam ser melhorados no projeto de redesign.  

Definição do público alvo do site e seus interesses, em apresentação. 

Depois de apontar todas as inconsistências existentes no site vigente, através dessa análise foi possível construir o sitemap para a nova versão e mapear os stakeholders, detalhando seus interesses nesse projeto.

Sitemap construído no Figma 

Por fim, foi a vez de fazer pesquisas para definir as personas e suas jornadas dentro do novo site, assim como estruturar um guia de conteúdo.

Guia de conteúdo construído no Figjam, para estruturar o tom e voz da empresa.

Por fim, foi a vez de fazer pesquisas para definir as personas e suas jornadas dentro do novo site, assim como estruturar um guia de conteúdo.

Tabela comparativa para avaliação realizada no benchmarking dos sites dos concorrentes.

O passo seguinte foi fazer um pesquisa para coletar de referências visuais. Os dados coletados da Análise Heurística, do benchmarking dos sites de concorrentes e as referências visuais, assim como as melhores práticas de usabilidade foram utilizadas como base para de um branstorming realizado com objetivo de decidir o que seria usado no projeto do novo site a ser desenvolvido. 

 

Só depois, pude finalizar essa etapa do processo estruturando os primeiros wireframes e construindo o Style Guide (Guia de Estilo) para o site. 

Primeira versão do wireframe para Home Page, desenvolvida no Figma.

Fase 3: Validação

Na terceira e última etapa do projeto, comecei construindo os protótipos de cada página do site baseando nos wireframes anteriormente desenhados, aplicando os padrões definidos de acordo com a identidade da marca, contida no Style Guide. 

Protótipos em alta fidelidade de algumas páginas do site, construídos no Figma

Com o site prototipado, chegou o momento de testá-lo. Foi realizado um teste qualitativo com sete usuários, através de entrevistas feitas por videoconferência.

​

A ferramenta Maze, utilizada para realização dos teste, proporcionou uma série de dados, que analisados em conjunto com os feedbacks dos participante, gerou uma série insights sobre melhorias que podiam ser implementadas. 

​

Essas melhorias foram listas e avaliadas dentro de um quadrante que media o valor e esforço necessário para realizar cada uma delas. A partir disso, pude decidir junto a equipe qual mudança seria implementada. 

Quadrante de Valor x Esforço - Figjam

De acordo com o valor que seria gerado dentro do prazo que tinha para entrega do projeto, a decisão final foi a de fazer a maior parte das melhorias apontadas pelos usuários, com exceção de uma que tomaria muito tempo e agregaria pouco valor do ponto de vista do negócio.  

​

Finalmente, com todas mudanças necessárias efetuadas e o protótipo finalizado, atendendo aos interesses dos stakeholders envolvidos, o projeto foi apresentado ao departamento de marketing da empresa e à diretoria para aprovação final. Com aval de todos, foi realizado o design handoff e seguiu para o desenvolvimento.

Teste com usuários

Metodologia 

Teste de usabilidade qualitativo, realizado com sete usuários, de quatro perfis profissionais diferentes, em três regiões do país.

 

A quantidade de participantes foi decidida baseada em um estudo realizado pelo Nielsen Norman Group, que revela que testes feitos com pelo menos cinco pessoas já podem demonstrar 80% dos problemas de uma interface. 

 

Objetivos 

  1. aprender sobre o comportamento dos usuários;

  2. identificar possíveis problemas com a interface, conteúdo e design do site;

  3. descobrir oportunidades de melhoria do produto, através dos dados coletados e feedbacks.

​

O teste

Havia três missões que usuários deveriam cumprir para testar a usabilidade e algumas funcionalidades do novo site. Todos os teste foram gravados e a partir do compartilhamento de tela, pude acompanhar como cada um se comportava ao nevegar pelo site. 

​

Ferramentas

  • Maze

  • Protótipo navegável do Figma

​

Através do Maze foi possível criar as missões para os usuários cumprirem, mas eles também podiam navegar pelo protótipo do Figma, para explorar mais o site e os conteúdos. 

​

Após o teste, os usuários receberam um link para responder um questionário anônimo, no qual era possível avaliar a experiência que tiveram com o site. 

​

O Maze ofereceu dados qualitativos e alguns quantitativos em relação ao teste e combinando os dados com as informações obtidas durantes as entrevistas, foi possível avaliar o sucesso de cada missão realizada e o nível de criticidade de alguns problemas de usabilidade identificados.

​

​

​

​

​

​

​

 

 

 

 

 

 

 

 

​

Mapa de calor (dado qualitativo) divulgado pelo Maze após os teste realizados.

Conclusão

Resumi as recomendações vindas dos feedbacks e das análises de dados, para junto com a equipe, avaliar o que era mais urgente e viável para entregar um produto de qualidade para os usuários, dentro do prazo. 

​

As principais decisões foram em relação a melhoraria da visibilidade de botões, construir funcionalidades mais conversacionais (para que o usuário entenda o que está ativo ou não) e por fim, diminuir a quantidade de clique e scroll necessários para efetuar uma ação. 

Meu papel:

Trabalhar de forma colaborativa com outra UX Designer para construir interfaces obedencendo as boas práticas de usabilidade

Realizar pesquisas para construir persona e guia de conteúdo

Analisar dados, investigar hipóteses e mapear jornadas

Realizar e acompanhar testes para validar os protótipos

bottom of page