A evolução do Design na Youse - parte 2

Sobre as mudanças de interface e experiência da primeira insurtech brasileira

Published in

Youse | Design Chapter

9 min readOct 1, 2018

Essa é uma sequência do post sobre a mudança da equipe de design da Youse. Desde o nascimento, durante os 3 aninhos de vida, a equipe de design cresceu e amadureceu em processos e organização, e o trabalho também ficou bem diferente visualmente. Fizemos algumas melhorias nos materiais que produzimos desde o lançamento e, a cada mudança, erramos e acertamos um bocado. Dá pra observar pelas interfaces quanta coisa evoluiu. Quer conferir?

Site institucional

No começo do projeto, nosso site (página institucional e as páginas de produto) eram prioridade. Rodamos um design sprint com a equipe de marketing e da Ana Couto, além de desenvolvedores e o time de UX para definir como seria. O primeiro protótipo foi feito todo em papel:

Na época do soft launch, nosso site entrou no ar como um Manifesto. A ideia era transmitir o conceito do novo negócio que vinha ao mundo, mas ainda sem a possibilidade de realizar compra. A página era um vídeo no background e um espaço pra colocar o e-mail sinalizando o interesse em conhecer o que seria a Youse. No momento de lançamento real oficial, a carinha do nosso site institucional era essa:

Em pouco tempo, tivemos que estudar outras formas de destacar todos os produtos na "primeira dobra", e o site ficou muito parecido com o que temos hoje.

Hoje, as páginas institucionais estão modulares e seguem templates que utilizamos também na estrutura das landing pages. Está passando por uma série de testes que em breve vão ajudar a solucionar outros problemas que já desconfiamos que precisam ser resolvidos. Em breve, vem coisa nova aí, aguarde. ;)

Seguro Residencial

Foi nosso primeiro produto a ir pro ar… então imagina aí quanto experimento foi realizado até chegar num fluxo de compra que nos satisfazia.

Dos experimentos que (ainda bem) não foram pro ar: teste com a cor de produto em background e uma sidebar cheia de botão.

Logo que chegamos a uma versão de formulário com conversa que fazia sentido para nós naquele momento, entendemos que seria uma boa aposta para o começo da empresa e fácil de adaptar para todos os produtos.

Visual mais leve e minimalista. A sidebar só aparece na hora de selecionar os serviços.

Dos aprendizados que posso compartilhar: a sidebar com o cartão de crédito falhou e a primeira versão dos sliders não estava preparada para interações do “dedo gordo” e não foi uma experiência ideal pro mobile. Foi legal ver a interação de seleção das coberturas e assistências com toggle ser copiada por outras seguradoras. A gente adorou (rs)!

O primeiro fluxo que foi para o ar foi um formulário que era uma conversa. Hoje, esse funil começa com um único campo de busca do CEP e a partir dele já consegue oferecer serviços que tenham a ver com a localização.

Versão atual do fluxo de compra do Seguro Residencial. Navegue/compre aqui.

Ainda hoje temos questões como facilitar ainda mais a compreensão por parte do cliente do que está sendo comprado. Acho que isso é um desafio desde o começo e continuará sendo nossa obsessão por aqui.

Seguro de Vida

Como tínhamos um modelo de fluxo de venda prontinho no Seguro Residencial, no começo só precisamos ajustar um pouquinho pra funcionar pro Seguro de Vida. Usamos o mesmo modelo de formulário com conversa em primeira pessoa.

Com o tempo percebemos que esse formulário era muito mais longo, o que tornava o fluxo mais cansativo. Quando começamos a testar percebemos que os usuários não sentiam que os pacotes estavam customizados pro contexto deles e, pior, não se sentiam seguros o suficiente pra escolher os serviços que queriam sozinhos, sem um conselho de especialista.

Versão atual da cotação do Seguro de Vida: um chat com especialista. Navegue/compre aqui.

Eis que veio a nova versão do funil, atendendo a dores identificadas nas pesquisas. No fluxo que foi pro ar em 2017, um especialista traz as questões e a conversa flui em um chat.

Seguro Auto

Como os primeiros fluxos, o Seguro Auto também seguiu a ideia de formulário de conversa.

Como é o produto principal, houveram melhorias pontuais, todas feitas com muito cuidado pra não desandar a coisa. De 2016 a 2018, o número de steps diminuiu e estamos trabalhando numa revolução bem significativa que entra em breve. Esse também vai precisar aguardar pra ver!

Aplicativo

A primeira versão do aplicativo foi feita pela Concrete Solutions e tinha o propósito de ser o ponto de contato e acionamento do segurado com a Youse.

Durante muito tempo tivemos apenas informações das apólices. Hoje é possível acionar o seguro (pedir coberturas e assistências), acompanhar o acionamento, fazer alterações na apólice, conversar com o atendimento pelo chat, tanta coisa!

Nosso aplicativo já foi top app na Apple Store duas vezes e atualmente estamos trabalhando num redesign dele, que está subindo aos poucos. Uma das melhorias que mais fizemos questão foi de eliminar o burger menu, que já tava com um scroll que nos doía.

Versão iOs do app que está atualmente na App Store.

Para sentir como está a experiência, baixe na App Store ou Google Play.

Ilustração

No caso das ilustrações, elas nasceram com a necessidade de trazer um tom mais leve e bem humorado para os nossos materiais. Em pouco tempo, nos juntamos Beto Lima, Bruno Capella e eu pra realizar uma dinâmica de busca de referências para construir uma base de estilo Youse de ilustração. Por volta de um mês depois, tínhamos personagens, cenários e, principalmente, todas iconografias que vinham de ilustrações de coberturas e assistências dos três produtos (Seguro Auto, Residencial e Vida).

Primeira versão de ilustrações da Youse, estilo elaborado no final de 2015.

Durante muito tempo, quem precisava de ilustração pedia pra equipe e logo começamos a ter alguns problemas, porque os arquivos abertos se espalharam e as ilustrações se multiplicaram quase sem nenhuma orientação ou guia. Daí vocês podem imaginar que desenhos bizarros acabaram surgindo, alguns arquivos só cresciam em desorganização, e ficou muito difícil controlar tudo isso.

No meio de 2017, a Debora Dias, nossa ilustradora maravilhosa (todo mundo aqui é muito fã dela!) foi contratada e começamos a rodar uma pesquisa sobre as impressões que as pessoas tinham sobre os nossos desenhos. Essa pesquisa foi muito detalhada e passava por coletar visões tanto dos yousers quanto de usuários.

O resultado foi chocante. Descobrimos como as pessoas sentiam ao ver nossas primeiras versões de desenhos. Os comentários iam desde a infantilidade da coisa, quanto a falta de segurança que o estilo aparentemente fofo passava.

A mesma ilustração anterior no novo estilo, elaborado em 2018.

Ao final da pesquisa, foram esboçados alguns estilos pra substituir o antigo e eles foram testados com usuários antes de virarmos a chavinha. Agora, temos um guia bem estruturado de ilustrações e elas são escaláveis. Hoje, os novos desenhos estão aparecendo pouco a pouco nos materiais que fazemos e estamos muito orgulhosos disso!

Pesquisa

Essa pra mim foi a transformação mais radical que tivemos na equipe de design. Quando começamos, já tínhamos em mente a necessidade de validar hipóteses com pessoas pra fazer um design centrado no usuário, que sempre foi um dos nossos princípios. Estudamos como fazer na internet, fizemos cursos pra aprender e na teoria encaixávamos testes de usabilidade sempre que possível (ou seja, quase nunca), mas eles não eram essenciais na prática.

Modelo das primeiras personas de referência pra criação do primeiro fluxo.

A primeira experiência de compra que desenhamos foi testada na base da guerrilha. Saíamos em 3 ou 4 pessoas, sentávamos num canto em um shopping de Brasília, e 2 pessoas abordavam pessoas que passeavam pelo shopping oferecendo brindes em troca. Quando alguém topava, colocávamos a pessoa sentada no meio do grupo, gravávamos a interação com webcam e era um lance meio desajeitado, mas que pra gente já trazia alguns insights.

As primeiras personas também foram elaboradas a partir dos estudos que tínhamos feitos nos workshops com clientes da Caixa Seguradora. Eu diria, pra ser visceralmente sincera, que eram um bocado de assumptions, mas que tiveram algum valor pra nos orientar no começo.

Uma das ferramentas que utilizamos para definir objetivo de pesquisa: o canvas.

No começo de 2017, uma especialista em pesquisa se juntou ao nosso time pra mudar essa história. A Elisabet de Marco veio cheia de experiência e paciência nos ensinar como fazer a coisa, como montar e conduzir testes de usabilidade sem induzir respostas, além de orientada a nossas necessidades, criou algumas ferramentas para nos auxiliar e tornar essa rotina menos dolorosa. Os designers saíram da zona de conforto e alguns criaram até gosto por essa coisa de testar.

Com metodologia de pesquisa correta, logo nossas personas reais surgiram. Elas são bem fundamentadas, tem características de clientes reais (uou, parece mágica! haha) e guiam todo início de projeto nosso.

Hoje, a pesquisa é um passo essencial em todo processo de design na Youse. Existe uma sala reservada toda semana pra receber usuários, montamos uma estrutura pra transmitir os testes ao vivo no Workplace, temos documentos de consolidação e apresentamos as descobertas pra empresa toda em seguida.

Design System

Outra grande transformação que tivemos, que não é só visual, mas impactou em todo nosso processo de design, foi o Design System. Por muito tempo, investimos muito esforço em tentar definir um guia de estilo de características de design, cada UX tentava tocar uma questão. Enquanto um cuidava do guia de tipografia, outro pensava no estilo de ícones, outro de ilustração, outro de botões, outro de fotografia e por aí ia. Quem disse que a gente conseguiu fechar esse guia se dividindo entre demandas das squads e do chapter? Não conseguimos.

Essa era a carinha do primeiro "styleguide" que tentamos montar.

Ao final de 2017, chegamos a um número considerável de designers mexendo nas mesmas soluções em todas as plataformas, o que tornou a questão de consistência visual bem crítica. Até os developers começaram a reclamar. Nesse momento, nosso head tirou da squad o Aurélio Jota (nosso designer mais entendido dos códigos) e o deixou focado na componentização e padronização das nossas entregas de design.

Essa é a forma que o Cargo está tomando, que em breve poderá ser acessado por qualquer pessoa.

Hoje temos o Cargo, nosso manual de estilo, além de um sketch da verdade, um arquivo com toda tela testada e validada que está em produção, temos um canal de design review no Slack (com designers, PMs, QAs e devs), e acontecem syncs frequentes para identificar o que eventualmente está fora do padrão. Dessa forma, atendendo a uma equipe que agora é global, já é possível escalar e difundir nossas decisões de design aqui e nas Youses do mundo.

Rituais

Em 2015, éramos oito designers, hoje em 2018 somos 12.

Não é só mais difícil se alinhar e se fazer entender, como as variações de pensamentos de designers também cresceu. Temos questões que discordamos e outras que abraçamos juntos, mas sempre estamos alinhados. Nosso número de encontros saiu de uma sync semanal para dailies, one to ones, 4 syncs (pesquisa, mobile, design e global) e outros encontros que acontecem de acordo com a necessidade.

Resumindo…

Cada ajuste de visual e de experiência mereceria estudo específico e post com descobertas e possibilidades soluções que chegamos e testamos. Atualmente, a equipe passa por uma fase de reconfiguração que trará impacto também no que será produzido daqui pra frente. Vamos acompanhar.

O Chapter de Design da Youse está super aberto pra trocar ideias e compartilhar os aprendizados dessa trajetória. Se você quiser saber mais sobre qualquer uma dessas mudanças no nosso material até hoje, diz aí nos comentários ou chama a gente pra tomar uma cerva! ;)