portfólio

UX writing | content design | liderança

Tive o privilégio de dar aulas na Faculdade Impacta, para o curso de pós-graduação MBA em User Experience, indicado pelo mestre e amigo Bruno Rodrigues. Aqui tem um resumo da experiência:

 

Chegando na Sami em agosto de 2021, me deparei com muito mato a ser cortado: não havia um guia de tom e voz, apenas alguns materiais variados produzidos por pessoas de Marketing. Li todos os documentos que encontrei (desk research), elaborei um rascunho de brand persona e enquadramento nos arquétipos de Jung, conversei com pessoas importantes (entrevistas não estruturadas) que estavam acostumadas com a marca e eram, frequentemente, a voz da marca.

Analisei diversos textos anonimizados escritos pelas pessoas usuárias, além de coisas que escreveram publicamente, como nas mídias sociais e lojas de aplicativo. Assim, identifiquei termos favoritos do público ou que estavam mais acostumados a usar e compreender. Realizei questionários para tirar dúvidas ou confirmar hipóteses (como a preferência por “Grande São Paulo”, usada mais no dia a dia das pessoas, em vez de “Região metropolitana de São Paulo”, usada mais no jornalismo) e dei início à padronização e criação do primeiro guia de tom e voz da marca, que foi acolhido com carinho pelo pessoal do marketing, CRM, CX, entre outras áreas.

Acima, um resumo do guia de tom e voz após últimas atualizações pós-rebranding.

Além da minha própria conscientização sobre o tema, na Sami tínhamos a maravilhosa Melina Moura constantemente nos educando e nos fazendo enxergar o quanto ainda temos a melhorar. Também aproveitei bastante o bootcamp da Cecí Romera na How. Com um pouco mais de pesquisa, alguns vídeos aqui e artigos ali, cheguei a um conjunto de ideias interessantes que eu quis compartilhar na companhia, principalmente com as pessoas que escrevem.

Nestas páginas eu explico o processo de definição dos textos (UX Writing ou microcopy) para duas telas de erro relacionadas à área de Carências no app da Sami.

É muito importante deixar claro que os resultados, o retorno sobre investimento (ROI, return over investment), de qualquer trabalho de User Experience, é complicado de ser mensurado. Muitas vezes o impacto do trabalho se dá em conjunto de outras mudanças e ações da companhia (como o fato da base de clientes ter triplicado no período em que eu estive na empresa) e frequentemente as consequências são mais qualitativas (como a percepção positiva de investidores que injetam dezenas de milhões de reais).

Características como clareza e usabilidade são mensuráveis porque as pessoas só vão conseguir concluir os fluxos se tais características estiverem favorecendo a compreensão. Algumas alterações e hipóteses conseguimos medir e testar, usando métodos como testes A/B, análise de dados sobre o volume de utilização, e até indiretamente analisando o NPS (net promoter score) e CSAT (customer satisfaction).

Mas como dizer o quanto conseguimos melhorar os fluxos a ponto de as pessoas conseguirem o que precisam dos produtos digitais com facilidade, tendo uma experiência agradável, sem titubear, sem se irritar, sem pedir ajuda? Sim, desde que eu comecei, esteve em constante diminuição a quantidade percentual de atendimentos humanos relacionados às funcionalidades disponíveis no aplicativo.

É na fluidez, na experiência completa (que favorece a pessoa usuária e também o negócio) sem atritos, sem dificuldades e dúvidas, que está o maior resultado de um bom trabalho da equipe de User Experience. No quanto as pessoas vão gostar da marca, porque a marca as respeita, as trata bem, com atenção, clareza e proximidade.

A experiência, no caso, precisaria de um mapeamento (blueprint) de serviço, para que pudéssemos analisar cada etapa isoladamente. Mesmo assim, pessoas são inteiras e é nosso dever otimizar a experiência delas de todas as formas possíveis. Dito isso, vamos a alguns números que conseguimos reunir recentemente:

  1. Colocamos no app um novo recurso que, por meio de destaque visual e UX Writing, sugere parceiros clínicos e laboratórios que possuem uma relação melhor com a operadora de saúde para os membros e membras. Isso incentivou um aumento de 42%, em 12 meses, na escolha desses parceiros estratégicos;
  2. Após a disponibilização da segunda via de boleto (e opção de copiar código de barras) no app, a quantidade de solicitações do boleto feitas para nosso time de atendimento caiu de 620 para 185 em um único mês;
  3. Outra quantidade de solicitações feitas ao time de atendimento que diminuiu foi a de troca/atualização do cartão de crédito usado, de 475 em um mês para 162 no seguinte;
  4. Em geral, outras métricas que não temos como medir qual foi o impacto direto do nosso time, melhoraram também, como o LTV (lifetime value), a resolutividade (em tempo) das pessoas que atendem na linha de frente, aumento na quantidade de CPTs (coberturas parciais temporárias) devidamente aplicadas (que evitam fraudes), a quantidade de planilhas e diferentes sistemas que as pessoas que atendem utilizam (tanto em atendimento médico como o tradicional, de relacionamento)…

Em conclusão, sabemos que temos um papel importante em acolher as diferentes áreas da empresa, escutar os stakeholders, compreender os desafios, pesquisar os problemas e as pessoas usuárias, promover a geração de ideias e experimentos de soluções com protótipos que, devidamente testados, são  refinados, desenvolvidos e entregues, impactando positivamente em toda a jornada das pessoas com a marca (clientes externos e internos).

Este app é a evolução de um primeiro, que quase não tinha funcionalidades ou conteúdos. Era apenas para acesso à carteirinha do plano de saúde — tendo evoluído muito em dois anos de trabalho colaborativo entre o time de design e squad específica, com a Janaina Dantas como principal PD. Meu papel envolveu:

  • Apoio a Product Designers na criação dos fluxos e definição de componentes usados;
  • Definição de termos específicos do universo da marca;
  • Padronizações diversas e alinhamento com o guia de tom e voz da marca;
  • Revisões frequentes e otimizações solicitadas continuamente;
  • Filtro e redirecionamento de demandas (em horário comercial) no chat (quase um chatbot);
  • Botão de Ajuda “(?)” leva à FAQ, que é aberta via webview e hospedada no Hubspot — FAQ que foi inteira revisada, reorganizada e era constantemente atualizada;
  • Um recurso interessante que não consegui tempo para me dedicar foi a árvore conversacional no WhatsApp para assuntos sobre o plano, pagamento, inclusões etc.

Neste link é possível ler com mais calma alguns caminhos dentro do app.

Para ficar bem evidente a importância de UX Writing e derrubar o mito de que as pessoas usuárias não leem, propus que fossem comparadas telas com e sem conteúdo textual. Por mais que ícones, símbolos e dicas visuais transmitam uma ideia sobre o que a pessoa usuária está procurando, o texto é essencial para assegurar que se está escolhendo o caminho certo na jornada.

lado a lado, dois prints de tela inicial do app, um sem nenhum texto

Sim, as pessoas mais “escaneiam” as telas, modais, landing pages, sites, e-mails, enfim, qualquer material que contenha um pouco mais do que algumas palavras. Entretanto, mesmo no ato de escanear é essencial que as palavras certas estejam no lugar certo, de acordo com o entendimento das pessoas usuárias e seus modelos mentais.

Por isso, sempre busco transmitir o mais importante na combinação entre título e botão (call-to-action), usando os textos de apoio para fornecer um pouco mais de contexto e informações sobre a situação. Caso a pessoa usuária pule completamente o texto de apoio, ela vai saber onde está (localizada pelo título ou breadcrumb), o que precisa fazer em seguida (combinação de verbo no título e no botão) e o que vai acontecer.

Neste post no LinkedIn, explico em algumas páginas o que é UX Writing, as principais características e diretrizes seguidas por UX Writers. Confira arrastando para o lado:

Para facilitar a colaboração entre Product Designers e UX Writers, a PD Suzana Barros criou um componente exclusivo que era adicionado acima de cada frame, de todos os fluxos, de todos os produtos digitais no Figma.

tag de status de UX Writing com 4 estados: falta texto, texto em construção, texto em validação e texto pronto

Antes disso, utilizávamos apenas uma bolinha: vermelha indicava que estava com texto de marcação ou lorem ipsum, amarela indicava que o texto ainda seria refinado e verde, por fim, indicava que o texto da respectiva tela/frame estava pronto.

Trabalhei muito na ideação de diversos produtos, além do aplicativo, como o sistema utilizado pelos profissionais de saúde para atender e gerenciar os pacientes, cheio de termos técnicos simplificados e ambiguidades resolvidas, o sistema utilizado pelo time de vendas e o sistema utilizado pelas pessoas que recebem documentos, analisam e aprovam.

Sempre busquei participar dos Design Critiques, levantando questões estruturais sobre os fluxos propostos, deixando sugestões de usabilidade que envolviam o uso de diferentes componentes, lembretes sobre consistência visual, bem como pitacos sobre questões relacionadas às heurísticas de Nielsen e Molich e às 8 regras de ouro de Schneider.

Certeza que já aconteceu com você: lê a data sobre o mês 07, 08 ou 10 e precisa se esforçar para lembrar qual é o nome daquele mês. Alguns são fáceis de lembrar, outros nem tanto e muita gente tem dificuldade em fazer a correspondência entre o número e o nome do mês.

Pensando nisso, decidi padronizar todas as datas escritas em comunicações da marca utilizando o nome do mês.

Contei com o apoio da Vivian Moreira nessa decisão.

Mensagem de erro em caso de ausência de acesso à internet pelo app (reutilizada por todo o app):

print de erro de conexão

Mensagem de erro em caso de problema no servidor ou sistemas do lado da empresa (reutilizada por todo o app):

print de erro no servidor

Tela de estado vazio (empty state) reutilizada em todo o app:

print de tela de estado vazio

Em parceria com outros managers e com a Head de Design, Bruna Fabregat, fizemos algumas dinâmicas para chegar a cinco critérios que a gente considerasse como fundamentais, que refletissem a forma de pensar do nosso time. Fiz o refinamento dos textos finais.

Durante um período eu tive o prazer de liderar a Product Designer Suzana Barros, que chegou com a casa toda bagunçada, cheia de bibliotecas espalhadas e falta de padronização, e deu à luz um Design System, com direito a dinâmicas para nomeação e escolha do logotipo.

capa do design system Estrela

detalhes do logotipo do DS Estrela

Uma visão geral dos design tokens que ela conseguiu fazer, em pouco tempo, pois a empresa acabou realocando Suzana em uma squad.

design-tokens

Suzana fez um trabalho muito caprichoso avaliando os níveis de contraste das cores que haviam sido padronizadas pelo processo de rebranding, notando que várias combinações não atendiam aos requisitos mínimos estipulados no WCAG (ou confira a versão brasileira, em cartões, ótima produção do Marcelo Sales).

O trabalho incluiu montar uma base explicativa, dentro do próprio Design System, detalhando os porquês do contraste estudado, critérios e classificações.

detalhes sobre o estudo de contraste

A criteriosa avaliação cobriu diversas variações das cores primária e secundária em relação a contraste e legibilidade.

estudo das cores da marca em relação a contraste

Por fim, sugestões de uso das cores, decididas em comum acordo com todo o time de design.

Tive o privilégio de ser Product Design Manager de duas PDs em rápido desenvolvimento, extremamente talentosas e versáteis: a Bárbara Fração e a Vivian Moreira.

Na squad Gestão do Contratante, orientei Bárbara na realização de diversas pesquisas: desk research, matriz CSD, benchmarkings, questionários quantitativos com escala de Likert, CES (customer effort score), testes de usabilidade com protótipo navegável, entre outras. Apoiei seu protagonismo na ideação e criação dos protótipos do módulo Financeiro no app da Sami, disponível apenas para as pessoas contratantes (responsáveis pelo pagamento).

print da tela inicial do módulo financeiro
tela inicial do módulo financeiro
print da tela do histórico de faturas
tela do histórico de faturas
print da tela de detalhes da fatura paga por boleto
tela de detalhes da fatura paga por boleto
print da tela de cadastrar novo cartão de crédito
tela de cadastrar novo cartão de crédito, com aviso sobre cartões virtuais incompatíveis com cobranças recorrentes

 

print da tela de pagar via pix
tela de pagar via pix, com o QR code (para quem usa o banco em celular separado do principal) e também a opção de copiar o código

Na squad Risco e Fraude, orientei Vivian a fazer uma grande imersão nas causas mais frequentes de fraudes que acontecem no trecho inicial da jornada das pessoas, ou seja, desde o primeiro contato, passando pelo envio de documentação, preenchimento de declaração de saúde, assinatura de contrato, pagamento e vigência. Isso envolveu muitas entrevistas semiestruturadas, benchmarkings, desenhos de jornadas, matriz CSD, entre outros métodos de pesquisa.

Com visibilidade do desafio, pudemos avançar para uma grande decisão que cabia a nós, como responsáveis pela experiência das pessoas usuárias (neste caso, clientes finais de um lado do produto e colaboradores de outro): contratar uma solução pronta ou construir em casa o fluxo de envio de contrato e declaração de saúde (também chamado de build vs. buy).

Após uma análise muito detalhada do produto que poderíamos contratar, Vivian reuniu stakeholders para compartilhar nossas impressões, demonstrar a usabilidade e experiência com o produto. Tais pessoas concluíram, com fundamentação, que o melhor caminho era o que nós recomendávamos: construir em casa uma solução mais fácil de usar, com menos brechas para fraudes e que poderia proporcionar a melhor experiência para todas as pessoas usuárias.

Apoiei a PD na ideação e refinamento dos protótipos, que ainda não foram desenvolvidos.

Durante minha experiência como Product Design Manager, além de orientação estratégica, fundamentação teórica e colaboração ativa, eu incentivei muito a elaboração dos Planos de Desenvolvimento Individual (PDI), um tipo de diagnóstico de habilidades que a pessoa necessita continuar a desenvolver para avançar em sua carreira.

Eu fazia o trabalho em conjunto com as duas PDs lideradas pela ferramenta Qulture.Rocks, na qual a gente colocava coisas bem objetivas como treinar atalhos de teclado no Figma, até outras mais teóricas, que envolviam a leitura de artigos sobre a história da evolução das interfaces digitais, da interação humano-computador.

Mantinha 1:1s (videochamadas específicas apenas com a pessoa liderada) quinzenais e todas as sextas-feiras tínhamos uma hora também para nos atualizarmos sobre o que estávamos fazendo, como momento de descompressão e teambuilding.

Para ajudar na visão mais ampla das habilidades a desenvolver e quais eram as expectativas dos líderes em relação a cada senioridade, desenvolvemos o mapa de competências. Ele começa com instruções de preenchimento:

print do começo do mapa de competências

Apresenta, em seguida, a parte de habilidades gerais, algumas mais comportamentais (soft skills) e outras genéricas para qualquer trilha dentro de UX:

print do mapa de competências mostrando a tabela de habilidades gerais

Por fim, lista várias habilidades da carreira de Product Designer, divididas por itens e com explicações em cada item, de cada senioridade. As habilidades contempladas são Interaction Design (IxD), Visual Design, Research, Writing e Analysis/Data.

print ilegível da parte de habilidades específicas do mapa de competências

A produção deste Mapa de Competências aconteceu graças à colaboração entre Atila Velo, Bruna Fabregat, Giovanni da Matta, Vivian Moreira e João Traini.


webwriting | copywriting

Naming e identidade textual do evento Betterh, promovido pela Sami Saúde.

A ideia de ter um H além da palavra better (melhor, em inglês) serve duas funções: referenciar aos humanos, no sentido de melhores pessoas, bem como associado ao r que o precede, fazendo referência direta à área de Recursos Humanos.

O slogan também foi pensado para gerar mais identificação com o público que é engajado, que já faz um mundo melhor por meio de ação direta ou indireta, em vez de generalizar indicando que o evento é para quem quer um mundo melhor.

Detalhe: cada post selecionado será aberto em uma nova aba.

         

Detalhe: algumas LPs serão abertas em uma nova aba.

Detalhe: alguns infográficos serão abertos em uma nova aba.

Detalhe: alguns e-mails serão abertos em uma nova aba.