Nova página de login da Vindi

Como fizemos disso uma ótima oportunidade para UX Design

Lidar com as complexidades do mundo financeiro para projetar experiências descomplicadas é um dos grandes desafios do time de Design de Produto da Vindi. De longe, a demanda de atualizar a página de login da plataforma não é uma tarefa tão complicada comparada às demais que temos. Mas vimos aí uma ótima oportunidade para aplicar uma série de melhorias de UX (User Experience ou experiência de usuário) que já queríamos muito colocar em prática. Nesse texto, queremos compartilhar como foi nosso processo de Design e os resultados que obtivemos.

Qual era a demanda exatamente?

A ideia era aproveitar a página de login da plataforma da Vindi para incluir um espaço para veicular marketing de produto.

Essa era a nossa tela de login antiga.

Quais pontos de melhorias identificamos?

Essa parte do login não se resume somente à tela para colocar e-mail e senha, obviamente. Além disso, há outros passos na jornada dos usuários, anteriormente escritos assim:

1. “Não tem uma conta na Vindi? Faça seu cadastro agora mesmo” — link que encaminha para o formulário de captação de leads do site.
2. “Problemas de acesso? Solicite ajuda aqui” — link que leva a um formulário em que o usuário poderia abrir chamado para o atendimento se ocorrer algum problema ao tentar entrar na sua conta.
3. “Esqueceu?” — link que encaminha para a tela de recuperação de senha.
4. “Ou acesse usando sua conta Google Apps” — botão que dá possibilidade de acessar a plataforma da Vindi através da conta do Google do usuário.

Mapeados os fluxos de usuário dessa parte de login, identificamos alguns pontos de melhorias:

• Os textos das telas de login não transmitiam o tom e a voz da Vindi. O mesmo ocorria com o texto e layout do e-mail de recuperação de senha. Isso se deve ao fato de termos começado a elaborar os princípios e forma de aplicação do tom e voz da empresa recentemente. Compartilhamos um pouco desse processo nesse outro texto.
• A tipografia era antiga e os tamanhos das fontes não estavam acessíveis. Essas alterações de tipografia também foram definidas recentemente, na oportunidade de alteração da marca e início da construção do nosso design system.
• Ausência da algum botão ou link para voltar, depois que o usuário clicasse nos links de “Faça seu cadastro”, “Esqueceu?” ou “Solicite ajuda aqui”.

Como pensamos em implementar as melhorias?

Após identificar os pontos de melhorias, pesquisamos alguns exemplos de telas de login com marketing de produto para ter algumas referências. Vimos Mailchimp, Adyen, Marvel, Shopify e outros mais.

Passamos à fase de elaboração de um protótipo:

Rabiscos rápidos pré-protótipo

Protótipo de alta fidelidade no Figma

Bem, não adianta só mostrar foto e imagem de protótipos, né? Vamos explicar as alterações pensadas e as decisões com mais detalhes.

Primeiro, vamos comentar sobre os textos da interface. A ideia que norteou a reescrita desses textos foi a de torná-los o mais conversacionais e humanizados possível. Como aplicar isso?

Fizemos pequenas mudanças como acrescentar o pronome possessivo (seu, sua) antes dos labels dos campos, como “Seu e-mail”, “Sua senha”. O acréscimo desses pronomes possessivos diminui a sensação linguagem robotizada e reforça a ideia de uma conversa mais fluida com o ser humano que está do outro lado da tela.

Além disso, pensamos nos títulos de cada página. Na antiga tela inicial de login, tinha apenas a palavra “Login”. Para soar humano, alteramos para: “Olá! Faça seu login”. Com isso, estamos dando início a uma conversa, com uma saudação.

Tínhamos pensado em colocar algo como “boas vindas” (nada de “bem-vindo”, para praticar a linguagem neutra de gênero). Mas como essa tela é vista constantemente — já que a plataforma, por motivos de segurança, exige logar novamente se passar 15 minutos sem mexer — não fazia muito sentido ficar dando boas vindas a todo momento. O “olá” soa mais natural e é comum também com a forma como nos comunicamos por escrito com nossos clientes, por e-mail, por exemplo.

Na tela de redefinição de senha, mantemos o título “Esqueceu sua senha?”. Em seguida, colocamos um texto explicativo sobre o que irá ocorrer após o usuário preencher a etapa de colocar o e-mail e clicar em “alterar minha senha”.

Antes e depois da tela de “Esqueceu sua senha?”

Ah, vale notar que mudamos o verbo do botão principal dessa tela: antes era “recuperar senha” — algo que não ocorria, pois na verdade o usuário teria que criar uma nova senha e não recuperar a antiga esquecida. Ficou, portanto: “alterar minha senha”. E logo em seguida colocamos o link para “voltar para o login”.

Da mesma forma, alteramos a tela de “problema de acesso”. Primeiro, o título dessa tela era “problemas com sua conta?” e resolvemos seguir com a mesma pergunta que está lá na tela de login: “problemas com o acesso?”. Colocamos uma descrição em seguida, reforçando nossa disposição em ajudar e explicando o que ocorrerá após a pessoa preencher o formulário e solicitar ajuda.

Antes e depois da tela de “Problemas de acesso”

Por fim, realizamos alterações textuais também no e-mail de recuperação de senha, para não deixar nenhuma “ponta solta” no fluxo de usuário a partir dessa tela de login. Melhoramos não só o texto como também a hierarquia das informações, com as cores, peso e tamanho de fonte para alinhar com o brand da Vindi e deixar mais acessível.

Antes e depois do e-mail de alteração de senha.

Em termos de tipografia e tamanhos das fontes, como você pode ter percebido pelas imagens de comparação do antes e depois, também foram alteradas. Seguindo algumas decisões de brand e design systems, agora estamos com Montserrat e Open Sans; antes era tudo em Lato. O menor tamanho de fonte agora é 15px, enquanto antes era 13px. Ganhamos com isso um visual mais acessível e agradável.

E como ficou o resultado final?

Agora que explicamos em detalhes as alterações pensadas para a página de login da Vindi, eis como ficou após colocada em produção:

O que ainda temos a melhorar?

Ficamos bem contentes com a evolução da nossa página de login e como aplicamos o processo de Design nessa melhoria. Mas também há pontos que consideramos que ainda temos a melhorar e isso serve de guia para o nosso trabalho:

1. Precisamos definir as métricas de satisfação no início da demanda para acompanhar se o resultado foi efetivamente satisfatório e não somente um feeling. No caso desse trabalho, poderíamos ter avaliado a conversão e o quanto de engajamento conseguimos com os usuários e até mesmo questioná-los sobre o que acharam da mudança. Chegamos a receber alguns feedbacks positivos dos clientes em conversas por telefone e e-mail, mas nada que seja de fato uma visão de métricas de Design.
2. Precisamos manter um fluxo de atualização do conteúdo de marketing de produto para a tela de login especificamente. Para ocorrer a atualização desse conteúdo, ainda dependemos do pessoal de desenvolvimento, por isso, ainda não há plena autonomia para a galera do marketing atualizar. Isso pode vim a ser uma melhoria futura, para automatizar o trabalho interno.
3. Por fim, precisamos aplicar essas melhorias textuais, de interface e usabilidade dentro da plataforma da Vindi em si. Esse é o nosso trabalho como Designers de Produto, obviamente. Essa nova página de login foi só mais um impulso para seguirmos com o nosso objetivo de usar o Design como ferramenta para tornar a jornada dos clientes o mais encantadora possível!

Então, se você chegou até aqui e achou interessante as alterações implementadas na nossa página de login, se achou útil acompanhar as razões e um pouco do nosso processo de Design de Produto e, ainda, se tiver algum feedback para nos dar sobre qualquer ponto — por favor, fale com a gente! Todo o time de Produto e Tecnologia agradece! Deixe suas palmas, comente, compartilhe e acompanhe nossos textos. Até a próxima! :)