Como podemos melhorar a experiência dos colaboradores da empresa no momento de suas jogatinas?

Um estudo de caso visando transforma a experiência de lazer dos colaboradores da FCamara.

O Desafio

Meu papel neste projeto foi de UX/UI Designer, onde pude trabalhar com mais 4 Desenvolvedores. Meu objetivo é mostrar a minha estrutura de designer a fim de resolver um problema na área organizacional da empresa FCamara situada em Santos.

Pensando em uma solução que entregue valor para o usuário, utilizei a metodologia do Design Thinking e apresentei para a Squad o Duplo Diamante, de modo que pudéssemos nos organizar e colocar o usuário no foco de nossas decisões.

Processo de Design Thinking

O Problema

A desorganização no espaço de lazer da Empresa FCamara em Santos.

Pesquisas indicam que micro intervalos com momentos de lazer e interação com os colegas no ambiente de trabalho, pode gerar maior produtividade e sentimentos positivos nos colaboradores. Esses resultados foram publicados na pesquisa de Sooyeol Kim, que foi matéria na BBC.

Hoje em dia muitas empresas conhecem a importância de manter os times engajados e motivados no dia-a-dia organizacional e para tal, elas inovam investido em espaços de lazer e relaxamentos.

O cenário atual

Mas e quando o lazer gera desconforto para alguns? Essa é a problemática do nosso projeto.

Atualmente o problema se concentra no espaço de lazer da FCamara em Santos, onde por ser um ambiente de descontração acaba gerando muita desorganização e por vezes deixando colaboradores sem espaço para jogar, tirando assim a experiência de lazer das pessoas.

A fim de resolver o problema com a desorganização a empresa idealizou a criação de uma fila digital, de modo que pudesse suprir suas necessidades naquele contexto.

Benchmark

Visando entender melhor a solução mais adequada para os nossos usuários, realizei o benchmark.

Atualmente existem alguns aplicativos de filas virtuais direcionados para públicos específicos, busquei analisar o que esse mercado oferece de modo a compreender melhor o produto e criar novos insights em relação ao problema que estava resolvendo.

Benchmark

A análise da concorrência possibilitou pensar em funcionalidades que seriam interessantes para o nosso contexto.

Círculo Dourado

Antes de começarmos a pensar nas entrevistas com usuários, o primeiro passo foi entender o que gostaríamos de saber daqueles usuários, o que nosso produto iria significar para eles e para isso apresentei ao time o “Circulo Dourado” de Simon Sinek. O Círculo Dourado é uma forma de comunicar o seu produto ao seu usuário, entendendo o seu produto e seu propósito de dentro para fora com as seguintes perguntas: por que? como? e o que?

Objetivo

Através do Círculo Dourado o nosso objetivo pode ficar mais claro!

O FIFO tem como objetivo deixar a experiência dos colaboradores da empresa FCamara mais prazerosa no momento das suas jogatinas. Trazendo acesso a todos os colaboradores, sem deixar ninguém de fora.

Para a conclusão deste objetivo é importante que a MVP desta aplicação fique pronta em até 30 dias.

Usuários

Nosso objetivo atual é atender os usuários da empresa FCamara, pois através de pesquisas foi possível perceber que esse seria o foco principal no momento.

A persona e sua jornada foi validada logo após as pesquisas.

Persona e Jornada do usuário

O que nossos usuários pensam sobre os benefícios da área de lazer:

“… é uma válvula de escape.”

Persona com sua jornada de usuário

Matriz CSD

A Matriz CSD nos ajudou a elaborar nosso questionário de pesquisa quantitativa de modo que pensamos em nossas certezas, suposições e dúvidas em relação ao problema.

Matriz CSD

Pesquisa Quantitativa

Para elaborar o questionário de pesquisa buscamos mapear o que gostaríamos de responder, a fim de alcançarmos os objetivos da pesquisa.

Foram distribuídos 2 questionários, 1 para o grupo de colaboradores da empresa FCamara e outro para colaboradores de outras organizações com espaços de lazer. O objetivo dos 2 questionários foi de tentar encontrar um padrão de comportamento desses colaboradores em seus espaços de lazer e seus sentimentos em relação a isso. Ao final da pesquisa não foi encontrado nenhum padrão, de modo que a pesquisa quantitativa com colaboradores de outras organizações não manifestou nenhum efeito para a nossa pesquisa, por outro lado a pesquisa com os colaboradores da FCamara se mostrou efetiva e propiciou insumos para seu aprofundamento posteriormente.

Utilizei o Google forms para distribuir a pesquisa, no total foram 28 respondentes, tenho ciência do número baixo de respostas, mas em função do tempo o objetivo foi de mitigar potenciais erros e ter maior direcionamento no projeto.

Clique aqui para acessar a Pesquisa quantitativa do case

Abaixo confira as informações mais importantes tiradas da pesquisa:

Pesquisa Qualitativa

Buscando se aprofundar nas dores dos usuários e tentando encontrar possíveis soluções, a pesquisa qualitativa gerou insights enriquecedores.

Para realizar as entrevistas separei as perguntas por temas, sendo esses:

  • Tema A- Entendendo o problema na percepção do usuário
  • Tema B- Resolvendo o problema
  • Tema C- Grau de importância do espaço de lazer da empresa

Foram 4 pessoas entrevistadas e essas foram as seguintes contribuições:

  • Ficou clara a importância do espaço de lazer para os colaboradores.
  • Os mesmos contaram como resolvem o problema atualmente e suas dificuldades no formato atual.
  • Foi possível perceber a dinâmica na rotina dos colaboradores dentro da FCamara.
  • A pesquisa permitiu compreender a estrutura do espaço a fim de pensar melhor na estruturação da solução.

Idealização

A partir das contribuições da pesquisa foi possível começar a pensar em nossa alternativa de solução.

Observação: Fazer a etapa de idealização com os Devs foi uma experiência muito importante na relação do time com o produto.

Brainstorming

Em time começamos a colocar nossas ideias em post-it e colar elas em um frame, com o objetivo de analisá-las mais tarde.

Brainstorming

Matriz Impacto x Esforço

Após várias ideias, era hora de priorizar o que iríamos entregar, a matriz nos ajudou a entender o que traria maior impacto para o projeto com menor esforço possível tendo em vista a limitação de tempo.

Matriz Impacto x Esforço

Alternativa de Solução

Com base no resultado da matriz de Impacto x Esforço foi possível definir o nosso mínimo produto viável.

MVP

Rabiscoframes

Após elaborarmos a nossa MVP pudemos entender o que seria importante para o projeto naquele momento e foi a hora de começar a colocar as ideias no papel.

Wireframes

Após ter desenhado e esclarecido melhor a ideia de produto era hora de começar a prototipar. Comecei com Wireframes de média fidelidade e foi nesta etapa que eu realizei meu primeiro teste de usabilidade.

Wireframes versão desktop

Importante ressaltar que essa foi a 1º versão desenhada e testada.

Imagens da Tela de entrada com CTA de cadastro / Tela de cadastro / Tela de login/ Tela principal da plataforma “home” / Tela de filas / Tela de histórico/ Tela de notificação/ Tela de perfil e Fluxo com configuração de tempo e convidar amigo para jogar

Wireframes versão mobile

Importante ressaltar que assim como o sistema para desktop essa também foi a 1º versão desenhada.

Imagens da Tela de entrada com CTA de cadastro / Tela de cadastro / Tela de login/ Tela principal da plataforma “home” / Tela de filas / Tela de histórico/ Tela de notificação/ Tela de perfil e Fluxo com configuração de tempo e convidar amigo para jogar

1º Teste de usabilidade

O objetivo deste primeiro teste com wireframes foi de analisar o fluxo de navegação da plataforma e descobrir o que funciona bem e que áreas precisam ser melhoradas, a fim de já fazer correções necessárias para o protótipo de alta fidelidade.

O teste de usabilidade fora realizado com 3 usuários de modo moderado, através do Google Meet.

Dinâmica do teste:

Etapa 1- Instruções: Apresentação dos objetivos do teste e o papel do usuário naquele contexto.

Etapa 2- Fluxo 1 de tarefas: Neste fluxo o usuário deveria completar determinadas tarefas.

Etapa 3- Fluxo 2 de tarefas: Neste fluxo o usuário deveria completar determinadas tarefas.

Resultados e aprendizados

  • A tarefa poderia ser explicada melhor, foi perceptível dificuldade na compreensão do que precisava ser feito.

Pontos de melhoria

  • Melhoria na tela principal, onde aparece as filas para os usuários. Todos os usuários testados deram prioridade para configurar o tempo primeiro, onde pode-se perceber que é o botão mais notado. Tendo em vista que o objetivo principal da plataforma é fazer com que os usuários entre em uma fila, este deve ser o botão de destaque.
  • Fluxo para entrar na fila confuso. Pode-se notar confusão no momento de entrar na fila, porque os usuários não entendiam se tinham que entrar na fila ou configurar tempo e convidar amigos, não ficou claro que isso era opcional.

Guia de Estilos

Cores

O objetivo na hora de criar a paleta de cores era de oferecer um layout alegre, positivo, que chame a atenção dos usuários e ao mesmo tempo transmita confiança e credibilidade. Sendo assim as cores utilizadas foram o Roxo e o Amarelo.

Seguindo a Psicologia das cores, o Roxo é uma cor harmoniosa, que transmite confiança, elegante e intuitiva. Já o amarelo inspira criatividade, alegria, disposição e atenção.

Para compor o layout também fora criado cores de sucesso e perigo para auxiliar na usabilidade do usuário.

Paleta de Cores

Tipografia

Para a tipografia fora escolhida 2 fontes, sendo essas a Montserrat para títulos e subtítulos e Roboto para corpo do texto. A escolha dessas duas fontes se basearam na sua popularidade de modo que os usuários já poderiam ter algum contato com elas, facilitando o carregamento da página e sua variedade de estilos.

Tipografia para Sistema Mobile e Desktop

Botões

Para a criação dos botões usei o modelo Almost flat, com o intuito de oferecer maior usabilidade ao usuário.

Guia de Botões

Formulários

Para a criação dos formulários busquei trabalhar sua clareza de estado e ação, a fim de auxiliar na usabilidade do usuário.

Formulários

Protótipo de Alta Fidelidade

Com o guia de estilos pronto chegou o momento de começar a dar vida ao FIFO! O protótipo de alta fidelidade nos permite ver os detalhes do nosso futuro produto com mais clareza.

OBSERVAÇÃO: Importante ressaltar que as telas apresentadas já foram testadas e reestruturadas com base nos pontos de melhoria citados mais a frente, no teste de usabilidade com o 1º protótipo de alta fidelidade.

Alta fidelidade versão desktop

Imagens da Tela de entrada com CTA de cadastro / Tela de cadastro / Tela de login/ Tela principal da plataforma “home” / Tela de filas / Tela de histórico/ Tela de perfil e Fluxo com configuração de tempo e convidar amigo para jogar

Alta fidelidade versão mobile

Imagens da Tela de entrada com CTA de cadastro / Tela de cadastro / Tela de login/ Tela principal da plataforma “home” / Tela de filas / Tela de histórico/ Tela de perfil e Fluxo com configuração de tempo e convidar amigo para jogar

2º Teste de usabilidade

O teste de usabilidade fora realizado com 5 usuários de modo não moderado.

Dinâmica do teste

As tarefas do teste de usabilidade foram divididas em 4 etapas:

Etapa 1- Instruções: Em um primeiro momento foi enviado para os usuários um documento com as instruções para a realização do teste. Clique aqui para acessar o documento com as instruções.

Etapa 2- Fluxo 1 de tarefas: Neste fluxo o usuário deveria completar determinadas tarefas.

Etapa 3- Fluxo 2 de tarefas: Neste fluxo o usuário deveria completar determinadas tarefas.

Etapa 4- Pesquisa: Nesta última etapa fora enviado ao usuário uma pesquisa referente ao teste, buscando compreender a sua percepção em relação ao produto testado. Clique aqui para ver o formulário do teste.

Resultados e Aprendizados

  • Todos os usuários conseguiram completar o Fluxo 1 do teste.
  • 4 dos 5 usuários conseguiram completar o Fluxo 2 do teste, o usuário que não conseguiu finalizar esta etapa alegou não ter compreendido ou prestado atenção no que deveria fazer.
  • Tela de “Fila” causou confusão para um usuário, segundo ele em resposta no formulário alegou:

“Única dúvida que fiquei foi na parte da fila, com o que parecia ser um botão “sair da fila” em cada pessoa. Era cada pessoa que estava na fila e eu podia clicar para sair?”.

  • Necessidade de visibilidade do status do sistema! A tela com cards de filas não apresenta feedback visual ao usuário, mostrando em que fila ele está. Em resposta ao formulário de pesquisa um usuário comentou:

“Tela da fila não mostra em quais jogos eu me inscrevi”.

Abaixo a planilha com os resultados do teste de usabilidade:

Planilha de teste de usabilidade com protótipo de alta fidelidade

Pontos de melhoria

A partir do teste de usabilidade foi possível perceber alguns pontos que mereciam atenção.

  • Tela de “Filas” mostrar a opção de “sair da fila” apenas para o usuário dono daquele acesso, não aparecer tal botão mesmo que desativado para todos os usuários.
  • Visibilidade do sistema para que o usuário possa localizar em que fila está.

Considerações Finais e Aprendizados

Já ouvi falar que um projeto pode até ter um prazo e acabar, mas um produto não. Isso por conta das mudanças continuas que vivenciamos, tecnologias mudam e nossos usuários também. Dessa forma o nosso projeto chegou ao fim, mas a trilha desse produto pode ser que não.

Ao Grupo FCamara, deixo aqui minha sincera gratidão. Nesse caminho de Júnior não é fácil encontrar empresas que nos proporcionam essa oportunidade, e em todo esse tempo de projeto todos os mentores se mostraram acolhedores e dispostos a nos ajudar desde o primeiro dia.

Foi muito rica a construção com o time de desenvolvimento, pude aprender e entender a importância da relação do Designer com os Desenvolvedores. Esses 30 dias de Hackaton me fez enxergar meus pontos de melhoria enquanto profissional em ascensão e sou grata por isso.

SQUAD

UX/UI Designer:

Jéssica Veloso, LinkedIn: https://www.linkedin.com/in/jessicaveloso06/

Desenvolvedores Frontend / Backend:

Luiz Alberto, Github: https://github.com/carvalhoLuiz

Thomaz Honorato, Github: https://github.com/ThomazHonorato

Matheus Sabino, Github: https://github.com/baladeak

Gratidão por ter acompanhado o meu case até aqui!

🤓 Amooo feedbacks e compartilhar experiências! Qualquer coisa entre em contato ✉ jessicaveloso06@gmail.com

Psicóloga de formação e aspirante a UX designer por paixão. Você pode me contatar no email: jessicaveloso06@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store