FIFO — Organizando filas de maneira digital e melhorando a experiência em salas de descompressão

Lucas Lopes

Nov 30, 2020·11 min read

Um estudo de caso de UX realizado na segunda edição do Hackathon da FCamara

Introdução ao Problema

Que salas de descompressão são cada vez mais comuns em empresas é fato. Em especial quando se trata de empresas de tecnologia, fintechs, startups, etc… No entanto, em uma companhia com mais de 90 funcionários, a organização desse espaço pode ser um pouco desafiadora! Foi, portanto, pensando nessa problemática que a FCamara desenvolveu a segunda edição de seu Programa de Formação. Com intuito de melhorar a experiência dos colaboradores, propuseram a criação de uma interface para organizar as jogatinas do escritório.

Foi o que fizemos. Bora conferir?

Contextualizando e Primeiros Passos

Assim que o Hackathon começou, ficamos inteirados de como funcionaria o desafio, onde nos deram um panorama geral do problema a ser resolvido e estipularam os prazos de entrega - que foram definidos em Sprints. Fomos então separados por grupos, onde fiquei como sendo o único UX/UI Designer, com cinco DEVs.

Como dito no início do texto, o desafio que precisávamos resolver era a falta de organização das filas de jogos, disponíveis nas salas de lazer, que atualmente é feita apenas no boca a boca, e que acarretava alguns problemas (que foram descobertos na fase de pesquisa e estão descritos mais a frente)

Além disso, a entrega precisava ser uma aplicação web responsiva, com no mínimo 3 telas de desenvolvimento.

Já inteirado com tudo isso, o primeiro passo que tomei depois da apresentação do problema, foi criar uma página colaborativa no Notion, para auxiliar no processo de documentação e planejamento, onde reiterei os objetivos do projeto e organizei todos os entregáveis requeridos.

Pesquisa

Com a organização feita, e depois da primeira reunião de alinhamento em equipe, realizei uma Desk Research para entender como o mercado atual está lidando com a mesma questão que nos foi apresentada. Fiz diversas pesquisas pela internet, onde foi possível compreender a importância das salas de descompressão e como (teoricamente) elas devem funcionar. Realizei algumas entrevistas com funcionários de empresas que oferecem esse espaço, para gerar mais insights e ter um entendimento ainda mais profundo sobre o tema. Também analisei alguns apps de fila virtual para compreender como acontecem as interações em uma interface desse tipo.

Algo que aprendi nessa fase é que, em geral, não existe nenhum tipo de controle ou monitoramento em relação às filas nas salas de descompressão nas empresas e que, quando havia, eram coisas simples, como planilhas. Na maioria dos casos, conta-se com o bom senso das pessoas para o uso do espaço.

Todo esse processo da Desk Research auxiliou a mim e a equipe na criação e estruturação de nossa Matriz CSD, que foi feita em conjunto.

O interessante dessa técnica, além da possibilidade de poder trabalha-la em grupo, é que os quadros são mutáveis. Na imagem abaixo, por exemplo, temos uma versão da matriz com algumas dúvidas já sanadas.

Ter de maneira clara com a Squad quais eram nossas certezas, dúvidas e suposições, me permitiu criar as pesquisas qualitativas e a quantitativa condizentes ao que precisávamos saber para criar uma interface que respondesse ao problema enfrentado e para conhecermos melhor nossos usuários.

Por exemplo, inicialmente pensamos em criar algum sistema para reserva de horários, mas com as pesquisas que realizei, descobrimos que a utilização da sala acontece de maneira muito orgânica, pois os funcionários podem utilizá-la a qualquer momento, e normalmente é quando querem relaxar, então descartamos essa hipótese. A solução precisava ser mais flexível!

Além disso, entendemos como a organização atual funcionava. Algo que ficou muito claro nas entrevistas, foi a relação de confiança que os colaboradores tinham entre si, onde os mesmos pegavam qualquer folha de papel para anotar as próximas pessoas da fila e iam se avisando. O grande porém, no entanto, é que às vezes esqueciam de avisar quem era a próxima pessoa da fila (mesmo que isso não acarretasse em um grande desentendimento, era algo que gostaríamos de resolver com nossa interface).

Essa etapa do projeto não foi exatamente linear. As pesquisas quali iniciais foram feitas apenas para tirar algumas dúvidas pontuais, mas que me ajudaram a montar a pesquisa quanti e que, enquanto essa rodava, pude fazer pesquisas qualitativas ainda mais estruturadas. Ufa! Deu pra entender aí?

Algumas das informações recolhidas foram:

Assim, como deu pra perceber, algumas de nossas suposições e dúvidas iniciais foram refutadas ou confirmadas, o que fez que a Matriz estivesse em constante alteração.

Além disso, é importante reiterar que, dado ao contexto de pandemia que estamos vivendo, não pude fazer pesquisas presenciais para observar os usuários utilizando o espaço, até porque não estão o utilizando no momento, então tive que entender o funcionamento atual da organização da fila pelas perguntas feitas.

Definição

Tendo esses dados em mãos, foi possível definir e estruturar nossas personas e construir um mapa de empatia, que além de ajudarem a nos lembrar que não somos nossos usuários, auxiliaram na elaboração de perguntas para entrevistas futuras (percebeu que investigação não faltou por aqui, né?)

Finalizando a fase de pesquisa inicial, todos as etapas anteriores nos auxiliaram para um entendimento profundo do problema a ser solucionado, o que nos permitiu começar a pensar em grupo nas Propostas de Solução, que para facilitar na visualização, registramos em um painel colaborativo no Miro. Construímos também o Fluxo de Usuário, de acordo com o que aprendi nas pesquisas, e que nos deu diversos insights para pensar nas interações da própria interface.

Definimos, por fim, que de fato desenvolveríamos uma fila virtual, então priorizamos entender a forma como a mesma funcionaria.

Pensamos juntos nos aspectos que deveríamos levar em consideração para evitar quaisquer imprevistos, um dos maiores desafios foi entender como aconteceria o fluxo para que a próxima pessoa entrasse na fila, considerando que não existia qualquer possibilidade de haver um monitoramento contínuo. Lembra que eu disse que existe uma relação de confiança muito presente? Foi isso que permitiu a possibilidade de solução que escolhemos (que demonstrei mais abaixo, nos protótipos. Continua lendo)

Outra coisa que idealizei, para que não criássemos apenas uma fila virtual comum e termos um diferencial, foi se inspirar em interfaces gamificadas. O grupo concordou que fazia sentido, dado o fato de ser um espaço de jogos e pelo perfil dos usuários. Consideramos isso como meio de incentivar o uso da plataforma, utilizando de artifícios que poderiam estimular os usuários, como um ranking e recompensas, por exemplo. E foi levando todos esses processos em mente que criamos o Fluxo da Interface (com uma adaptação de um Roadmap de Funcionalidades)

Prototipação

Com as pesquisas realizadas e com um entendimento geral das funcionalidades que a interface precisava ter, criei alguns Wireframes para desenvolver como essas interações funcionariam na prática, antes de partir para o Figma.

Ter desenhado uma ideia geral no papel, me auxiliou para economizar tempo ao desenvolver o Protótipo de Baixa Fidelidade, que foi feito para entender o quanto antes o que precisava ser ajustado e melhorado. Nesse primeiro momento, priorizei as interações que diziam respeito a seleção de jogos e a fila, que eram essenciais no MVP.

Com o protótipo de baixa finalizado, desenvolvi um pequeno roteiro para rodar alguns Testes de Usabilidade, onde consegui identificar os ajustes necessários, como a necessidade de mudar algumas palavras e algumas interações para que a interface fosse mais intuitiva. Gravei os encontros, para que pudesse prestar bastante atenção nos usuários e para rever com mais tempo e calma posteriormente. Com os insights que foram adquiridos durante todos os testes e, considerando o tempo de entrega, decidi aplicar as alterações de melhoria no próprio Protótipo de Alta Fidelidade.

Antes de começar a desenvolvê-lo, busquei algumas referências visuais para especificar o tom da interface e auxiliar na criação do Styleguide

Chegando na etapa final, o restante do período do Hackathon foi usado para a criação de fato de nossa interface. Abaixo, descrevo o processo de criação da mesma e algumas de suas funcionalidades. Você pode explora-la por meio desse link. (Além disso, você pode acompanhar o processo de construção do protótipo na versão mobile antes de atualizar o artigo com ele finalizado)

Como a aplicação seria apenas interna, e sempre tendo as personas em mente, defini um tom mais informal e que fosse possível identificar algumas referências do mundo real. Na tela de login, por exemplo, a frase em destaque “Nada mais de anotar nomes no caderninho” remete a antiga forma de organização dos usuários.

Home

Depois de logado, o usuário poderia se deparar com duas situações. Uma em que ele seria o primeiro da fila, então não haveria nenhum jogo em andamento até o momento, e outra em que já há algumas partidas em vigência. Nos dois casos, os jogos que o usuário mais jogou fica representado logo abaixo, para facilitar na entrada dos que mais gosta.

Na primeira situação, seria necessário selecionar o jogo que gostaria, convidar ou não alguém (e nesse caso, esperar que aceitem os convites), e revisar os dados antes de ser redirecionado para a tela da partida de fato. Na segunda, o usuário apenas precisaria entrar na fila de algum jogo já em andamento.

Os passos seguidos para definir um novo jogo e entrar na fila é muito parecido nos dois casos.

Partida

Se o usuário for o primeiro da fila, ele será redirecionado diretamente para a tela de partida, que pode variar um pouco de aparência de acordo com a forma que foi escolhido jogar, seja sozinho, em dupla, ou até mesmo em time.

No término da partida, o primeiro que estava na fila pode declarar quem venceu, e esse é um ponto crucial, pois será dessa maneira que o ranking será estruturado, além de ser a forma que irá permitir que as próximas pessoas da fila possam jogar. Foi a confiança que os funcionários têm entre si que permitiu isso.

Ao declarar a vitória do time ganhador, o usuário seria redirecionado para uma tela que oferece a entrada na fila novamente. Atualmente, na empresa, a pessoa que vence a partida permanece jogando em algumas situações, mas decidimos mudar isso para auxiliar no fluxo da fila, padronizar a forma de jogar e diminuir o tempo de espera, além de pensar em uma solução a longo prazo, considerando que a FCamara está contratando bastante, então o número de funcionários só tende a crescer.

Fila

Ao selecionar para entrar na fila, seja ao encerrar a partida ou direto da tela home, o usuário teria um tempo de espera estimado, definido de acordo com as últimas partidas jogadas, além de poder acompanhar o que está sendo jogado no momento, quem está jogando e a quanto tempo a partida está rolando.

Caso o mesmo não tenha convidado pessoas especificas para montar um time e jogar com ele, quando ele for o próximo, poderá selecionar a forma que gostaria de jogar, seja sozinho (caso a fila esteja pequena), em dupla ou em time com os próximos da fila.

Além disso, como diferentes jogos podem ser escolhidos para jogar na mesma sala, a imagem ao lado representa o jogo que o usuário escolheu previamente, além de ser clicável e permitir que mude-se a escolha sem ter que voltar para a tela inicial.

Perfil

Todos esses processos permitem reunir diversas informações que podem ser relevantes ao jogador, como estimativa de horas jogadas, e quantas partidas jogou, sendo representadas de maneira visual no perfil.

Próximos Passos

Com a data de entrega na porta, algumas funcionalidades não puderam ser priorizadas. Apesar da interface já poder ser utilizada como MVP, há aplicações que podem ser realizadas para melhoria da mesma

• Realizar mais testes de usabilidade;
• Aprimorar a versão mobile. (Que está em construção por aqui, caso queira acompanhar o processo)
• Observar usuários utilizando a plataforma no dia a dia, se possível aplicação pós pandemia;
• Incluir telas ao ganhar uma “Conquista” depois de uma partida, e personaliza-las de acordo com o jogo;
• Incluir os jogos de tabuleiro na interface;
• Finalizar a aparência do Ranking geral;
• Possibilitar a inclusão de um jogo não disponível anteriormente;
• Aperfeiçoar a interface considerando campeonatos.