Wooby: Uma Solução Para os Desafios da Educação Online — Estudo de Caso UX/UI Design

Carolina Monteiro
15 min readSep 20, 2021

--

Telas do aplicativo Wooby.
Telas do aplicativo Wooby

Contexto

Este estudo de caso foi desenvolvido como projeto de conclusão do curso de UX Design com o objetivo de abordar o problema da dificuldade que os profissionais freelancers, especialmente os professores, enfrentam para encontrar serviços por meio de plataformas online.

Evidências

Como um profissional em busca de oportunidades e renda extra, eu me deparei com diversas plataformas que exigiam as melhores experiências e qualificações na área, porém muitas vezes o meu perfil não era aprovado para começar a trabalhar. Além disso, essas plataformas não ofereciam nenhum tipo de suporte para negociação com clientes, o que muitas vezes me obrigava a gastar as minhas moedas (segundo o sistema de negociação da plataforma) para que o cliente fizesse um orçamento sem nenhum compromisso ou simplesmente nunca retornasse com uma resposta.

Ao conversar com colegas de profissão e amigos, percebi que muitos deles só conseguem trabalhos como freelancers por meio de indicações, através do famoso “boca a boca”, e que não estão familiarizados com plataformas confiáveis para esse tipo de trabalho.

Estes eram os desafios e objetivos do meu projeto:

  • Buscar uma solução que entregue facilidade e segurança aos profissionais freelancers, dando-lhes o suporte necessário desde a busca até a negociação de trabalhos;
  • Oferecer segurança sem burocracias que dificultem o processo;
  • Conectar os profissionais certos aos clientes certos, entregando oportunidades a todos os tipos de profissionais cadastrados.

User Research

Para compreender melhor se este era um problema real, verificar se minhas hipóteses estavam corretas e identificar quaisquer outros gaps na experiência dos profissionais, montei um plano de pesquisa.

A pesquisa foi dividida em duas partes: um questionário online e entrevistas, a fim de explorar o problema com mais profundidade. Foi interessante aproveitar essa etapa para pesquisar não só sobre a experiência dos profissionais, mas também sobre a experiência da outra parte envolvida: os clientes.

Estabeleci alguns objetivos que a pesquisa deveria alcançar:

  • Coletar informações sobre o perfil do público-alvo, incluindo profissionais que procuram trabalhos freelancers/autônomos e clientes que contratam esses serviços;
  • Mapear a jornada de busca por trabalhos e serviços dos profissionais e clientes, compreendendo por quais meios essa conectividade acontece;
  • Entender se o público-alvo utiliza plataformas online e qual o nível de satisfação com essas plataformas;
  • Identificar as dificuldades e problemas enfrentados pelos profissionais e clientes na busca por trabalhos e serviços.

Questionário Online:

Elaborei um questionário composto por 19 perguntas que abordam tanto aspectos quantitativos quanto qualitativos. Essas perguntas foram estruturadas de forma a trazer uma abordagem diferenciada dependendo da categoria em que o usuário se encaixava — cliente ou profissional.

Alguns dos principais resultados obtidos foram:

  • 80,5% dos profissionais que participaram da pesquisa encontram trabalhos por indicação, enquanto 48,5% deles já experimentaram alguma plataforma online.
  • Entre os profissionais que nunca experimentaram plataformas online, 41,2% já pensaram em utilizar, mas não conhecem nenhuma plataforma para esse fim, e 41,2% optaram por usar outro meio.
  • Os profissionais que utilizam plataformas online para encontrar trabalho disseram que as mais utilizadas são Facebook e Instagram.
  • A maioria dos profissionais que participaram da pesquisa era composta por designers, fotógrafos e professores particulares.
  • A experiência dos profissionais que trabalham por meio de plataformas online e aqueles que realizam trabalhos por indicação foi classificada como razoável pela maioria dos participantes.
Pergunta do questionário para os profissionais sobre o uso de plataformas online. As respostas apresentadas foram: 48,5% dos profissionais já testaram alguma plataforma e 51,5% nunca testaram.
Pergunta do questionário para os profissionais sobre se já pensaram em utilizar alguma plataforma para encontrar trabalhos. Os resultados apresentados no gráfico são: 41,2% já pensaram em utilizar alguma plataforma mas não conhecem nenhuma com esse objetivo; 41,2% já pensaram, mas optaram por outro meio; e 17,6% nunca pensaram em utilizar qualquer plataforma.
Pergunta do questionário para os profissionais sobre sua experiência desde a busca à realização de trabalhos. Os resultados apresentados no gráfico são: 62,5% apresenta uma experiência razoável; 25% apresenta uma experiência agradável; e 12,5% apresenta ou apresentou uma experiência ruim.
  • 73,3% dos participantes identificados como “clientes” já contrataram profissionais pela internet, sendo que os serviços mais contratados foram de professor particular, fotógrafo, desenvolvedor e encanador.
  • Os clientes que nunca contrataram profissionais pela internet ou plataformas o fazem por meio de indicações de amigos, familiares e conhecidos, e 50% deles não conhecem plataformas ou aplicativos para contratação.
  • As plataformas mais utilizadas pelos clientes foram o Facebook e/ou Instagram (63,6%) e o Google (54,5%).
  • Em geral, a maioria dos clientes teve uma experiência positiva ao contratar profissionais.
Pergunta do quetionário destinada aos “clientes” (quem nunca realizou qualquer trabalho freelance) sobre quais plataformas já utilizaram para encontrar profissionais online. Os resultados apresentados no gráfico são: 54,5% para o Google; 63,6% para Facebook/Instagram; e 27,3% para o Getninjas;
Pergunta do questionário para os segmentados como “clientes” sobre quais os serviços já contratados. Os resultados, segundo o gráfico, são: 45,5% para professores particulares; 18,2% para encanador; 18,2% para eletricista; 12,3% para pedreiro; 27,3% para designer; 35,4% para desenvolvedor; e 45,5% para fotógrafo; 9,1% para “Doces” (resposta acrescentada por um dos participantes); 9,1% para marceneiro; 9,1% para corretor de imóveis; 9,1% para vidraceiro; e 9,1% para serviços gerais.
Pergunta do questionário para os participantes segmentados como “clientes” sobre sua experiência na contratação de serviços e profissionais. Os resultados apresentados no gráfico são: 75% apresenta uma experiência agradável; e 25% apresenta uma experiência razoável.

Entrevistas e perguntas qualitativas do questionário:

O roteiro das entrevistas teve como base o próprio questionário, mas com aprofundamento das questões, especialmente em relação às perguntas abertas que buscavam explorar a experiência de cada entrevistado, pontos positivos e problemas da sua jornada de busca, realização de trabalhos ou contratação de profissionais.

O mais interessante é que durante as entrevistas, pude explorar a visão dos entrevistados tanto como profissionais quanto como clientes, abordando ambas as questões de jornada e dificuldades que cada posição enfrenta.

Eis os resultados que encontrei:

Os principais pontos negativos na experiência dos profissionais foram:

  • Atraso e gerenciamento de pagamentos, cobranças e contratos;
  • Dificuldade de divulgação, argumento e oferta;
  • Processo seletivo muito longo e burocrático;
  • Falta de informações sobre o contratante;

“Algumas ferramentas para busca de trabalhos freelancer cobram uma mensalidade, e portanto escalam freelancer pela ordem de prestígio e competência analisadas pela plataforma. Também limitam a quantidade de trabalhos que você pode conseguir devido à falta de uma mensalidade.”Depoimento de um dos profissionais.

Enquanto que para os clientes foram:

  • Tempo de retorno e resposta por parte dos profissionais;
  • Falta de opções de profissionais em cidades pequenas ou mais distantes de capitais e centros urbanos;
  • Plataforma utilizada muito confusa de entender;
  • Formas de pagamento serem mais atuais e aceitarem opções como cartão ou pix;

“Acho muito difícil encontrar profissionais na minha região. A busca do Google é muito genérica e por muitas vezes mostrou profissionais muito distantes de mim ou que não eram compatíveis com o que eu busquei, por isso que tive que recorrer a outra plataforma, que apesar de ter sido boa, no início ela é muito confusa de entender (você cai direto em uma página com formulário, sem sequer explicar o que é o serviço) e depois que o serviço foi feito foi quase impossível de avaliar e muitas coisas eram difíceis de serem feitas. Eles oferecem muito poucas informações sobre o profissional que entrou em contato com você, então se ele é novo e tem poucas avaliações, é dificil confiar.”Depoimento de um dos clientes.

Em contraponto às experiências negativas, os principais pontos positivos nas experiências segundo os profissionais foram:

  • Comunidade unida de trabalhadores freelancers ao repassar trabalhos;
  • Autoconhecimento e aprendizado;
  • Número de oportunidades;
  • Flexibilidade nos prazos e local/horários de trabalho.

Já em relação aos clientes, os principais pontos positivos nas suas experiências foram:

  • O contato direto com o profissional e atendimento personalizado e atencioso;
  • Facilidade e praticidade em encontrar profissionais e serviços qualificados através das redes sociais e do próprio navegador;
  • Comodidade ao encontrar e contratar um profissional;
  • Diversidade de background dos profissionais;

om base nos resultados obtidos, pude tirar conclusões e formular novas hipóteses para entender não apenas o que estava ocorrendo, mas também o porquê.

Personas e Mapas de Empatia

A próxima etapa envolvia a criação de personas e mapas de empatia. Para isso, me concentrei em analisar cuidadosamente as respostas obtidas no relatório da pesquisa, identificando as principais dores, frustrações, motivações e objetivos das minhas personas.

A persona inicial para este projeto é uma professora independente formada em Letras, que leciona aulas particulares de francês, sua verdadeira paixão. Entre suas principais dificuldades estão a retenção de alunos, o gerenciamento de sua agenda, pagamentos e cobranças, além de dar aulas, monitorar o progresso dos alunos, preparar atividades, materiais e exercícios, e ainda captar novos alunos — tudo isso sozinha.

Essas informações foram obtidas a partir das respostas da pesquisa, que revelaram que “professor” foi a profissão com maior número de respostas tanto para realização de trabalhos quanto para contratações. Além disso, uma professora participante da pesquisa contribuiu para a identificação dessas dores durante uma entrevista:

“Principalmente após a pandemia, é muito complicado os alunos se manterem nas aulas. Além disso, o ponto negativo é que eu não estou tão familiarizada com plataformas. Já ouvi falar que tem, inclusive estou em um grupo do whatsapp de professoras de inglês, mas não consegui trabalho nenhum até agora. Teve um trabalho que talvez eu fosse chamada, mas tinha que gravar um vídeo em uma vídeo aula e eu não me sinto preparada para isso ainda, ter que montar uma aula e filmar.”Depoimento de uma professora

Imagem do quadro com as informações da persona “professora”, como biografia, frustrações, objetivos, comportamentos e hábitos.

Para a minha segunda persona, criei o perfil do aluno como meu usuário final, pois a maioria dos clientes que participaram da minha pesquisa estavam interessados em buscar um professor. Minha persona da categoria “Aluno” enfrenta dificuldades para pagar um valor alto por aulas particulares, além de lidar com a demora no retorno dos profissionais que já contatou e a falta de um bom atendimento em alguns casos. Também se depara com plataformas confusas e com poucas opções de profissionais para negociar um preço que atenda às suas necessidades e orçamento. Todas essas informações foram obtidas por meio das respostas da pesquisa e das entrevistas com participantes.

Imagem do quadro com as informações da persona “aluno”, como biografia, frustrações, objetivos, comportamentos e hábitos.

Mapas de Empatia

Com as personas definidas, o próximo passo foi construir os mapas de empatia. Essa ferramenta permitiu que eu me colocasse no lugar das personas e aprofundasse ainda mais na compreensão dos problemas que elas enfrentam, explorando suas perspectivas e entendendo o que elas escutam, pensam, sentem, veem, falam e fazem.

Mapa de empatia da persona “professora”. O mapa mostra informações de como a persona pensa e sente, o que ela escuta, vê, fala e faz, segundo o ponto de vista dela.
Mapa de empatia da persona “aluno”. O mapa mostra informações de como a persona pensa e sente, o que ela escuta, vê, fala e faz, segundo o ponto de vista dela.

Análise Competitiva

Para entender como resolver as dores de minhas personas, segmentadas na categoria “professores”, realizei uma análise de benchmark competitivo. Analisei como meus concorrentes estavam abordando essas dores no mercado e procurei inspirações e insights sobre seus acertos e erros.

Os concorrentes que selecionei para minha análise foram: Getninjas (aplicativo que conecta clientes a freelancers e prestadores de serviços em todo o país), Superprof (plataforma online que conecta professores particulares e alunos do Brasil e outros países, que possui apenas um site) e Profes (portal de aulas particulares que possui um site e um aplicativo).

Imagens das telas das plataformas dos principais concorrentes: Getninjas, Superprof e Profes.

Análise de Resultados

Durante a minha análise das plataformas concorrentes, identifiquei diversas deficiências e lacunas que poderiam ser supridas por funções adicionais, com base nos feedbacks dos usuários. Entre as funcionalidades ausentes estavam a possibilidade de visualizar o extrato mensal, receber pagamentos de forma mais rápida e prática e oferecer mais opções de formas de pagamento.

Um problema comum relatado pelos usuários foi a forte concorrência entre os profissionais, causada pela grande quantidade de professores cadastrados nas plataformas. Além disso, muitos usuários reclamaram de não serem informados com antecedência sobre a obrigatoriedade de pagamento da mensalidade para o uso das ferramentas.

Por outro lado, o atendimento e suporte rápido e eficiente da plataforma Superprof foi destacado pelos usuários como um ponto positivo.

A plataforma Profes oferece diversas funcionalidades para seus usuários, incluindo a possibilidade de encontrar professores para diversas matérias, acessar aulas gravadas sobre vários assuntos, algumas delas gratuitas, e receber ajuda com tarefas, exercícios, correção de textos, teses e dissertações. Além disso, os usuários podem tirar dúvidas com professores, encontrar e resolver listas de exercícios e baixar arquivos como livros e cartilhas disponibilizados por alunos e professores. Para os professores, a plataforma disponibiliza uma sala virtual com chat, lousa interativa, compartilhamento de tela e arquivos, e conteúdos em vídeo que os ensinam a usar a plataforma.

Job Stories

Com base em todas as informações coletadas até o momento, chegou a hora de transformar meu conhecimento sobre o usuário e o problema em requisitos de produto. Para isso, elaborei Job Stories centradas na perspectiva das minhas personas e no problema a ser resolvido. Esse processo foi fundamental para estruturar uma solução concreta.

Desenvolvi um documento de Job Stories detalhando a jornada dos usuários desde o início até o fim. Alguns exemplos são:

  • Antes de me cadastrar como profissional, quero ter acesso claro e transparente sobre os valores de investimento e as formas de pagamento das aulas que eu der na plataforma, para evitar surpresas desagradáveis após o meu cadastro.
  • Quando eu estiver gerenciando minhas aulas e alunos, quero poder visualizar facilmente todas as informações do aluno, incluindo horário, disciplina, progresso e conteúdos estudados, para que eu possa ter um melhor controle das minhas aulas e me preparar adequadamente para cada encontro, bem como acompanhar o progresso de cada aluno de forma mais próxima.
  • Quando for verificar meu saldo financeiro na plataforma, desejo ter acesso rápido e fácil aos dados da minha assinatura, aos valores recebidos pelas aulas ministradas e a uma visualização clara do meu extrato mensal. Além disso, espero que o processo de recebimento do dinheiro na minha conta seja prático, seguro e sem burocracia, para que eu possa ter total controle sobre meus pagamentos dentro da plataforma.
  • Quando eu me cadastrar na plataforma, não quero perder tempo navegando por etapas longas para encontrar o professor ideal. Desejo que a plataforma me guie de forma intuitiva e confortável, para que eu encontre facilmente o profissional que atenda às minhas necessidades.
  • Quando eu estiver interessado em contratar um professor, gostaria de ver a disponibilidade de horários na agenda do profissional para que eu possa escolher o horário mais conveniente para mim, levando em conta minha própria agenda.
  • Ao solicitar uma aula, gostaria de ter opções flexíveis de pagamento para que possa efetuar o pagamento de forma fácil e prática, sem enfrentar burocracias desnecessárias.

Arquitetura de Informação

Fluxos de Usuário

Os fluxos foram criados com base nos requerimentos definidos na etapa de job stories, para representar visualmente a jornada do usuário na plataforma.

Cada etapa do fluxo do meu usuário foi pensada para acontecer da maneira mais prática e objetiva possível. A experiência precisaria acontecer de forma natural, onde o usuário seria conduzido a cada passo de forma agradável e coerente.

Logo nas telas iniciais, por exemplo, o usuário seria instruído sobre o uso e os requisitos da ferramenta, incluindo qualquer informação relevante sobre mensalidade e métodos de pagamento, justamente para evitar qualquer possível frustração futura na sua experiência.

Fluxo do usuário, mostrando o caminho principal percorrido pelo usuário dentro da plataforma. O fluxo se divide em 2 sessões, uma para alunos e outra para professores. Cada sessão leva o usuário de acordo com seu perfil correspondente.

Fluxos desenhados, chegou o momento de criar os primeiros esboços e começar a visualizar a interface do meu produto.

Sketches → Wireframes

Esboços

Nesta etapa, o objetivo foi criar telas que seguissem uma consistência visual e uma lógica coerente, de modo a oferecer uma experiência amigável e intuitiva para os usuários. Além disso, busquei garantir que todas as informações relevantes fossem exibidas de maneira clara e organizada, sem gerar confusão ou sobrecarga visual.

Imagem dos rascunhos do aplicativo. É possível notar a forma das principais telas e é a partir daí que sairá o protótipo mais fiel e consistente da plataforma.

Foi nesse momento que comecei a pensar em aspectos da minha marca, como o nome da plataforma, por exemplo.

Meu objetivo era escolher um nome que refletisse a solução que a plataforma oferece aos usuários: uma conexão fácil e segura entre professores e alunos por meio de uma plataforma amigável e intuitiva.

Wireframes

Com os esboços das minhas telas prontos, parti para a criação dos wireframes, aprimorando todos os elementos que havia desenhado anteriormente. Nessa fase, foquei em garantir uma experiência de uso clara e intuitiva para o usuário, sem me preocupar ainda com as cores ou outros elementos visuais secundários.

O objetivo principal dos wireframes era definir a estrutura e o posicionamento dos elementos da interface, assim como testar e validar o fluxo de navegação. Para isso, apliquei os princípios da Gestalt para destacar as diferenças de tonalidade e agrupar os elementos de forma coesa e organizada.

Por fim, a fase de testes de usabilidade dos wireframes foi essencial para identificar quaisquer pontos fracos ou pontos de confusão na experiência do usuário, a fim de aprimorar e otimizar ainda mais as minhas telas.

Wireframes das telas do aplicativo com baixa fidelidade. Ainda não há aplicação de cores nem identidade visual, a preocupação foi apenas construir de uma forma um pouco mais consistente o que foi definido na ideação e rascunhos das telas.
Wireframes das telas do aplicativo com baixa fidelidade. Ainda não há aplicação de cores nem identidade visual, a preocupação foi apenas construir de uma forma um pouco mais consistente o que foi definido na ideação e rascunhos das telas.

Design System

Antes de criar o protótipo de alta fidelidade, desenvolvi um Design System, também conhecido como Guia de Componentes, que serviu como base para toda a minha interface. O objetivo era garantir consistência e coerência em todo o projeto e economizar tempo ao padronizar elementos.

Como se tratava de um aplicativo mobile, atentei-me especialmente aos grids, alinhamentos e tamanhos para proporcionar uma boa experiência ao usuário.

Cores

Para a paleta de cores da minha plataforma, escolhi um conjunto alegre de azul, violeta, amarelo e rosa. A escolha dessas cores foi baseada em estudos de psicologia das cores, que indicam que essas tonalidades transmitem sensações de confiança, criatividade, alegria e entusiasmo, respectivamente.

No entanto, como são cores fortes, foi preciso ter cuidado no uso dentro da minha plataforma para evitar qualquer bagunça visual entre os elementos. Para isso, defini que cada cor teria um significado específico dentro do aplicativo. Essa padronização das cores ajudaria o usuário a aprender a identificar e compreender as informações com mais facilidade.

Definição das cores da marca e recomendação de aplicações.

Tipografia

A escolha da tipografia é um elemento importante para transmitir a personalidade e a essência da plataforma.

Para transmitir a mensagem de forma clara e intuitiva, busquei uma fonte que fosse moderna, limpa e que se adaptasse bem a diferentes tamanhos e formatos de tela.

A fonte Poppins atendeu a todos esses requisitos, sendo uma escolha excelente como a fonte principal da plataforma. Além disso, a aparência amigável e confiável da Poppins transmite a ideia de uma plataforma fácil de usar e confiável para os usuários. Esses fatores tornaram a escolha da Poppins uma ótima opção para a tipografia da minha plataforma.

Quadro com a tipografia escolhida para o aplicativo. Aqui, é apresentado todos os pesos e tamanhos de acordo com cada aplicação em títulos e corpo de textos.

Iconografia e Formas

A escolha dos ícones e formas também foi cuidadosamente pensada para transmitir as mesmas sensações de confiabilidade e facilidade de uso que a fonte Poppins.

Optei por um design arredondado e com extremidades suaves, seguindo o estilo amigável e consistente da interface como um todo. Essa escolha de estilo ajuda a estabelecer uma identidade visual coesa e confiável para a plataforma.

Quadro com todos os ícones que podem ser utilizados dentro da ferramenta.
Apresentação dos tipos de botões que serão usados dentro do aplicativo, com aplicação de cores.
Quadro com elementos do sistema, como barra do celular, menu superior e botões de tags. Todos esses elementos também serão usados como base no projeto, dentro do sistema visual e funcional do aplicativo.

Visual Design

Aplicação da primeira tela do aplicativo “Wooby” em um smartphone.

A aplicação do meu Guia de Componentes foi crucial para criar uma interface visualmente coerente. Após finalizar o Guia, comecei a trabalhar na aplicação dele. O resultado final da interface atingiu todos os objetivos que tracei a partir das pesquisas e necessidades dos meus usuários.

Durante o processo de aplicação, alguns elementos foram alterados para garantir que a experiência do usuário fosse a melhor possível. Um exemplo disso foi a página do perfil do professor, que inicialmente tinha um layout simples e pouco estruturado, mas foi alterada para uma versão mais coerente e relevante para os usuários após testes de usabilidade.

A página agora apresenta uma hierarquia clara de informações, incluindo a disponibilidade de horários do professor antes de finalizar a contratação. Essas mudanças foram cruciais para garantir a melhor experiência possível para os usuários da plataforma.

Imagem das telas do aplicativo com aplicação de toda a identidade visual construída no Design System. Versão para alunos.
Imagem das telas do aplicativo com aplicação de toda a identidade visual construída no Design System. Versão para professores.
Telas do aplicativo aplicadas à smartphones.
Cenário do aplicativo em smartphone sendo usado por mulher no seu momento de estudo.

Conclusão

Este projeto foi desenvolvido com o objetivo de criar uma plataforma de ensino online que atenda às necessidades e desejos dos usuários, oferecendo uma experiência agradável e intuitiva. Para alcançar esse objetivo, foram realizadas pesquisas, análises e testes que permitiram entender as principais dores dos usuários e oferecer soluções que atendessem às suas expectativas.

Através do Design System desenvolvido, foi possível manter a coerência e consistência visual em toda a plataforma, tornando-a facilmente reconhecível e familiar aos usuários. Além disso, a escolha cuidadosa das cores, tipografia, ícones e formas contribuiu para criar uma sensação amigável e confiável, transmitindo a mensagem de uma plataforma de ensino de qualidade e fácil de usar.

Ao final, a plataforma alcançou seus objetivos, oferecendo aos usuários uma experiência positiva e eficiente. Todo o processo de desenvolvimento do projeto, desde a pesquisa até a implementação, permitiu adquirir conhecimento e habilidades valiosas em relação ao design de experiência do usuário e pôde servir como um modelo para futuros projetos.

Agradecimentos

Agradeço ao meu mentor, Francisco Moraes, que foi muito dedicado em me auxiliar em cada etapa deste projeto, e à Veronica Sartori que foi uma excelente professora e me ofereceu todo o apoio necessário durante andamento do curso. Também gostaria de agradecer aos meus colegas que compartilharam suas ideias e experiências comigo.

Por fim, agradeço aos usuários que participaram das pesquisas e testes de usabilidade, fornecendo feedbacks valiosos que foram essenciais para melhorar a experiência do usuário na plataforma.

Este projeto foi uma jornada desafiadora, mas gratificante. Sinto que saio desta experiência como uma profissional mais completa e confiante em minha habilidade de criar experiências positivas para os usuários. Obrigada novamente a todos que tornaram este projeto possível.

--

--

Carolina Monteiro

Product Designer guided by creativity and passion for what I do every day