Technical Share

UX Case, Web & App Design

/

2022

UX Designer / UI Designer

Teal Flower
Teal Flower

Sobre o projeto

Durante 15 dias participamos da fase final do Programa de Formação - Season 3 do Grupo FCamara, em que nos reunimos em uma Squad e desenvolvemos uma aplicação web responsiva utilizando todo o processo de UX. Para contribuir na colaboração e planejamento da equipe, utilizamos metodologias ágeis como dailys e sprint planning, além de ferramentas como o Trello para documentação das etapas e reuniões.

Meu papel

Nesse projeto eu atuei durante todo o processo juntamente com o restante da equipe de design, mas me dediquei principalmente nas fases de pesquisas e desenvolvimento de interfaces.

Processo

Como se tratava de um projeto a ser desenvolvido em curto período, decidimos adotar o processo do Double Diamond, que mapeia todas as etapas de desenvolvimento e cria pontos de convergência e divergência durante o processo, necessários para criar uma linha de pensamento utilizada por diversos designers.

Acesse os protótipos

Versão Mobile / Versão Web


Analisando o cenário

Antes de começar a busca por soluções, nossa equipe se reuniu para alinhar expectativas e entender melhor o problema. Para isso, fizemos um workshop utilizando a técnica 5W1H, que nos ajudou a levantar perguntas estratégicas e gerar insights valiosos.

Pesquisa inicial

Para compreender o cenário das mentorias na área de tecnologia, realizamos uma pesquisa exploratória. Um dos primeiros passos foi um Desk Research, onde buscamos dados e estudos que pudessem nos ajudar a identificar padrões e oportunidades.

O que descobrimos?

🔹 Um estudo da Olivet Nazarene University, feito com 3 mil pessoas, revelou que 76% acreditam na importância de um mentor, mas apenas 37% têm um.

🔹 A pesquisa também mostrou que relacionamentos de mentoria geralmente se desenvolvem de forma natural (61%), e que profissionais que contam com mentores se sentem mais satisfeitos em seus trabalhos.

🔹 Além disso, encontramos um estudo sobre mentoria online no LinkedIn, que revelou algumas motivações dos mentorados:

  • 39,3% buscam indicação de contatos profissionais para expandir suas oportunidades.

  • 28,6% querem orientação para crescimento na carreira.

  • 14,3% desejam recomendações de leituras para se manterem atualizados.

  • 10,7% querem entender as práticas do mercado na área em que desejam atuar.

Com essas informações em mãos, seguimos para as próximas etapas da pesquisa e definição da solução.

Benchmarking

Para entender melhor as soluções já disponíveis no mercado e identificar oportunidades para o nosso projeto, fizemos uma análise comparativa entre algumas plataformas. O objetivo era avaliar como elas abordam a mentoria e quais diferenciais poderíamos explorar para atender melhor às necessidades dos usuários.

Plataforma

Proposta de Valor

Possui perfil com informações dos usuários?

Possui a visualização da agenda do mentor?

Possui design responsivo?

Possui Bate Papo?

Notas

ADPList (Direto)

Oferecer acesso gratuito para pessoas que procuram mentores, mentorados e grupos de estudos.

SIM

SIM

SIM

Apenas para mentoria

- Opção de match com mentores.
- Possui um feed para compartilhamento de conteúdos, dúvidas, trabalhos ou conquistas.

Belive (Direto)

Maior rede colaborativa do mundo que usa o tempo como moeda para permitir a colaboração e a igualdade de oportunidades entre as pessoas.

SIM

SIM

SIM

SIM

- Botão de disponibilidade para agendamentos.
- Possibilita a troca de conhecimento entre todos os usuários.

Preply (Indireto)

Plataforma de aprendizado online que conecta alunos a tutores, focando principalmente no aprendizado de idiomas. A missão é tornar o aprendizado o mais conveniente, acessível e agradável possível.

NÃO

SIM

SIM

Apenas entre aluno e professor

- Conjunto de lições pós-mentoria.
- Monitoração de habilidades com testes interativos.

Descoberta

Após finalizar essa primeira parte do processo de descoberta do projeto e conversando com mentores disponíveis no hackathon, percebemos que nossa pesquisa estava bastante descentralizada e voltada para o contexto geral de usuários que participam de mentorias. Então, nessa segunda fase focamos em entender melhor o contexto dos funcionários do Grupo FC e saber quais eram suas reais necessidades.

Matriz CSD

Aproveitando o momento de conversa que tivemos com alguns usuários sobre o cenário atual de networking e a prática de solução de dúvidas entre o funcionários, conseguimos adicionar algumas novas informações na nossa matriz, que posteriormente foram validadas.

Pesquisa Quantitativa (Questionário)

No nosso questionário quantitativo, aplicado por meio do Google Forms, recebemos 20 respostas. A análise dos dados revelou que cerca de 50% dos participantes têm entre 18 e 24 anos, sendo a maioria atuante no setor de desenvolvimento e com alto nível de senioridade.

  • Sobre as preferências de formato para as mentorias, os participantes da pesquisa indicaram maior preferência por chamada de voz (60%) e videoconferência (35%).

  • Quando perguntados sobre o uso de plataformas de mentorias, apenas 10% afirmaram já ter utilizado alguma.

Para visualizar melhor os insights obtidos, reunimos os principais dados no infográfico abaixo:

Pesquisa Qualitativa (Entrevista)

A partir da nossa Matriz CSD, transformamos nossas suposições e dúvidas em um roteiro estruturado para entrevistas com os usuários. Conversamos com 5 participantes, que compartilharam insights valiosos sobre suas dores e necessidades:

  • Falta de centralização na comunicação: acompanhar conversas espalhadas por diferentes canais era um grande desafio.

  • Dificuldade em equilibrar demandas: conciliar o trabalho com o apoio a profissionais mais iniciantes impactava o planejamento e a disponibilidade.

  • Baixa visibilidade sobre as habilidades dos colegas: muitos sentiam falta de um meio eficiente para conhecer melhor as competências dos outros e encontrar as pessoas certas para ajudar na resolução de problemas.

Tive a oportunidade de participar ativamente dessa fase de entrevistas com os usuários, e essa experiência foi extremamente valiosa para o meu aprendizado. Como foi minha primeira vez conduzindo esse tipo de interação, percebi a importância de saber guiar a conversa de forma estratégica, criando um ambiente confortável para o entrevistado e explorando ao máximo suas respostas. Esse processo me fez entender que uma boa entrevista vai além de apenas fazer perguntas — trata-se de saber escutar, interpretar e aprofundar as questões para obter insights realmente relevantes.

Definição

Após todo o processo de compreensão e validação das necessidades dos usuários, avançamos para a fase de definição do projeto. Como ponto de partida, criamos duas personas, baseadas nos perfis dos usuários identificados em nossa pesquisa, para orientar o desenvolvimento da solução de forma mais direcionada e assertiva.

Personas

Job Story

Para representar melhor nossas personas e aprofundar a compreensão sobre suas necessidades, decidimos criar um Job Story. Esse método nos ajuda a contextualizar a experiência do usuário, focando no como, o quê e por quê de suas ações. Além disso, ele facilita a comunicação entre a equipe e incentiva uma abordagem mais orientada às motivações e desafios reais dos usuários.

Proposta de Valor

Para entender melhor como esse projeto poderia se diferenciar dos outros e como isso poderia incentivar a empresa a implantá-lo e os usuários a utilizá-lo, a proposta de valor vem organizando e expondo melhor alguns pontos fundamentais que justificam a proposta da plataforma.

Ideação

Brainstorm & Método MoSCoW

Após analisar todo o cenário e validar nossas ideias por meio de pesquisa, análise de dados e conversas, percebemos que geramos diversas propostas, mas nem todas são essenciais para o Produto Mínimo Viável (MVP). Para definir o que realmente agrega valor à experiência do usuário, aplicamos o método MoSCoW. Primeiro, realizamos um brainstorm para agrupar todas as ideias e, em seguida, estabelecemos a priorização de cada uma.

Fluxo do usuário

Após priorizar as funcionalidades iniciais do projeto, desenvolvemos o fluxo de usuário e criamos wireframes de média fidelidade para garantir uma experiência intuitiva e coerente para o nosso produto.

Protótipos

Wireframe de média fidelidade

Com base nos processos de ideação feitos anteriormente avançamos para a fase de prototipação, seguindo o fluxo de usuário.

  1. Primeira Proposta

Inicialmente, desenvolvemos um conjunto de wireframes no estilo dashboard, organizando diversas informações na tela inicial e incluindo um menu lateral para a navegação na plataforma. No entanto, ao conduzir um teste de usabilidade com oito usuários, observamos que 50% deles tiveram dificuldade em seguir o fluxo de tarefas proposto.

Seguindo o feedback que recebemos após os testes fizemos alterações focando nos seguintes pontos:

  • Botões de informações distribuídos pela aplicação buscando explicar ao usuário o que ele deve fazer para executar tal função;
  • Página inicial mais simplificada e objetiva, se transformando em um dashboard; e
  • Eliminação de algumas funcionalidades iniciais que foram possíveis serem implementadas no produto final.
  1. Segunda Proposta

Seguindo as observações e focando em uma interface mais simples e objetiva, trabalhamos em uma nova proposta.

Style Guide

Na construção do style guide do projeto buscamos utilizar o mesmo guia construído pela empresa, já que a plataforma é destinada especificamente para os funcionários. Dessa forma, mantivemos uma identidade visual que traz consistência e padrões de estilo utilizados pela companhia.

Protótipo de alta fidelidade

Testes

Teste de Usabilidade

Realizamos um segundo teste de usabilidade na plataforma Maze com 9 usuários, que tinham quatro missões: agendar uma mentoria, enviar uma mensagem ao mentor, cancelar a mentoria e se tornar um mentor.

Para este teste, ajustamos as instruções das missões para torná-las mais claras e utilizamos um protótipo de alta fidelidade. Nosso objetivo era validar as melhorias feitas com base no primeiro teste e testar o fluxo de tornar-se mentor.

Os resultados mostraram uma evolução significativa nos três primeiros fluxos, reduzindo para 20% o número de usuários que enfrentaram dificuldades. No entanto, 60% tiveram problemas ao tentar se tornar mentores, indicando necessidade de ajustes.

Com base nesses insights, sugerimos melhorias como:

  • Adicionar balões informativos na tela de agendamento;
  • Incluir uma animação guiada para o fluxo de se tornar mentor;
  • Ajustar cores de botões e ícones para melhor acessibilidade.

Análise de Acessibilidade

Para garantir uma experiência inclusiva, realizamos uma análise de acessibilidade no protótipo usando a ferramenta Adee Comprehensive Accessibility e aplicamos melhorias conforme as necessidades dos usuários.

Contraste: Optamos pelo nível de conformidade AAA para aprimorar a acessibilidade visual. Durante a análise, identificamos que as cores dos botões principais não atendiam aos padrões exigidos, então ajustamos para alcançar a conformidade AA.

Simulador de Daltonismo: Testamos o protótipo em diferentes variações de daltonismo para verificar sua usabilidade e garantir que a plataforma atendesse a todos os usuários.

Aprendizado

O projeto foi uma excelente oportunidade para por em prática alguns conhecimentos adquiridos durantes estudos, mas também uma atividade de aprendizado constante e cooperativa. Foram 15 dias de reuniões, processos de pesquisa e desenvolvimento que permitiram ter um contato mais próximo de como funciona a atuação de um designer responsável por projetar experiências para os usuários e suprir suas necessidades.

O trabalho em equipe foi crucial nessa trajetória, aprendemos e ensinamos ao mesmo tempo e isso foi gratificante para todos nós. Afinal, uma equipe unida com mesmo objetivo se fortalece e supera adversidades que o tempo e a falta de saber nos impõe.

Esse artigo conta com a colaboração de Letícia Ribeiro e Najmin Ranna.


feito com

e

por mim