como

UX Design

Design de interação

UI Design

Design Emocional

quando

2022

onde

fitcard

criando uma ferramenta

para a avaliação 360 de uma grande empresa

Projeto feito em co-criação com Jonathan Felipe.

Esse foi um projeto em que tivemos que nos adaptar para um prazo reduzido. Mas, como era um projeto interno da empresa, conseguimos certa agilidade em alguns dos processos.

Mais pra frente iremos falar sobre os requisitos. Mas, para deixar claro, o nosso objetivo era: diminuir o tempo necessário que os líderes precisavam para aplicar uma metodologia de avaliação 360.

Anteriormente, a avaliação era feita em planilhas separadas, exigindo a criação de uma nova planilha para cada membro da equipe, o que acabava sendo uma tarefa extremamente trabalhosa e custosa. Era necessário usar nossa expertise para criar uma aplicação web que pudesse solucionar esse desafio.

começando com

user experience

Benchmark

Após a introdução do problema o primeiro passo como UX designer foi fazer um benchmark das soluções existentes. Encontramos várias soluções pagas que ofereciam várias possibilidades para os facilitadores.

Levantamento de requisitos

Após uma introdução no tema, partimos para definir quais seriam os requisitos do projeto. Isso serviu para termos um objetivo definido, para que pudéssemos alocar melhor o tempo de design no projeto.

Basicamente, precisávamos criar uma ferramenta que fosse mais fácil que a utilização de planilhas (forma como era feito anteriormente). Não seria necessário ferramentas de análise rebuscadas ou fluxos muito complexos.

E encontramos um ponto importante: o resultado da pesquisa poderia ser alimentado em um planilha, mas o grande problema anterior estava na etapa de criação e envio para os colabores.

Com isso, fechamos o escopo principal:

Página de login: para identificarmos qual equipe pertence o usuário

Página de seleção de avaliados: não precisaríamos “atrelar” o avaliador ao avaliado, isso seria feito de forma mais orgânica

Página de avaliação: dividida por assuntos em várias páginas (soft skill, hard skill, ecossistema, dentre outras...)

rabiscando e iterando com

wireframes

Com o benchmark e requisitos, partimos para a criação do wireframe. Sabíamos que o “cerne” do projeto seria a página de avaliação, mas dedicamos um tempo às etapas anteriores para não gerar dúvidas e necessidade de contato com os líderes.

Fizemos o wireframe das páginas acima:

Ainda faltava resolver alguns pontos, mas tínhamos informações disponíveis naquele momento:

Resetar a senha: provavelmente não teríamos a viabilidade técnica para realizar isso, mas esperávamos uma resposta. Caso ela fosse negativa, teríamos que pensar em uma mensagem clara ao usuário

Alterar avaliado: não teríamos como permitir que o usuário pudesse mudar quem estava avaliando depois que ele começasse. Pensando na experiência, recomendamos aos líderes que colocassem essa questão quando fossem passar a metodologia

Mobile: apesar de não estar no escopo, precisaríamos informar de alguma maneira caso o usuário tentasse acessar pelo celular

Apesar de não termos feito todos os wireframes, a parte principal havia sido resolvida. As questões acima, tratamos durante o decorrer do projeto.

validando informações com o

card sorting

Diferente de uma avaliação por escala, a avaliação 360 utiliza parâmetros para cada um dos números da votação. Que no caso, poderia ir de 1 a 5 ou 1 a 10.

Assim, haveria a necessidade do usuário conseguir votar pela descrição do que havia sido dito e não somente pela escala.

Sabendo disso, tínhamos a hipótese que, apesar da metodologia indicar isso, o usuário poderia correlacionar de maneiras diferentes. Pois cada número poderia ter um “peso” diferente do que estava dito no enunciado.

Questionamos os líderes:

“Se o usuário entender que a descrição do “4” é a ideal, mas, ao mesmo tempo, pensar que o seu voto deveria ser um “3” na escala, o que ele deveria fazer?”

A resposta foi que eles deveriam priorizar o enunciado. Mas que essa ainda era uma questão a ser pensada, pois não podemos presumir que todos os usuários terão o mesmo pensamento.

Para avaliarmos se o usuário entende que a descrição está condizente e correlacionada com o número da escala, aplicamos um “card sorting adaptado”. Aqui, utilizamos a metodologia de card sorting fechado. Onde o usuário teria 5 colunas, contendo os números de 1 a 5 e cards com as 5 descrições possíveis.

Abaixo temos o popular result matrix:

O problema identificado:

Aplicamos o cardsorting com 6 pessoas. E, além do resultado acima, conseguimos observar que a maior parte da dúvida entre as descrições estavam entre o “2” e o “3”.

A única descrição que não gerou dúvidas foi a da parte de Ecossistema, onde as perguntas seriam direcionadas pelo conhecimento de regras de negócios e produtos da empresa.

Com essas informações, encaminhamos aos líderes um report mais detalhado. Detalhando os possíveis problemas e quais as palavras que geraram mais dúvidas.

Após algumas alterações, foram geradas novas descrições. Com uma linguagem mais fácil e com palavras mais distintas. Realizamos alguns testes com essa nova descrição e conseguimos atestar a melhora!

front-end &

user interface

Após os levantamentos feitos na etapa de UX, começamos a projetar a interface da ferramenta.

Vale citar que nessa etapa houve uma co-criação e sinergia entre Design e Front-end. Fizemos todo o processo juntos e realizamos várias iterações para que o projeto fosse viável nas condições disponíveis e, ao mesmo tempo, que fosse uma boa experiência para o usuário final.

Encontramos juntos soluções diversas. Mesmo que a área em questão não fosse de total domínio, auxiliamos um ao outro. Seja encontrando formas de manipular um svg em lottie ou como aplicar design emocional em um botão 🙂

Nesse momento, alguns levantamentos reportados na fase de Card Sorting, ainda estavam sendo revisados. Mas, como o impacto seria maior na área de conteúdo, resolvemos seguir por conta do prazo “apertado”.

Além da interface, um outro propósito:

Além de construir uma boa interface, levamos em consideração a construção da área de experiência do usuário (veja o case). Como seria uma ferramenta utilizada por toda a equipe de T.I., queríamos combinar metodologias de UX e UI em novos projetos da empresa, mostrando o potencial dessa combinação na entrega de melhores produtos para nossos usuários.

Home:

Estruturamos visualmente para ter o ponto focal nos campos para login e, para gerar um impacto visual, usamos animações da biblioteca Lottie.

Alterar a Senha:

O usuário não poderia alterar a senha diretamente por essa aplicação, por conta de uma limitação da API. Mas, sabíamos que era algo que geraria dúvidas, caso não tivesse nenhuma informação.

Resolvemos o problema tentando evitar uma má experiência. Mantivemos um fluxo “padrão”, onde o usuário com a funcionalidade “esqueceu a senha”, mas ela serviria apenas para trazer uma informação.

Com base em Design Emocional de Don Norman, por mais que o usuário não tenha uma boa experiência se tratando no nível comportamental, podemos explorar outros aspectos.
Disfarçamos essa experiência negativa com um bom design visceral e reflexivo (através de uma animação de um coala frustrado, mostrando para o usuário que estamos desapontados em não oferecer essa solução para ele)

Interação de avaliação:

Criamos a funcionalidade de avaliação como um “componente”, antes de começar o layout da página completa.

É a interação mais importante do projeto, devido à carga cognitiva necessária para o usuário avaliar um membro da equipe.

Além disso, seria necessário mostrar uma explicação para cada tipo de nota. Focamos em alguns pontos:

Não ocupar muito espaço de tela: por isso, a explicação ficou na área em branco no canto direito. Sendo visível somente após a interação do usuário

Microinterações: reforçamos o estado do sistema atual com as microinterações.

Scannability: criamos uma estrutura que facilitasse a leitura ocidental, para que o usuário pudesse fazer um “scan” da página facilmente.

Outro ponto sobre o design emocional:

Na primeira vez que o usuário avalia algum membro do time com uma nota máxima, ele é surpreendido com uma animação e um feedback sonoro de um unicórnio. Isso cria uma resposta visceral imediata e positiva, aumentando a satisfação do usuário com a experiência.

Além disso, a interação também utiliza o nível reflexivo do design emocional, incentivando o usuário a refletir sobre suas escolhas ao dar notas máximas para outras habilidades dos membros da equipe. Isso ajuda a promover uma avaliação mais criteriosa e justa, aumentando a confiança do usuário em suas avaliações.

Para evitar que a experiência se torne repetitiva ou cansativa, adicionamos uma opção de pausar o feedback sonoro após a primeira utilização, o que ajuda a manter a experiência agradável e envolvente ao longo do tempo.

Veja abaixo toda a interface e suas microinterações:

Easter Eggs e caráter informal:

Colocamos alguns easter eggs na ferramenta, de códigos secretos (Konami Code - ⬆️⬆️⬇️⬇️⬅️➡️⬅️➡️🅱️🅰️) a memes do repertório cultural dos membros do time.

Isso com dois objetivos principais:

Primeiro: resolver problemas de limitação de tecnologia. Alguns pontos não teríamos controle e queríamos resolver de uma forma amigável (como o caso da senha)

Segundo: queríamos causar um burburinho dentro do setor de tecnologia, fazendo com que a ferramenta fosse comentada antes do uso, o famoso buzz marketing.

Um exemplo disso, é que a ferramenta foi projetada para ser usada no desktop, e caso alguém acessasse com um dispositivo móvel, era surpreendida por uma mensagem não tão comum em uma aplicação 😏

conclusão

a co-criação entre designer e desenvolvedor potencializa o processo e o resultado do projeto

O slack da empresa bombou de mensagens quando as pessoas do time começaram a realizar as avaliações. Alguns deram risada, outros queriam saber os códigos secretos e teve gente que até postou prints da ferramenta em sua rede social. Outros também queriam saber como alterar a senha. Hehe

Para atingir nosso objetivo, precisávamos encontrar um equilíbrio entre a seriedade e a descontração. Para isso, coletamos feedbacks dos líderes e dos membros da equipe para avaliar a facilidade de aplicação da metodologia e a confiabilidade das avaliações individuais.

E com base nesses feedbacks, conseguimos alcançar um equilíbrio ideal que garantiu uma abordagem mais leve e ao mesmo tempo eficaz para a gestão de nossa equipe.

bithoven

design de interação para gamers surdos

Apply

proline

totem interativo para uma experiência omnichanel