Content Design System no PicPay

Como padronizar e gerar consistência de conteúdo em mais de 10 verticais

— Nome do projeto

Content Design System


— Time

Cassio Almeida – UX Writer

Carla Paganini – UX Writer

Camila Gaidarji – UX Writer

Karen Moraes – UX Writer

Laura Ruth – UX Writer

Andreza Ramos – UX Writer



— Período

2021

Resumo:

O Content Design System é um documento com padronização e diretrizes de todos (sim, todos) os conteúdos do PicPay, seja PF (Pessoa Física) ou PJ (Pessoa Jurídica). Além disso, é uma forma de aproximar a pessoa UX Writer do time de Design System, participando de decisões de UI e formando consistência nos produtos.

Problemas

Quase todos os conteúdos genéricos (de erro, 404, conexão, por exemplo) do PicPay eram escritos diferentes nas verticais e squads. 


E o que isso gerava?

_Problemas para identificar a mensagem principal entre as pessoas UX Writers.

_Confusão com o usuário, que conferia diferentes versões da mesma mensagem.

_Despadronização entre squads e verticais.

_Muitas versões espalhadas e desconhecidas de alguma mensagem.



Várias mensagens de conexão diferentes…

Desafio

Reunir, encontrar e identificar todas as mensagens e padronizá-las com o time de Design System.


Por que um Content Design System

Esse material agiliza e economiza tempo no dia a dia tanto dos designers quanto dos writers, cria padrões, consistência de comunicação, gera processo para os times de Produto e tira a pessoa UX Writer do papel de delivery, permitindo que atuem de forma estratégia.


E o que é ser estratégico?

Organizar conteúdo, participar de papo com Negócios, ter tempo para participar de pesquisas, aplicar metodologias em nossas entregas e, principalmente, testar o nosso conteúdo.




A pessoa UX Writer como educadora

Uma breve reflexão antes do processo

O conteúdo não é somente para o PicPay, é para os usuários. Ou seja, um conteúdo padronizado e explicativo, que siga as heurísticas de conteúdo e testado pelos usuários. 


Exemplo:

Documentar diretrizes que não deixem o usuário encurralado em uma mensagem de erro, por exemplo. A gente só fala do erro ou explicamos o que aconteceu dando orientações de como solucionar?



Processo

Etapa por etapa :)

Entendendo o problema

Beleza, temos uma grande variedade de conteúdos espalhada pelo PicPay. O primeiro passo foi identificar quais eram os conteúdos, seus contextos e se era possível padronizá-los com o time de Design System. Algumas mensagens são contextuais, ou seja, são específicas para aquela vertical – por exemplo: erros de empréstimo pessoal PF não fazem parte do universo de PJ, então não dá para criar um padrão macro.


Conversamos com o time de Design System para entender se era possível criarmos um padrão direto no Figma e se eles tinham ideias para contribuir com o projeto. A conversa foi ótima, por aproximar o time de UX Writer com o DS (Design System).


Mapeando mensagens

Squad por squad, vertical por vertical, identificamos quais mensagens vamos padronizar para todas as pessoas UX Writers. Foi uma das partes mais importantes do processo, porque imergirmos ainda mais no mundo PicPay e entendemos que o Content Design System era mais que necessário.


Mensagens escolhidas para serem padronizadas na primeira fase do projeto:

_Erro de conexão

_Erro de sistema

_Estados vazios

_Loading

_Preenchimento de campo


Ah, importante lembrar: focamos em mensagens que afetam todas as verticais do PicPay, sem pensar no micro de cada squad ainda.



Fases descritas no FigJam

Entendendo as mensagens

Após mapear o conteúdo, separamos tudo no FigJam. Lá, lemos e conferimos como poderíamos padronizar as mensagens. Além disso, definimos quais metodologias usaríamos para chegar nessa consistência.


Visão geral do documento

Metodologias, ferramentas e dinâmicas

Uma das partes mais importantes: como vamos padronizar as mensagens. Estudamos metodologias e adaptamos algumas para o nosso contexto.


Quais foram:


1. Começamos com um simples benchmark, pra entender os padrões de mercado e aplicar a Teoria de Jakob (não criar coisas muito distintas do que os usuários estão acostumados). Nosso tempo era curto, então não poderíamos fugir da proposta.


2. As 48 Emoções de Plutchik: é extremamente importante entender o que o usuário sente ao ler um conteúdo. Sem entender sobre sentimentos, nosso conteúdo é um eterno vazio.


A roda das emoções de Plutchik facilita o reconhecimento e compreensão da complexidade das emoções. Mapeando as emoções em um determinado contexto, é possível neutralizar o sentimento de uma pessoa evitando frustrações, por exemplo.


3. Um Canvas de UX Writing, com Objetivo do Texto, Usuário, Contexto do Usuário, Tom e Voz e Ação ou Resultado Esperado. Tudo isso pra reunir as principais informações num lugar só e facilitar a criação do conteúdo.


4. Bench sobre O que dizem e Como dizem: além do bench tradicional, separamos os conteúdos.


O O que dizem colocamos as mensagens em ordem: Título de destaque, subtítulo, botão terciário, CTA, etc. Assim, conseguimos entender padrões em cada categoria de linguagem.


E Como Dizem, separamos em classificações gramaticais: 1a, 2a e 3a pessoa, interjeição, imperativos, etc. Aqui, também conseguimos entender padrões.


5. Banco de palavras: basicamente pra reunir as principais palavras que iremos usar.



Um pouco das metodologias e a sua aplicação

Padronização

Nos separamos e começamos a padronizar utilizando as metodologias. Nesse primeiro momento, não pensamos em UI. Somente em conteúdo, sentimentos e usuário.


Nessa etapa, utilizamos o Figma.



As pages no Figma

UX Writing Critique

Após a padronização, levamos o conteúdo para o critique do time de UX Writers para ouvirmos opiniões e se estamos no caminho certo. Afinal, as mensagens padronizadas são para o time. Filtramos os comentários, fizemos correções e começamos a planejar a documentação.



Documentação

Além das pessoas UX Writers, os Product Designers também consumiriam o conteúdo. Para facilitar a integração com Design System, documentamos todos os conteúdos no Figma, criando uma enorme biblioteca de conteúdos padronizados para todas as verticais e squads.


E deu certo?

Sim, a primeira fase do Content Design System deu certo. O objetivo era: mapear e padronizar todas as mensagens macro do PicPay, e fizemos isso. Além das metodologias e aplicações em cada vertical, conseguimos dar autonomia para as pessoas UX Writers padronizarem as mensagens contextuais na sua squad – oferecendo um kit de ferramentas prático para o dia a dia, sem atrapalhar as entregas.


A segunda fase já está mapeada, que vai ser conferir todas as mensagens contextuais do PicPay e criar uma única biblioteca única junto com o Guia de Estilo.