Usando técnicas de UX design na construção do site da Octoborg®
Octoborg®: empresa de desenvolvimento e consultoria de jogos digitais voltados para educação
Desafio
Prontos para publicar seu primeiro jogo autoral, os sócios da empresa Octoborg® se deram conta que não possuíam um site da empresa para informações de contato e lançamento de jogos.
Em 15 dias, me dispus a usar técnicas de UX design para construir o site da empresa, identificando os dados mais importantes a serem mostrados.
Como poderia construir um site atrativo mostrando as principais informações da empresa?
Cenário
De acordo com uma pesquisa realizada em 2018 pela empresa Homo Ludens, o mercado de games vem crescendo no Brasil. Entre 2014 e 2018, todas as regiões do Brasil tiveram aumento no número de empresas desenvolvedoras de jogos, passando de 133 para 276 empresas formais (presença no cadastro nacional de pessoa jurídica — CNPJ). Os maiores crescimentos ocorreram nas regiões Norte e Centro-Oeste, porém a região Sudeste segue concentrando a maioria dos estúdios desenvolvedores, 146, apresentando um aumento de 109% em relação à 2014.
A pesquisa analisou também o tipo de atividades realizadas pelas desenvolvedoras e revelou que apenas 3 em cada 10 desenvolvedores atuam em jogos sérios (voltados para fins educacionais). Cerca de 33% deles desenvolvem jogos educacionais próprios e 27% jogos educacionais para terceiros. Outras atividades relacionadas à jogos sérios são jogos de treinamento corporativo próprios e para terceiros, jogos para saúde próprios e para terceiros e simuladores com uso de hardwares específicos.
A área de jogos sérios ganha destaque quando analisamos os Ensinos Básico e Superior. Matemática, ciência e engenharia da computação e áreas da saúde são alguns exemplos em que jogos sérios já são empregados. Já o Ensino Básico, embora pouco explorado, mostra-se atrativo a esse segmento, especialmente na etapa do Ensino Médio. Estudos mostram que os jovens não percebem utilidade no conteúdo das aulas. Mário Meireles, mestre e doutor em Ciências da Computação e Matemática Computacional, professor da Universidade Federal do Maranhão, discorre sobre o uso de jogos sérios como instrumento de engajamento e aprendizagem. Em artigo publicado no BNDES Setorial 42, Gustavo Mello e Patricia Zendron, analisam o mercado dos jogos sérios, mostrando que seja nas ciências exatas, humanas ou naturais, seja na área de linguagens, é possível usar jogos digitais como ferramenta de apoio à transmissão de conceitos e informações, exercitar a aplicação de técnicas ou auxiliar o aprendizado e a assimilação de conteúdos didáticos.
Dentro deste cenário a equipe da Octoborg® deseja oferecer seus serviços para o desenvolvimento de jogos sérios voltados para educação. Para se mostrarem ativos no mercado e serem encontrados mais facilmente, necessitam de um site dedicado a mostrar seus trabalhos e, com isso, atrair seus primeiros clientes.
Objetivos do negócio
Diante do desafio que me foi confiado, a ideia de solução pretende dar visibilidade a empresa, com o intuito de apresentar seus valores, suas capacidades, sua composição e passar a mensagem de que jogos educativos podem ser divertidos e efetivos.
Desenvolver o site da Octoborg® para alcançar potenciais clientes e, em dois meses, fechar o primeiro contrato.
Usuário
Com intuito de conhecer melhor o usuário em potencial do serviço, desenvolvi uma proto persona chamada Carla. Com isso identifiquei dores e possíveis analgésicos e construí sua proto jornada desde a identificação do problema (desinteresse dos alunos) passando pela ideia de implementação de jogos até a contratação de uma empresa de desenvolvimento. O perfil priorizado foi aquele que consegui colher mais informações. Essas informações foram validadas por pesquisa; no entanto, para gerar resultados mais concretos, muito mais pesquisas são necessárias para transformar proto persona e proto jornada em persona e jornada definitivas.
As informações colhidas e validadas para proto persona e proto jornada foram traduzidas nas imagens a seguir.
Proto persona do cliente
Proto jornada do cliente
Primeira etapa de validação
Depois de criar as proto-personas e suas proto-jornadas, listei as certezas, suposições e dúvidas que tinha numa Matriz CSD e priorizei, por meio da Matriz Conhecimento x Impacto, aquelas que julguei mais interessantes pesquisar.
Matriz CSD
Matriz Impacto x Conhecimento
Para melhor formular as perguntas do questionário online, transformei as suposições priorizadas em hipóteses e estabeleci métricas para saber se estava certa ou errada.
A pesquisa foi realizada em formulário online (Google Forms) e divulgada entre amigos e conhecidos da área da educação, além de disponibilizada no LinkedIn e Facebook. A coleta dos resultados, para o propósito deste artigo, foram coletados após 4 dias circulando e contou com 36 respondentes.
Resultados
A análise das respostas do questionário sanou algumas dúvidas quanto à proto persona, à proto jornada e às hipóteses levantadas. Entretanto, para maior assertividade faz-se necessário manter a pesquisa por mais tempo no ar para coletar mais respondentes. Além disso, o estudo deve ser aprofundado por meio de entrevistas.
As conclusões que cheguei analisando informações obtidas até aqui foram:
Hipótese 1: As escolas estão abertas ao uso de tecnologias voltadas ao ensino, visto que já têm essa prática, mesmo antes da pandemia.
Hipótese 2: Os profissionais que usam jogos digitais (45%) são incentivados pela instituição.
Hipótese 3: Os estudantes participam mais das aulas com o uso de jogos digitais.
Hipótese 4: Dados inconclusivos, visto que metade dos respondentes não soube dizer quem é o responsável por contratar empresas desenvolvedoras.
Hipótese 5: A maioria dos respondentes não procura por empresas desenvolvedoras pelo Google, mas pedem indicação a seus colegas.
Hipótese 6: Dados inconclusivos. Apenas uma pessoa respondeu à essa pergunta.
Hipótese 7: Os profissionais da educação têm pouco conhecimento sobre jogos digitais, apesar de estabelecerem conversas com os estudantes sobre os jogos que eles têm jogado ultimamente.
Além das hipóteses levantadas, aproveitei o formulário para entender um pouco sobre o que as pessoas buscam ao procurar uma empresa de desenvolvimento de jogos digitais. Apesar das poucas respostas até o momento — apenas 8 disseram já ter procurado por uma empresa desenvolvedora — levantei uma possível hierarquia das informações mais importantes para eles.
Benchmarking
O caminho percorrido até aqui me revelou informações importantes acerca do público-alvo, do conhecimento sobre jogos digitais e o potencial do produto da empresa Octoborg® (jogos digitais voltados para educação). A pesquisa realizada também revelou as informações mais importantes para aqueles que já procuraram por uma empresa de desenvolvimento de jogos. Depois dessa análise, levantei as principais empresas desenvolvedoras de jogos educativos já atuantes no cenário brasileiro e realizei um benchmarking identificando as informações contidas em seus sites. Os números que aparecem na figura estão associados à ordem em que aparecem no site.
Priorização das oportunidades
Utilizando a técnica HMW (do inglês, How Might We), revisitei as oportunidades identificadas na jornada e priorizei aquelas que gerariam maior impacto com menor esforço. As duas oportunidades selecionadas foram utilizadas para fazer o primeiro esboço do site da Octoborg®.
Esboço em 4 etapas
Depois de priorizar as oportunidades, entrei na fase de ideação. Para isso, revisitei as informações obtidas até aqui, fiz anotações e procurei ideias nos sites usados para benchmarking. Em seguida, utilizando a ferramenta Crazy 8´s, explorei diferentes ideias e formas de apresentar as informações pretendidas.
As melhores ideias obtidas pelo Crazy 8’s foram exploradas com mais detalhe num Rabiscoframe, já atentando para as palavras a serem utilizadas nos botões CTA, por exemplo.
Com as ideias mais bem estabelecidas, parti para o protótipo de baixa fidelidade, utilizando o Figma. Primeiro fiz o protótipo pensando no acesso via celular (Mobile First), depois implementei o mesmo site pensando no uso em versão desktop.
Teste de usabilidade com protótipo de baixa fidelidade
O protótipo de baixa fidelidade foi testado por meio da ferramenta Maze.design, uma ferramenta gratuita que propicia a testagem de protótipos produzidos em diferentes plataformas (Figma, Adobe XD, InVision, Marvel e Skecth). Nele é possível inserir um caminho preferencial (golden path), além de perguntas de diversos tipos (aberta, múltipla escolha, opinativa, entre outros). Nesta fase priorizei os testes na versão mobile.
Resultados do primeiro teste de usabilidade
O protótipo de baixa fidelidade ficou no ar por 2 dias e foi testado por 14 usuários. Utilizando os resultados gravados pela ferramenta Maze, inseri os principais resultados e as melhorias na imagem a seguir.
Duas pessoas deixaram comentários ao final do teste. Os comentários foram analisados e decidi fazer algumas alterações no protótipo.
- Uma pessoa completou a missão após visualizar um dos jogos e disse que gostaria de ter visto mais informações sobre o outro jogo. Apesar de não ter prototipado a interação com o outro jogo, achei interessante que a pessoa clicou no botão de “encomendar”, mas se referiu a ele como “comprar”.
- Outra pessoa chamou a atenção para o botão no Hero Header. A chamada a levou a querer adquirir um jogo em vez de contatar a empresa. Além disso, achou a tag line contraditória.
Os feedbacks recebidos serviram de motor para aprimorar o protótipo antes de construi-lo em alta fidelidade. O primeiro comentário evidenciou a ausência de um botão para compra de um jogo já pronto e disponibilizado pela empresa. Já o segundo apontou para a troca do primeiro botão que aparece na página e a melhoria da chamada de texto.
Wireframe e Guia de Estilos
Partindo do protótipo de baixa fidelidade e dos resultados do primeiro teste de usabilidade, iniciei a construção do wireframe. Algumas modificações foram feitas com base nos feedbacks dos usuários. Utilizei dois grids diferentes para me auxiliar nas posições dos elementos na tela: grid de 12 colunas do Bootstrap e grid de 8 pontos.
Depois, identifiquei os componentes que iriam para o guia de estilos. A imagem ao lado mostra os títulos, parágrafos e botões que serão usados na versão mobile. Utilizando a metodologia lean, criei apenas os estilos e cores necessários neste momento.
Iniciei, então, o guia de estilos. Primeiro defini as cores primárias e secundárias(e suas variações), depois as cores claras e escuras. Aqui vale mencionar que a empresa não contava com um guia de estilos e todas as definições foram feitas para este projeto. Passei para a definição da tipografia e suas variações usando a proporção minor third (5:6) partindo de 16px para os parágrafos da versão Desktop (13px para a versão mobile), pois dava uma boa escala entre parágrafo e títulos. Por último, defini o ícone de compartilhamento e montei os botões primário, secundário, CTA, textual e iconográfico.
Pensando na acessibilidade do site, combinei as cores e verifiquei o contrate por meio do site Contrast Checker. Na média, a acessibilidade das cores escolhidas tiveram o resultado a seguir:
Cores
Tipografia
Botões
Protótipo de Alta Fidelidade
Acesse o protótipo de alta fidelidade.
Teste de usabilidade
O protótipo de alta fidelidade foi submetido a testes de usabilidade por meio da ferramenta Maze. O teste ficou no ar por 6h e contou com a participação de 5 usuários.
Nesta fase, o interesse maior foi analisar qual seria a primeira ação do usuário. Por isso, adicionei um botão de finalização do teste para que as pessoas pudessem encerrá-lo quando desejassem. Assim, elas ficaram livres para analisar o site todo e clicar onde sentissem mais vontade. O segundo objetivo foi validar as alterações feitas após o primeiro teste de usabilidade, por isso repeti os questionamentos do teste anterior.
Resultados
O mapa de calor da primeira tela mostrou a primeira intenção daqueles que testaram o protótipo. Nas imagens a seguir, resumi os principais resultados obtidos.
Para maior assertividade, é fundamental que o protótipo passe por mais testes. Por essa razão, preferi pensar em possíveis melhorias apenas depois de coletar mais informações sobre a experiência de navegação no site construído.
Próximos passos
Com a versão mobile, por ora, concluída, faz-se necessário avançar com a versão desktop. Os mesmos passos devem ser seguidos para esta outra versão para então passar o bastão para os desenvolvedores.
Conclusões e aprendizados
Este foi meu primeiro case solo e a minha primeira landing page. Foram 6 dias inteiros (e várias noites) dedicados a este projeto e após 3 finais de semana intensos (sendo que o primeiro foi o feriado de carnaval) cumpri a tarefa de finalizar a primeira parte do estudo e transformei meus aprendizados neste artigo (do qual sinto muito orgulho).
Por se tratar de uma empresa real, mantive o formulário da pesquisa quantitativa aberto para receber mais respostas, pois para tirar conclusões mais precisas, são necessárias muito mais respostas. Além disso, por se tratar de um estudo rápido, a maioria dos usuários foram pessoas próximas e, apesar de serem o público-alvo (pessoas do ramo da educação), suas respostas provavelmente foram enviesadas. Novas pesquisas com pessoas “externas” devem ser feitas para validar as hipóteses levantadas.
Foi enriquecedor fazer todas as partes deste estudo: da formulação das perguntas do formulário e sua posterior análise, até a prototipação do site e criação das imagens para este artigo. O gerenciamento de tempo também foi algo desafiador. Enquanto as pesquisas e testes ficavam no ar, passava a me dedicar à escrita deste artigo.
Muitas outras técnicas como entrevistas, testes A/B, card sorting, testes de 5 segundos, estudos de UX writing, entre outros, além do aumento do número de testes e do número de respondentes são de extrema importância para analisar o retorno sobre o investimento.
Em suma, busquei trazer meu racional para a construção da landing page de uma empresa desenvolvedora de jogos digitais educativos e divertidos que é nova no mercado. Este é um trabalho que merecia muito mais tempo e dedicação, mas o trabalho de UX design também é priorizar (ou eliminar) as soluções e trabalhar com aquilo que está ao seu alcance. Se em pouco tempo, sozinha e usando apenas ferramentas gratuitas consegui aplicar tantos conhecimentos, imagine os resultados que posso obter se estiver trabalhando em equipe, com aporte financeiro para buscar respostas do público-alvo e utilizar as versões pagas de algumas ferramentas.
Agradeço a atenção dada a este artigo.
Fique a vontade para me contatar por e-mail ou se conectar no LinkedIn!
