Movimento SC - Estudo de caso de redesign de UX/UI

Visão geral

Este case é referente ao redesign da página inicial do site Movimento SC.

Categoria

Web Design, Mobile Design, Design responsivo

Colaboradores

Sthefany Caires

Atuação

UX/UI Designer

Desafio

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.

Processo de Design

Para esse desafio, foi aplicado o método Double Diamond, composto por 4 etapas:

• Descoberta;
• Definição;
• Idealização;
• Entrega.

Double Diamond

Etapas do Double Diamond

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

Análise Heurística

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.

Análise Heurística

Análise Heurística da página inicial

Para uma melhor visualização, acesse a versão em PDF da Análise Heurística.

Teste de usabilidade da solução atual

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.

Pesquisa de Mercado

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.

Análise Heurística

Pesquisa de mercado

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é.

Wireframes

Wireframes
Wireframes

Para uma melhor visualização, acesse o protótipo do wireframe no Figma.

💡 Ideação e Entrega

Componentes 

Componentes
Componentes

Componentes

Protótipo de alta fidelidade - Desktop

Alta fidelidade
Alta fidelidade

Para uma melhor visualização, acesse o protótipo de alta fidelidade desktop no Figma.

Protótipo de alta fidelidade - Mobile

Para uma melhor visualização, acesse o protótipo de alta fidelidade mobile no Figma.

Retrospectiva e aprendizados

Através desse desafio, consegui aplicar na prática diversos conceitos de diferentes tipos de pesquisas, testes com os usuários, usabilidade e prototipação, além de também ter desenvolvido um pequeno Design System utilizando as boas práticas do Design Atômico.

A maior parte do case foi desenvolvida em apenas três dias, com alguns pequenos ajustes na alta fidelidade dos protótipos sendo realizados depois. Na primeira versão, tive alguns problemas na prototipação das interações dos botões, e após algumas tentativas de fazer eles funcionarem como deveriam que acabaram não dando tão certo, achei melhor refazê-los de uma forma um pouco diferente, mas funcional.

Próximos passos

Num projeto real de redesign, realizaria mais uma rodada de testes com os usuários que já foram entrevistados para receber um feedback sobre a nova versão, e já faria as alterações caso elas fossem necessárias. Por fim, alinharia a viabilidade técnica de todas as mudanças com os desenvolvedores, e após a implementação, faria uma checagem para verificar se a nova versão está fidedigna ao design. 

Mockup notebook e mobile

Outros projetos

buscafarma
Buscafarma - Acervo de Farmácias
Saiba mais
Vegthais
VegThaís - Um estudo de Design Gráfico
Saiba mais

sthefanycaires@outlook.com