[CASE] Organizando a Arquitetura da Gupy
Esta é uma proposta de arquitetura de informação para organizar a forma como são apresentados os dados na página do candidato da plataforma Gupy.
Histórico
Antes de tudo, não trabalho nem nunca trabalhei na empresa detentora da plataforma Gupy. Até tentei conversar com alguns designers de lá, como faço normalmente com outros designers de outras empresas. Fui ignorado solenemente kkkkkk.
Bom… esse foi um desafio lançado por uma empresa a qual participei de um processo seletivo. Neste processo, a pessoa que estava responsável pela vaga me pediu para pegar qualquer plataforma e sugerir alguma mudança. Isso era para demonstrar a minha forma de raciocínio, evidenciando um processo e as decisões.
Como eu não estava ganhando nada com isso, nem queria perder tempo realizando uma pesquisa que não seria utilizada após o processo seletivo, resolvi realizar o “case” com a plataforma mais conhecida pelos candidatos a vaga de empresas brasileiras.
Desenvolvimento
Primeiro foi necessário realizar um recorte para entender quais métodos se encaixariam no espaço de tempo, estabelecendo, assim, o escopo do trabalho.
A decisão foi realizar uma análise da interface do candidato, por ser mais familiar e estar sob meu acesso/domínio. As áreas de gestão do processo, onde o recruiter acessa e tem visão, precisaria de uma imersão ao cenário de RH para processo seletivo e depois encontrar alguém disponível para participar dessa imersão. Por esse contratempo não era viável realizar essa análise sobre o painel de recrutamento.
What the better way to apply?
Exploração
Para iniciar a exploração, realizei alguns prints enquanto estava aplicando em alguns processos de empresas que utilizavam a plataforma naquela época.
A análise principal deste trabalho de concentrou em arquitetura de informação e adaptação ao dispositivo desktop (web), usando como navegador padrão de acesso o Google Chrome e uma resolução média de notebook em 1366x768 pixels.
Os notebooks cedidos aos funcionários em setores não relacionados a criação (design ou marketing , por exemplo) são computadores com sistema operacional Windows, possuindo uma tela de 14" e resolução de 1366x768. Esta é a resolução HD popularmente disponível em notebooks Dell, Lenovo, ASUS — não é levado em consideração o uso de monitor extra pois é uma exceção — que é emprestado a funcionários que trabalham em regime home-office, por exemplo.
Este trecho de explicação acima foi obtido com base em observação-participante, por empresas por onde já trabalhei e tive contato com funcionários de RH (cultura e people). Além de isso já ser um padrão de mercado conhecido atualmente.
A arquitetura de informação e os componentes usados na página de dados do candidato possuem problemas de excesso de carga cognitiva para o usuário conseguir finalizar seu trabalho sem medo de errar. Isso é evidenciado pela junção, em acordeons, de sessões como escolaridade e histórico profissional que não possuem uma clara divisão entre si.
Quando a pessoa candidata consegue realizar a finalização do preenchimento inicial, a página de confirmação e acompanhamento possui diversas informações desnecessárias no sentido de que a pessoa interagente não faz nada de útil com aquela informação, gerando mais confusão e dúvidas do que clareza do processo seletivo — explicação dada por alguns usuários na plataforma, em relatos nas redes sociais, quando arguidos sobre a necessidade de tantas etapas em um processo seletivo.
Daí… surge um problema-chave para ser explorado
How to submit and maintain consistency data, in easy way?
Levando em consideração as metodologias ágeis, a sequência que a abstração do Design Thinking propõe se faz útil para guiar este trabalho de uma forma mais enxuta e didática.
Para tanto foram escolhidos os métodos:
- Realização de Benchmarking: Quem já tentou resolver algo similar ao grande problema e formas alternativas de lidar com esse tipo de projeto;
- User flow: identificar um fluxo do processo, centrando no candidato;
- Job To Be Done: identificação dos objetivos/entrega de valor ao usuário;
- Low-fi: prototipação em baixa fidelidade, testando uma nova proposta de arquitetura de informação;
- Hi-fidelity: protótipo em alta fidelidade, com proposta de componentes, tipografia e tabela de cores, exemplificando um novo layout.
Para fins didáticos e exemplo de aplicação do estudo-ideação realizado, foi reconstruído o painel de preenchimento das informações do candidato.
Benchmarking
Achados desta análise
- Preenchimento automático;
- Envio de dados báscos;
- Link ou upload de portfólio;
- Organização de sessões mais marcadas;
- Edição/correção de dados pontuais;
- Construção de linha do tempo para experiências;
- Submissão rápida, e associando a um arquivo.
Fluxo do usuário
No mapeamento do fluxo do usuário a ideia é deixar evidente os passos, macro processos e pontos de decisão que a pessoa interagente do processo precisa lidar para realizar os passos esperados/projetados.
O sub-processo de preenchimento de atualização de dados foi o novo recorte encontrado, pois inclui ciclos de atividades que já possuem, por si só, uma complexidade de elementos visuais e lógica, culminando em uma necessidade de arquitetura de informação bem pensada.
Job To Be Done
Os jobs de um usuário são justamente o que ele realmente precisa/busca concluir, satisfazendo sua necessidade primária ao se submeter a um processo. Aqui foram identificados alguns e descritos sob o formato que apresentei neste artigo (indico ler e seguir 😉)
Low to Hight fidelity prototype
Como exercício para uma nova proposta de arquitetura, desenvolvi uns testes em baixa fidelidade e cheguei a este modelo de layout.
Baseado no agrupamento de funcionalidades e sessões da página, criei algumas diretrizes para guiar uma nova proposta de adequação estética:
Aproveitamento dos espaços em branco como direcionador, aumentando o foco e reduzindo a fadiga da leitura em componentes largos
Os componentes atuais da plataforma comportam o conteúdo tentando aproveitar a largura total da página, condicionando a pessoa usuária a ter que percorrer toda a tela para finalizar a sua leitura. Isso causa uma fadiga em leitura e busca por interações em uma superfície grande (maiores que uma folha A4), fazendo com que o foco seja perdido e, consequentemente, haja confusão sobre o término da tarefa e início da próxima.
Divisão de sessões que possuem acesso direto, sem necessidade de expansão para exibição do conteúdo. Usando, em substituição a este artifício, espaçamentos e hierarquia de títulos/conteúdo.
Um componente que é muito bom para uso em sessões é o acordeon. Porém, seu uso pode trazer problemas quando usado de forma indiscriminada, como é o caso de separação de conteúdos de temáticas distintas. O acordeon, em um uso semântico, tem como propósito agrupar conteúdo da mesma temática e é bem empregado nos casos de FAQ, por exemplo, pode a temática é a mesma e o conteúdo encapsulado é o que precisa de uma separação/foco.
Nesta proposta de arquitetura foi estudada a semântica de passos (ou steppers), sendo um recurso separador sequencial do conteúdo.
A questão aqui ficou sobre a escolha do que seria mais importante, em que sequencia. Para isso eu precisaria de mais tempo, investigação e pessoas para realizar entrevistas e testes.
Neste ponto da arquitetura foi escolhida a estratégia e separação por sessões usando os espaços em branco e a hierarquia de títulos. A apresentação/disposição das sessões são em uma só página, fazendo alusão ao formato já conhecido de currículo por ser a referência direta que esta área faz no consciente do usuário.
Além da distribuição das informações, também a ajuda de preenchimento automático por vínculo a ferramenta Linkedin foi uma indicação. Isso porque as vagas são, geralmente, publicadas como links de distribuição na plataforma, sugerindo que é uma fonte de captação/recrutamento e os participantes já possuem seus históricos preenchidos — seria um desperdício de tempo fazer os candidatos preencherem novamente em uma plataforma externa, uma vez que os próprios recrutadores buscam candidatos pelo que publicam em seus perfis na área do currículo.
Obs.: Durante a fase de exploração foi encontrado um bug na ferramenta onde os dados armazenados em uma importação de PDF (indicada pela plataforma como recurso) embaralha os dados e força o candidato a refazer manualmente todo o seu preenchimento, sem ter como desfazer esse mal preenchimento após a importação.
Biblioteca de componentes e layout em alta definição
A escolha da escala de cores, tipografia, formato dos detalhes (inputs e buttons) e os ícones foram para adaptação a identidade e biblioteca da empresa que solicitou o desafio. Assim, foi realizada uma adaptação mínima e criado um conjunto de elementos/atomos e moléculas (vide Atomic Design) que tornasse este case minimamente viável.
A estratégia de interação para preenchimento foi o de abrir modais, posicionados na área inferior da tela, com opções claras de preenchimento, salvando e atualizando a área alvo da interação.
Observações e conclusões
Este projeto foi realizado em um curtíssimo prazo, embora explorados métodos como benchmarking que exigem atenção aos detalhes de comparação, com o intuito de finalizar o case. A observação foi concentrada na área do candidato e, em um segundo recorte de trabalho, no processo de preenchimento.
Os direitos de imagem da marca Gupy são reservado aos seus detentores e não foi oculta desde case por ser uma marca de pública e notória identificação, conhecimento dos termos de uso da plataforma e por não infringir o uso da marca — uso não comercial e sem manipulação ou manutenção a sua reputação. Referenciando-a como uma empresa amplamente conhecida, sendo os prints da plataforma obtidas por meio do acesso disponibilizado pela mesma em proceso seletivo, realizado pela máquina do candidato.
O case apresenta algumas partes em inglês, pois foi formulada para uma empresa que possuia uma internacionalização e por convenção de que os trabalhos realizados por mim, geralmente, são documentados neste idioma ou em espanhol.
P.S.: Não autorizo a cópia, repredução, uso parcial ou integral deste material por qualquer empresa, entidade, representante ou afins sem autorização por escrita.
