Case study
Responsive web
Redesign
Visão geral
Este case é referente ao redesign da página inicial do site Movimento SC.
Atuação
UX/UI Designer
Duração
1 semana
Ferramentas
Figma
Categoria
Web design responsivo
Considerando a página inicial do site Movimento Santa Catarina pela Educação (https://movimentosc.com.br/), identificar os principais pontos de melhoria com base em boas práticas de usabilidade, interface e experiência do usuário. A partir da análise, construir um protótipo web e mobile que aplique princípios de design de interface, como estética visual, hierarquia de informações, uso adequado de grid, cores e tipografia, espaços e acessibilidade. Além disso, levar em conta os princípios de usabilidade, como facilidade de uso, clareza nas interações e eficiência na realização de tarefas para justificar as melhorias além da organização de cores, tipografia e componentes.
Para esse desafio, foi aplicado o método Double Diamond, composto por 4 etapas:
Descoberta;
Definição;
Idealização;
Entrega.
Esse método foi escolhido porque, apesar de ser um desafio que é composto por apenas uma tela, se faz necessário entender a visão e opinião de outros usuários, que podem enxergar outros problemas de usabilidade e estética que podemos acabar deixando passar.
Durante a etapa de descoberta, foram aplicadas análises, pesquisas e testes a fim de entender melhor quais são os problemas. Já na fase de definição, foi feita a proposta da solução e o início dos rascunhos dos protótipos, com os wireframes e a média fidelidade. Na idealização, a versão final da alta fidelidade da solução foi prototipada, e por fim, na entrega, os componentes foram organizados e categorizados para que o handoff para os desenvolvedores pudesse ser realizado.
🔎 Descoberta
Análise da página atual
O primeiro passo para entender melhor a plataforma foi acessá-la tendo em vista o seu público-alvo, este que é composto majoritariamente por:
Trabalhadores catarinenses interessados em ampliar a escolaridade e qualificação profissional;
Pessoas que buscam oportunidades de emprego e desejam se qualificar para o mercado de trabalho;
Empresas que buscam novos talentos para integrar suas equipes e valorizam a qualificação profissional;
Profissionais de Recursos Humanos em busca de soluções para capacitação e desenvolvimento de suas equipes;
Jovens em busca do primeiro emprego e de oportunidades de aprendizagem.
Enquanto navegava pela página inicial e pelas outras páginas do site, encontrei algumas questões que me incomodavam e poderiam ser melhoradas, sendo elas alguns problemas de usabilidade e também de estética.
Interface atual (jul/2023) da Página Inicial do Movimento SC
Para esse desafio, era necessário entender quais eram os problemas atuais da página e como eles poderiam ser melhorados. Uma forma muito utilizada para verificar problemas de usabilidade nas interfaces é a análise heurística, já que através dela conseguimos avaliar e classificar os problemas encontrados para podermos pensar em melhorias.
Para uma melhor visualização, acesse a versão em PDF da Análise Heurística.
Após fazer a análise heurística, era importante entender como outros usuários interagiam com a página e quais eram os problemas identificados por eles. Para isso, foi aplicado um teste de usabilidade com 4 usuários, e através das respostas obtidas foi possível obter vários insights interessantes:
2 dos 4 usuários demonstraram/sentiram:
Confusão com o item de menu “Currículos”;
Confusão com o link “Acessar” dos cards de cursos;
Insatisfação com o posicionamento do botão “Ver mais” das seções;
Quebra de continuidade entre as seções iniciais e as finais;
Confusão sobre o botão “Fale conosco”.
3 dos 4 usuários demonstraram/sentiram:
Falta de informações no rodapé.
Todos os usuários demonstraram/sentiram:
Insatisfação com o carrossel;
Insatisfação com a linha laranja abaixo da palavra “gratuitos”;
Insatisfação sobre o carrossel na versão mobile;
Insatisfação sobre as imagens e seções na versão mobile.
Para visualizar a documentação completa, acesse a versão em PDF do Teste de Usabilidade.
Da mesma forma que entender as dores e necessidades dos usuários é importante, também é preciso conhecer e analisar os concorrentes, já que eles podem trazer insights e inspiração para resolver os problemas encontrados e melhorar a interface. Para fazer isso, foi realizada uma pesquisa de mercado, onde foram analisados os seguintes aspectos:
Layout;
Tipografia;
Cores;
Ícones e elementos gráficos;
Navegação/interação;
Outros elementos relevantes.
Os sites escolhidos para a realização da análise foram: Instituto Ayrton Senna, CIEE, Vagas.com e Catho.
Para uma melhor visualização, acesse a versão em PDF da Pesquisa de Mercado.
📋 Definição
Proposta de solução
Com base em todos os dados obtidos através da análise heurística, testes de usabilidade e pesquisa de mercado, foi possível mapear qual seria a proposta de solução que será aplicada na construção do protótipo.
Ações a serem realizadas:
Fazer melhorias no primeiro menu;
Ocultar o item de menu “Currículos”;
Padronizar grid da página;
Adicionar uma busca na página;
Fazer mudanças no carrossel de imagens;
Melhorar visualização dos textos;
Fazer visualização de quantos itens existem no carrossel de vídeos;
Mudar posicionamento do botão “Ver mais” das seções;
Padronizar cards e tipografias;
Adicionar um texto complementar no botão flutuante;
Adicionar ações de hover nas interações;
Corrigir as imagens de “Notícias”;
Fazer mudanças no rodapé.
