Content Design System no PicPay.
Como transformar mensagens genéricas em infraestrutura de conteúdo para mais de 10 verticais.
Depois que o processo de UX Writing começou a ganhar mais estrutura, um problema apareceu com mais força: conteúdos genéricos do PicPay, como mensagens de erro, estados vazios, loading e preenchimento de campo, eram escritos de formas diferentes em cada squad. Em um caso específico, encontramos quatro versões para o mesmo erro de conexão dentro do app. A inconsistência não era falta de cuidado. Era consequência da forma como o conteúdo entrava no processo de design.
Squads e designers trabalhando em paralelo no mesmo produto.
Mensagens de erro, estados vazios, loading e preenchimento de campo.
Conteúdo ainda tratado como decisão isolada por squad.
Conteúdos reutilizáveis estavam sendo tratados como decisões isoladas. Cada squad resolvia o mesmo tipo de mensagem de um jeito diferente, sem uma referência comum para orientar escolhas de tom, estrutura, sentimento e ação.
- T.01Mensagens genéricas apareciam em vários pontos do app, mas eram criadas caso a caso, sem critério compartilhado.
- T.02UX Writers gastavam tempo revisando variações do mesmo padrão, semana após semana.
- T.03Designers e PMs não tinham uma referência simples para decidir como escrever estados vazios, erros, loadings, feedbacks e textos de apoio.
- T.04O desafio era transformar padrões recorrentes de conteúdo em uma camada reutilizável dentro do Design System.
Antes de propor qualquer biblioteca, foi preciso entender quais mensagens realmente se repetiam no produto.
- 01Etapa 1 / 4
Mapear squad por squad
Mapeei squad por squad e vertical por vertical para entender quais mensagens genéricas se repetiam no produto inteiro. Só essa etapa já mostrou que o problema era maior do que parecia no início.
- 02Etapa 2 / 4
Identificar padrões recorrentes
Agrupei mensagens por tipo de uso, como erro, loading, estado vazio, feedback, preenchimento de campo e textos de orientação. A ideia era separar o que era específico de uma jornada do que poderia virar padrão reutilizável.
- 03Etapa 3 / 4
Entender sentimento e contexto
Nem toda mensagem genérica comunica a mesma coisa. Um erro de conexão, um estado vazio e um loading têm funções emocionais diferentes dentro da experiência. Por isso, o trabalho não era só padronizar texto, mas calibrar expectativa, tom e ação.
- 04Etapa 4 / 4
Analisar referências externas
Usei a Lei de Jakob para evitar rupturas com padrões conhecidos, a Roda das Emoções de Plutchik para calibrar sentimento, um canvas de UX Writing por mensagem e uma análise de concorrentes baseada em "o que dizem" e "como dizem".
Como transformar conteúdo recorrente em infraestrutura de produto.
Como transformar conteúdo recorrente em infraestrutura de produto.
Começar pelo conteúdo, não pela interface
A padronização começou pelo conteúdo: qual era o sentimento da mensagem, o que a pessoa precisava entender e qual ação deveria vir depois. A interface veio em seguida.
Criar padrões reutilizáveis, não frases soltas
A biblioteca precisava ajudar o time a decidir, não apenas copiar e colar textos. Por isso, cada padrão tinha orientação de uso, contexto, intenção da mensagem e exemplos de aplicação.
Aproximar UX Writing do Design System
A decisão foi aproximar UX Writing das discussões do Design System. O conteúdo precisava deixar de ser uma camada aplicada no fim do fluxo e passar a fazer parte da definição dos componentes. Isso exigiu negociação com o time de DS.
Tratar mensagem genérica como experiência
Mensagens genéricas também impactam confiança, entendimento e continuidade da jornada. Um erro mal escrito, um estado vazio sem orientação ou um loading ambíguo podem parecer pequenos, mas se repetem em escala no produto inteiro.
- 01Padrão01
Mensagens de Erro
PadrãoOrientações para erros genéricos, erros de conexão, falhas de sistema e situações em que a pessoa precisa tentar novamente ou buscar outro caminho. - 02Padrão02
Estados Vazios
PadrãoDiretrizes para explicar ausência de conteúdo, orientar próximos passos e evitar mensagens frias ou sem utilidade. - 03Padrão03
Loading
PadrãoCritérios para mensagens de carregamento, considerando expectativa, tempo percebido e contexto da ação. - 04Padrão04
Preenchimento de Campo
PadrãoOrientações para labels, placeholders, textos de ajuda, validações e mensagens de erro em formulários. - 05Padrão05
Feedbacks de Sistema
PadrãoDiretrizes para confirmações, alertas e mensagens de status, conectando tom, ação esperada e impacto na jornada. - 06Integração06
Conteúdo Passou a Fazer Parte da Infraestrutura do Produto.
IntegraçãoUX Writing aproximado das discussões do Design System.
Conteúdo virou parte da infraestrutura do produto.
- 01
Mais de dez verticais do produto cobertas por um sistema único de linguagem.
- 02
Cinco categorias de conteúdo padronizadas com critérios claros de aplicação.
- 03
Inconsistências reduzidas de quatro versões paralelas do mesmo padrão para um único critério compartilhado.
- 04
Biblioteca de conteúdo integrada ao Design System, consultada diretamente no fluxo de trabalho dos designers.
Como medimos — mapeamento de inconsistências antes da integração e verificação de adoção da biblioteca no Design System pelos times de produto.