Como foi construir um modelo de login único de acesso?

E os desafios para manter uma consistência de experiência que atenda a diversos produtos do UOL.

Desde os meus primeiros dias trabalhando como Service Designer no co:lab, rumores sobre um tal de “login único de acesso” circulavam. Eu, peixe fora d’água ainda me habituando ao novo ambiente, não entendia muito bem o que isso queria dizer.

Em minha segunda semana de trabalho, descobri que seria uma das envolvidas no projeto que tinha por objetivo desenhar um novo modelo de autenticação — uma única porta de entrada para todos os produtos e serviços que a empresa oferece, proporcionando mais segurança aos dados de autenticação e consistência na experiência de login.

O desafio era grande. Sorte a minha poder trabalhar junto de pessoas tão incríveis como o Caio Prado Ferraz, que foi meu parceiro de projeto e a quem eu dedico esse texto.

Qual era o problema mesmo?

Estamos diante de um cenário de conta única de acesso, a exemplo de como o Google e tantas outras empresas funcionam. Com o mesmo usuário e senha os clientes podem se autenticar em vários produtos.

À época, enxergamos que havia problemas relacionados a dois grandes pilares: governança e design. A segurança dos dados também é algo que levamos a sério e portanto, atualizações e melhorias no gerenciamento são sempre bem-vindas.
Algumas iniciativas, visando a melhora da experiência na autenticação, já haviam tido início, mas era preciso retomar o trabalho e encontrar novos caminhos para os problemas à nossa frente.

Governança: quando não existe um modelo centralizado, corremos o risco de cair na dependência de outros times para priorizar aplicações de segurança desenvolvidas em suas respectivas filas. Assim, era difícil garantir que conseguíamos garantir que todas as features construídas para a autenticação fossem aplicadas.

Segurança: ter um controle de segurança, com features, uso de testes automatizados e ações preventivas 100% eficazes nas páginas de autenticação sempre foi uma grande preocupação do time de Segurança do UOL.

Design: de acordo com Nielsen, usuários não devem ter que adivinhar que palavras, situações ou ações diferentes significam a mesma coisa.

Consideramos que o ideal seria garantir uma consistência visual e de experiência entre os produtos. Batemos nessa tecla pelo fato dessa consistência, em termos de UI e UX, ter o poder de reforçar a marca UOL, mitigar problemas com fluxo de recuperação de senha (com dicas visuais fica mais fácil entender que estamos falando de uma conta única), trazer maior confiança e familiaridade diante às interfaces e uma menor curva de aprendizagem para a execução de tarefas básicas nos produtos (login, recuperação de senha, etc).

Segundo este artigo da UXMag, existem 3 níveis de consistência a serem mantidos:

• Internal consistency: as partes que constituem um objeto trabalham juntas de maneira harmônica?
• Local consistency: o objeto convive harmoniosamente com seus vizinhos em seu habitat imediato?
• External consistency: o objeto trabalha em conjunto com seus aliados em um ecossistema mais amplo?

Traduzindo para a nossa tela de login:

• Consistência interna: os elementos que fazem parte da interface são consistentes entre si? (visual, tipografia, linguagem, iconografia)
• Consistência local: a interface de login é consistente com outras telas desenvolvidas pela empresa? (padrões de interação, usabilidade)
• Consistência externa: a interface segue um padrão que já é utilizado por outros players? (nomenclaturas, padrões de autenticação)

As etapas do projeto

Benchmarking, pesquisa, mapeamento de cenários e fluxos, testes, wireframes, layout… rolou tudo isso.

Mas acho que o que é legal destacar é o que enxergamos como chave para o sucesso do projeto: a comunicação e integração com diferentes times e pessoas dentro da empresa.

Além de ver como o mercado trata a mesma tela de autenticação para diferentes produtos, parte essencial do projeto foi levantar da cadeira e conversar com as pessoas, a fim de entender as necessidades de cada área ou produto e colher feedbacks em cima das propostas que eram apresentadas por nós. Assim, conseguimos garantir que todos os possíveis cenários e especificidades fossem mapeadas e consideradas durante a construção do modelo de login único.

Falar com toda essa galera, resultou em algumas premissas para o projeto:

• Era preciso carregar a identidade visual do produto;
• Login por e-mail ou CPF. Precisávamos considerar ambos os casos;
• Precisávamos trazer uma mensagem contextual à ação que o usuário realiza naquele produto;
• Considerar produtos com login via redes sociais;
• Acompanhamento das métricas;

Pode parecer simples, mas reunião atrás de reunião é algo que exige preparo, jogo de cintura e claro, agendas compatíveis. Foram muitas. Falamos com os Product Owners de vários produtos, áreas marketing, conteúdo e publicidade. A cada reunião, surgia um novo cenário ou situação que não havíamos previsto. E dá-lhe ajustes!

Também vale citar o fato de termos nos preparado para as reuniões de modo a antecipar possíveis dúvidas e questionamentos. Procuramos manter nosso discurso e materiais de apoio sempre alinhados, embasados na argumentação técnica e fundamentos de usabilidade. Com isso, a reunião de aprovação com a alta diretoria foi mais tranquila do que imaginávamos e a única discussão naquele momento referia-se à datas, priorização de produtos, maneiras de viabilizar a nossa interface, etc.

O Google foi um dentre os vários players analisados durante o benchmarking.

Primeiros estudos. Tudo meio bagunçado ainda.

Solução

Chegamos a um modelo de autenticação única com personalizações e opção de login com redes sociais, devido às particularidades de cada produto.

Versão final da tela de login.

A visualização em tela é recomendada para produtos que possuem painel ou que mudam o usuário de ambiente.

Visualização em modal para produtos que exigem autenticação apenas para seguir alguma ação, sem que o usuário mude de ambiente.

Dividido em duas áreas: uma personalizável de acordo com o produto, outra comum a todos os produtos.

Área personalizável por produto.

Tooltip apresentado quando a senha, e-mail ou CPF/CNPJ estão incorretos.

Tendo em vista o tamanho do UOL e a quantidade de acessos (são mais de 2,5 milhoes de assinantes de diversos serviços e mais de 90 milhoes de visitantes únicos por mês), adotamos uma estratégia de migração conservadora.

Primeiro, subimos em produção a nova versão da autenticação única default (sem identidade visual de nenhum produto) e estamos metrificando as alterações na experiência. Aos poucos daremos seguimento à migração e outros produtos e serviços da companhia passarão a utilizar a nova solução de autenticação.

Mapeamento de eventos que devem ser disparados durante o uso do modal

De maneira bem resumida, foi isso. Posso dizer que, além dos aprendizados contínuos em relação à experiência e interface, este trabalho contribuiu para o meu crescimento no que se refere a facilitação de processos conversacionais e a elaboração de um pitch assertivo.

Se gostou do que leu, tem alguma dúvida ou está trabalhando em algo parecido, fique à vontade para deixar um comentário. ;)

Say hello at: meu LinkedIn e LinkedIn do Caio Prado Ferraz