OrangeDesk: um desafio para organizar o retorno presencial ao escritório de forma ágil e segura
Era março de 2020, de uma hora pra outra observamos as ruas, comércios e escritórios ficarem vazios enquanto os hospitais aumentavam exponencialmente sua ocupação. Hoje, cerca de um ano e meio depois, com 66% da população vacinada com pelo menos a 1ª dose, é possível começar a pensar em um retorno gradual das atividades.
Com isso, a FCamara está planejando a reabertura dos escritórios de forma segura, seguindo todos os protocolos de higienização e principalmente o distanciamento social.
A proposta
Com base nesse contexto, a FCamara propôs uma aplicação web, em que o consultor pode realizar um agendamento para ir ao escritório, além de poder escolher a mesa onde quer trabalhar.
Organização da equipe
Fomos divididos de forma aleatória em Squads com cerca de 6 integrantes cada. No início do projeto 2 desistiram, mas seguimos adiante e na primeira daily definimos os papéis de PO e Scrum Master do projeto.
Apresento a vocês os integrantes da Squad 16 ❤
O processo de design
Optei por utilizar o duplo diamante para orientar o processo de design.
Por ser um projeto diferente dos que já trabalhei, uma vez que o problema já estava parcialmente definido e já tínhamos uma proposta por parte da empresa, senti um pouco de dificuldade na escolha das metodologias de pesquisa a serem realizadas. Dessa forma, escolhi o processo de duplo diamante para seguir, uma vez que ele segue uma lógica que pode nos ajudar a aprofundar os problemas e priorizar o que realmente é importante.
1. Descoberta
Para iniciar, decidi fazer um plano de pesquisa, onde abordei os objetivos e métodos que seriam utilizados no decorrer do projeto. Tracei os seguintes objetivos:
Analisar como era o cenário antes da pandemia;
Coletar informações de perfil do público alvo;
Detectar momentos em que os consultores precisam trabalhar no escritório;
Entender possíveis soluções que sejam adequadas ao problema proposto;
Identificar o grau de satisfação com agendamentos em outras plataformas.
Ainda não tinha hipóteses claras para serem testadas, então, juntamente com a equipe, construímos uma matriz CSD (certezas, suposições e dúvidas).
A partir disso, observei que não tinha muitas dúvidas relevantes para que se fosse aplicado um questionário. Então, optei por realizar entrevistas, pelo fato de resultarem em dados mais aprofundados em menos tempo.
O público alvo da minha pesquisa eram pessoas que já tivessem frequentado a FCamara presencialmente, pois meu objetivo era mapear essa jornada para trazer a melhor experiência possível para o digital.
Montei um roteiro a partir da matriz CSD e escolhi aleatoriamente consultores que estivessem disponíveis no Discord naquele momento. Caso eles não se encaixassem no corte da pesquisa, iria pedir indicações de quem pudesse ajudar.
O roteiro pode ser visto aqui.
A primeira pessoa entrevistada é analista de recrutamento, e além das demais questões referentes ao roteiro, ela conseguiu nos dar um norte muito interessante sobre o futuro da FCamara. Além disso, ela nos informou que atualmente algumas pessoas precisam ir ao escritório e o agendamento é feito através de um forms que é autorizado pela recepção.
A segunda entrevistada é desenvolvedora trainee, apesar de não ter frequentado o escritório presencialmente antes da pandemia, ela fez uma brincadeira que nos ajudou a identificar uma oportunidade muito interessante para o projeto.
O terceiro entrevistado confirmou as informações obtidas anteriormente então senti segurança para dar continuidade ao projeto
2. Definição
A partir das entrevistas, construí um mapa de afinidade e pude extrair os seguintes insights:
O produto proposto é relevante, uma vez que é utilizado um forms atualmente e precisa do tempo de trabalho de uma pessoa para aprovação dessas reservas
Identificamos que os objetivos da FCamara incluem um regime de trabalho prioritariamente híbrido ou 100% remoto, e que os escritórios presenciais terão foco em reuniões e ambientes colaborativos.
Como a FCamara vem fazendo diversos programas de trainee, e é voltada para a formação de pessoas, na segunda entrevista tive uma ideia que teria como foco esse público que vem crescendo dentro da empresa: OS TRAINEES. E a ideia que tive era de estender a experiência para além do digital, com placas de orientação dentro do prédio que pudesse indicar para eles onde as mesas numeradas se encontram. Foi necessário uma nova pesquisa.
Descoberta (de novo?)
Percebi que era necessário uma nova pesquisa para identificar se essa proposta seria realmente relevante.
Foram entrevistadas 15 pessoas, sendo 11 delas trainees e foi possível perceber que aqueles os quais não querem retomar ao regime híbrido são os que moram em outros estados ou que já tinham o home office como objetivo inicial.
78% daqueles que já foram na FCamara presencialmente gostariam de adotar o regime híbrido.
Síntese
Para sintetizar essa etapa da pesquisa, em uma das mentorias que fiz, pedi ao mentor que me explicasse como era o layout presencial e ele me explicou que era um lugar grande e aberto. Então questionei se era possível visualizar um número de uma mesa que estivesse no fim da sala e ele me informou que não.
A partir disso, e também pelo fato de ser sugerido em um dos testes de usabilidade, decidi permanecer com a ideia das placas, pois elas são necessárias para facilitar a forma pela qual os consultores encontram as mesas reservadas, além de ser similar a 1ª heurística de Nielsen, em que o usuário deve visualizar claramente onde ele está.
Personas
A partir das entrevistas conseguimos validar duas personas, com base em arquétipos e no fato das pessoas que querem adotar o regime híbrido de trabalho e as pessoas que querem permanecer no home office.
A partir da persona com arquétipo de exploradora e supondo que ela viva em São Paulo, criamos um Mapa da Jornada do Cliente.
No mapa, os dois pontos mais baixos são identificados no momento do agendamento do escritório e no trajeto até a FCamara, dependendo da distância que o consultor mora. Então o produto proposto se encaixa bem na etapa da otimização do processo de agendamento. Além disso, é importante manter a boa experiência que o consultor tem ao frequentar o escritório.
Business Model Canvas
Também nessa etapa foi possível sintetizar o Business Model Canvas do nosso produto.
3. Ideação
Comecei a etapa de ideação com um Crazy 8's.
O rabisco frame é real! haha
Desde o inicio das entrevistas tive a ideia de fazer o fluxo em etapas, para não fornecer muitas informações de uma vez só e acabar confundindo a tomada de decisão dos usuários.
Depois disso comecei a pensar no fluxo de telas. Após os testes de usabilidade ele foi alterado e a versão final é essa:
Após a apresentação do fluxo e dos rabiscoframes, com a aprovação da equipe, comecei a produzir os wireframes para que eles começassem a programar. Utilizei Behance, Pinterest e outros sites como fonte de referências gráficas para a parte de UI design.
Nome do projeto
Na parte de ideação cabe também escolher o nome do projeto. Para isso, todos os integrantes da equipe deram sugestões de nomes e posteriormente votaram nos seus favoritos.
O mais votado foi Orange Desk.
4. Entrega
A partir das ideias e referências coletadas durante a etapa de ideação, comecei a construir o styleguide do sistema e o logo, levando em consideração as cores e fontes apresentadas do brandbook da FCamara, e os padrões utilizados no site oficial da empresa.
Por fim passamos para a próxima etapa: o protótipo de alta fidelidade.
Durante a construção levamos em consideração as Heurísticas de Nielsen:
- A cada etapa que o usuário avança no fluxo, ele sabe em que fase está;
- São utilizados diversos ícones e objetos para representar a semelhança com o mundo real, e o layout das mesas também foi criado a partir de um kit de design interiores disponível na comunidade do Figma;
- O usuário tem total liberdade para voltar o fluxo caso tenha tomado alguma decisão equivocada, bem como voltar para a home caso queira reiniciar o fluxo do zero. Os botões de voltar e da home são colocados fora da área do polegar para que se tenha menos chances de serem clicados por engano;
- O design possui consistência e padronização, pois são usados os mesmos elementos e ilustrações similares durante todo o fluxo;
- Em versões futuras o usuário poderá desfazer o cancelamento de mesas já agendadas (isso mesmo: cancelar o cancelamento haha);
- Pressuponho que o reconhecimento ao invés de memorização também está presente, uma vez que os testes de usabilidade apresentaram bons resultados. Mas para confirmar essa hipótese seriam necessários mais testes com tarefas mais específicas;
- A estética e o design minimalista também estão presentes, sendo os únicos elementos com destaque o logo, as ilustrações e os botões principais. Mas também pode ser aprimorada;
- Os formulários apresentam mensagens que ajudam o usuário a identificar requisitos do sistema antes mesmo de avançar;
A primeira versão foi colocada pra teste com os seguintes objetivos:
identificar o tempo que o usuário leva para completar o fluxo;
identificar possíveis falhas na experiência
Para a aplicação dos testes de usabilidade, utilizei o site maze.co e pude personalizar o teste conforme meu roteiro, e além de analisar o protótipo, receber sugestões de melhorias dos participantes
Acesse o relatório completo do teste de usabilidade 1 aqui.
A média de tempo utilizada para a finalização do fluxo foi de 55 segundos. Segundo a avaliação do maze, a tela de preenchimento dos dados teve a menor nota de usabilidade. No entanto, o aplicativo não mostra os botões que são clicáveis no protótipo, levando o usuário a insistir várias vezes sobre um objeto. O restante das telas obtiveram boas notas de usabilidade, comprovadas pelos mapas de calor acima, que apresentam cliques quase que certeiros sobre os botões que levam ao fim do fluxo.
O visual, a experiência, a linguagem obtiveram notas boas por parte dos usuários.
Neste teste, a etapa de sugestões foi muito rica, pois identificamos algumas falhas e necessidades, como por exemplo: a necessidade de um layout da sala, o fato da tela da escolha da mesa estar parecendo um calendário, a mudança do fluxo do login para o início da jornada e algumas possíveis melhorias para o futuro.
As alterações foram realizadas no protótipo, algumas telas foram alteradas e foi um grande desafio desenhar uma nova forma de seleção da mesa que atendesse aos usuários e que fosse possível de estar pronta no prazo do hackathon. Fizemos algumas alterações e colocamos para rodar um segundo teste.
Acesse o relatório completo do teste de usabilidade 2 aqui.
Nesse segundo teste, o protótipo estava mais avançado e possuía algumas variações de telas que se fossem acessadas prejudicariam o resultado de usabilidade no maze, uma vez que esses caminhos não foram cadastrados na plataforma, o que explica a média de sucesso de 35,7%.
Nessa etapa testei em qual etapa do fluxo as pessoas preferem o login e fiz teste de comparação de telas para analisar qual os usuários gostavam mais. O tempo médio do fluxo direto se manteve ainda em torno de 55 segundos e as notas quanto ao visual se mantiveram similares, reduzindo apenas 0,1 em cada uma das análises.
Nas reclamações já não houve recorrências sobre a escolha das mesas e houve a sugestão de uma tela de agendamentos, que já estava nos planos da equipe. Tentei também retirar elementos irrelevantes na interface para deixá-la menos poluída.
Com as alterações feitas, o protótipo mobile do desafio está pronto :D
Sugestões de melhorias futuras
Ajustes de bugs da versão final;
Protótipo para tela desktop e tablet para orientar melhor a responsividade do sistema;
Layout interativo dos lugares disponíveis com visualização das mesas já ocupadas;
Página de administrador para aumentar o número de estações disponíveis e porcentagem de pessoas permitidas conforme flexibilização das leis de distanciamento social;
Opção do agendamento de horários para as salas de reunião.
Conclusão e aprendizados
Depois de criar esse projeto inteiro em duas semanas, conciliando com trabalho e faculdade, a sensação é de alívio e MUITA gratidão. Obrigada a toda equipe da FCamara por proporcionar essa experiência incrível e nos dar a oportunidade de experimentar como é o dia a dia do trabalho em equipe, colocando em prática as coisas que já aprendemos na teoria.
Para meus próximos trabalhos pretendo buscar entender mais os objetivos do negócio antes de começar a trabalhar no projeto, percebi tarde demais no hackathon que a gente poderia questionar os mods sobre a proposta. Também vou estudar mais sobre responsividade, pois acabei não passando aos devs o protótipo desktop e eles fizeram automaticamente, fiz apenas algumas telas. Mas tudo é aprendizado e com certeza estarei cada vez melhor a cada projeto que eu fizer. E esse hacka, sem sombra de dúvidas, foi um divisor de águas na minha carreira. Muito obrigada ❤
Desafio proposto para o Hackathon do Programa de Formação da FCamara — Season 2
Conheça mais sobre o time:
Caroline Barcella Amaral — UX Designer-https://www.linkedin.com/in/carolinebarcella/
Andreza Batista — Desenvolvedora— https://www.linkedin.com/in/andreza-batista-401183210/
Henrique Rinaldi — Desenvolvedor — https://www.linkedin.com/in/henrique-rinaldi
João Victor Rodrigues — Desenvolvedor — https://www.linkedin.com/in/joão-victor-pereira-rodrigues-6a65b8128/
