Orange Desk

José Adauto
7 min readSep 16, 2021

Como utilizamos UI/UX para ajudar na retomada do trabalho presencial no Grupo FCamara.

Este projeto foi desenvolvido durante o programa de formação da empresa FCamara que ocorreu entre os dias 1º a 16 de setembro de 2021 . O programa tem como objetivo selecionar pessoas que estão em processo de formação e transição de carreira ou já formados que tenham interesse na área de tecnologia e queiram uma oportunidade para ingressar no mercado de trabalho. O processo foi totalmente online sendo necessário para a última etapa, o Hackaton, a criação de Squads com 5 a 6 membros que foram escolhidos pelo próprio time da FCamara a partir de sorteio.

O desafio e o cenário atual

Fomos desafiados a criar uma solução para empresa que pretende voltar a trabalhar de forma presencial, porém precisam de alguma forma ter controle de como alocar seus consultores nos escritórios.

O cenário é descrito pela própria descrição do desafio:

“Com a Pandemia da Covid-19 muita coisa mudou. O trabalho remoto não foi uma opção, mas sim necessário e assim se foram quase 2 anos de home office. Porém, hoje com a vacinação em andamento, já podemos enxergar novas possibilidades, e aqui na FCamara não é diferente. Com muito cuidado e segurança estamos planejando a reabertura dos nossos escritórios. Estamos muito felizes com essa novidade, mas sabemos que não será como antes.

Continuaremos com todos os protocolos de higienização como a disponibilização de álcool gel e máscaras, mas precisamos de um ambiente onde seja possível acomodar nossos consultores de forma confortável e sem causar aglomeração.

Voltaremos com o modelo híbrido, ou seja os #SangueLaranjas irão decidir se querem ir ao escritório, seja todos os dias, ou alguns dias, ou se preferem continuar home office. Sabemos que existem pessoas que preferem os escritórios por várias questões pessoais, resolução imediatas ou pela saudade da nossa FC!”

Objetivo do produto

O Orange Desk foi criado com o intuito de facilitar a reserva e utilização de mesas por Consultores FCamara nos escritórios de São Paulo e Santos.

Com este conceito temos o objetivo de que, com a plataforma não haja desperdícios de mesas não utilizadas e que de forma justa permita a utilização por todos os consultores.

Proporcionando a comodidade de reservar sua mesa de trabalho de onde estiver e no dia que lhe for mais conveniente. Tudo em poucos cliques e com a segurança de estar cumprindo todos os protocolos de segurança a sua saúde.

Usuários

Devido a pouca quantidade de entrevistados, optamos por elaborar uma proto-persona. Que nada mais é que um tipo de persona criado simplesmente com as informações que a empresa já possui sobre os consultores.

Proto-persona

A partir disto usei o JOB TO BE DONE para criar a jornada do usuário:

Eu como consultor FCamara, preciso ir algumas vezes no mês ao escritório, para isto utilizo o sistema de agendamento de mesas para garantir minha estação de trabalho.

Pesquisa Quantitativa

Realizamos então uma pesquisa qualitativa com alguns dos consultores para entender algumas necessidades e dores no momento de voltar aos escritórios:

A pesquisa ajudou a validar algumas das nossas hipóteses, que se mostraram relevantes para o desenvolvimento da solução:

Quadro com ideias no Brainstorm

Nosso primeiro passo foi realizar um brainstorm, colocando todas as nossas ideias em um quadro, dessa forma podemos nos concentrar em resolver a problemática com a visão de cada integrante do squad:

Com o alinhamento das ideias foi preciso um aprofundamento para entender mais sobre o problema, então decidimos utilizar uma metodologia do Design Thinking, que estimula os profissionais da área a encontrar soluções criativas e duradouras em seus projetos: O Double Diamond:

Processo do Double Diamond

Algumas validações da pesquisa foram:

  • A reserva de mesa pode ser aleatória, pois 100% dos entrevistados diz não ter preferência por uma mesa específica.
  • A preferência é por continuar em home office, mas se precisar ser híbrido, 100% prefere ir somente uma vez na semana.

Alternativa de solução

Após a pesquisa com os usuários partimos para o Benchmarking de soluções já existentes a fim de conhecer mais sobre as funcionalidades e colher insights para nossa plataforma.

Cinco aplicações foram pesquisadas e pensamos como poderíamos:

  • Identificar as mesas para realização do check-in.
  • Simplificação o sistema, pois não é obrigatória a presença do consultor na empresa, mas será.
  • Criar um sistema de punição caso o consultor agende uma mesa e não compareça.

Projetando a solução

Com essas ideias priorizamos a construção de uma solução de agendamento por data e para o dia todo, onde o consultor pode agendar somente uma data por semana e não pode perder seu agendamento.

Para o check-in utilizamos o sistema de código de digitos nas mesas, como um adesivo, parecido com o sistema de checagem de duas etapas de aplicativos comerciais.

Wireframes

Para o desenvolvimento do layout da nossa aplicação, fizemos o primeiro modelo das telas com baixa fidelidade utilizando o Figma, alternando em escalas de cinza, posicionamento das imagens de background e logotipo. Nesta fase foi possível enxergar as questões de usabilidade, acessibilidade e funcionalidades.

Wireframes de baixa fidelidade

Depois da definição das funcionalidades e do caminho a ser seguido pelo usuário e devido ao curto espaço de tempo desenvolvemos os wireframes de alta fidelidade para a elaboração do protótipo.

Wireframes alta fidelidade Mobile

Fluxo do usuário

Fluxo de agendamento
Fluxo do Check-in

Guia de estilos

O guia de estilos foi criado baseado no branding book da FCamara e seguiu além de cores e fonts também o estilo de ilustrações utilizados.

Guia de cores
Fontes utilizadas nos wireframes e protótipo
Botões mobile e desktop
Ilustrações utilizadas do site freepik
Logo da FCamara e da solução Orange Desk

Testes de usabilidade

Devido a solução ser simples e intuitiva 100% dos testes concluíram a tarefa de realizar um agendamento.

Heatmap da primeira tarefa — agendamento.

O grau de dificuldade atribuído a esta tarefa também foi avaliado como fácil.

Quanto a tarefa de fazer check-in também teve 100% de aproveitamento e uma avaliação por parte dos usuários próxima a fácil.

Heatmap da segunda tarefa — Check-in.

Quanto a cores e tamanho de fontes tivemos um empate entre o bom contraste e o ruim, mas o tamanho de fonte foi dado como bom por 80% dos testes.

Protótipo de alta fidelidade

Protótipo mobile

Protótipo desktop

Conclusão

A retomada do trabalho presencial deve ser feita com muito cuidado e preocupação com a saúde dos colaboradores. Está solução permitirá que os funcionários que precisa ir ao escritório façam isto de maneira segura.

Como sugestão de incremento para uma próxima sprint sugerimos a inclusão de uma página para seleção do escritório (Santos ou São Paulo), antes do agendamento para versão mobile e a inclusão de mais uma caixa de seleção na página de agendamento da versão desktop.

Novas telas com a opção para escolher o escritorio

--

--