Ferramenta de Content First: 3 passos para projetar narrativas em produtos digitais
Um modelo de design com foco em conteúdo para uma comunicação mais eficiente entre marca e público.
A necessidade de Content First não pode estar descolada da discussão de como produto digitais devem se comunicar com seus públicos de forma eficiente e consistente.
E fazer isso vai muito além de ter um guia de tom e voz da marca para times de design e produto. É sobre exercitar na prática a lógica de conteúdo como o condutor de uma experiência fluída e que inspire confiança para o engajamento, a conversão e a transformação na relação usuário — marca.
Por isso, nosso time de Content Design decidiu criar uma ferramenta de Content First que conecte o conhecimento teórico de marca e de boas práticas de Content Design com o desafio diário de ideação dos times de design de produtos.
Agora convido você, designer e content designer, a:
- Entender o que é e por que adotar o design com foco em conteúdo (content first) no seu dia a dia.
- Saber como usá-lo de forma eficiente e útil.
- Conhecer os resultados que você e seu time podem alcançar a partir da mudança na forma como conteúdo é encarado no produto.
Mas o que é Content First, afinal?
O design com foco em conteúdo (content first) é uma metodologia difundida principalmente por Torrey Podmajerski, em Redação estratégica para UX, para projetar a experiência como um diálogo entre um emissor (a marca) e um receptor (o usuário).
“O diálogo está em nossa composição genética. Os seres humanos se revezam na fala e na resposta de maneiras que ultrapassam idiomas, continentes e culturas. Dialogar é algo muito mais antigo do que responder a pixels em interfaces e a sons em alto-falantes; portanto, ainda governa a forma como respondemos a esses estímulos.
[…]
Quando interagem com a experiência, os usuários estão dialogando com ela.” Torrey Podmajerski.
É muito comum que após o levantamento de informações das necessidades dos usuários e priorização de soluções para desenvolvimento, já iniciamos a prototipação com a escolha de componentes de design.
O content first propõe uma inversão nessa lógica: primeiro entendemos qual é a narrativa e a comunicação da jornada que atende essas necessidades dos usuários para depois escolher quantidade de telas, componentes de design e texto final.
Isso porque existem alguns fatores que precisam estar em coerência para a comunicação ser bem-sucedida e a compreensão acontecer, como propõe a teoria da comunicação de Roman Jakobson. E esses fatores estão presentes também em interfaces de produtos digitais.
Provavelmente você já viu esse quadro nas aulas de português dos tempos de escola, mas o que de fato importa para nós aqui é que as interfaces representam um diálogo entre marca e usuário. Esse diálogo contém componentes de:
- Personagens. São os “quem” (marca e usuário).
- Cenário. São o “porquê” e “por onde” (contexto e canal).
- Conteúdo. São o “o que” e “como” (mensagem e código).
Simplificando: marca, contexto e objetivo de comunicação.
É com esse racional que construímos as diretrizes de tom e voz de Nike e Centauro no Grupo SBF e aplicamos no dia a dia por meio do Content First para que sejamos capazes de projetar a comunicação e, a partir dela, escolher a forma correta de entregá-la.
Na prática:
- Entendo o contexto do usuário e o que ele precisa fazer para chegar no seu resultado esperado.
- Mapeio o que nosso sistema precisa comunicar para que o usuário tenha uma jornada sem fricção, se identifique com a nossa marca e tenha confiança para completar todas as tarefas.
- Decido quais componentes de design e conteúdo vão me ajudar a entregar essa comunicação.
Quando todos esses fatores são desenhados e projetados com objetivos claros, a nossa chance de ser compreendido pelo usuário e a comunicação acontecer de forma fluída são maiores.
Nos preocupamos muito com o código (componentes de design, fontes, tipografias, idiomas, etc) e não temos tanta clareza sobre como esse código deve interagir com o contexto e os personagens do diálogo. O Content First propõe que a gente visualize todos os fatores em conjunto para fluxos e narrativas que tenham sentido entre si.
Beleza, Paula, mas como funciona isso na prática da ideação e prototipação?
Vem comigo que vou apresentar a ferramenta e os 3 passos para fazer design com foco em conteúdo. Ela foi construída em um modelo de cocriação com Wilson Iwano, designer da Nike no Grupo SBF, que topou o desafio de criar no Figma uma solução feita para designers e pessoas de produtos digitais. E aqui já fica nosso agradecimento enorme por agregar tanto para a solução!
Acesse agora o modelo no figma para toda a comunidade de design da Ferramenta de Content First para usar na sua organização e seu contexto e personalizar como quiser. Lá, tem todos os componentes da ferramenta e orientações de como usá-los. Aproveite!
Ferramenta de Content First: projetando narrativas de produtos digitais.
Antes de começar, vale lembrar que ferramentas por si só não são o objetivo do fazer design. Elas nos auxiliam quando usadas com propósito e no momento certo, para o fim correto. Por isso, use o Content First para:
- Desenhar o fluxo da solução que foi priorizada.
- Mapear todas as tarefas do usuário que precisam acontecer para uma jornada fluída de experiência — com base nas informações levantadas na sua etapa de pesquisa — bem como possíveis cenários de erro e ruptura.
- Projetar a comunicação da jornada antes de iniciar a prototipação.
- Calibrar com coerência o tom e voz da marca em cada passo do fluxo.
- Documentar seu racional de design e conteúdo e compartilhar em design critiques ou validações com stakeholders.
É uma ferramenta que inicia a etapa de ideação conectando os aprendizados da pesquisa e imersão com a forma final da solução.
Agora sim, vamos à prática! Siga os 3 passos a seguir para fazer design com foco em conteúdo. É ainda melhor se você acompanhar junto com o modelo no figma. Bora?
Ao longo do conteúdo vamos usar um exemplo de compra em um e-commerce por meio de link cuponável (quando usuário é impactado com uma promoção por meio de um link parametrizado).
Passo 1: definir o escopo da narrativa.
Escreva a intenção do usuário (ponto A) e qual o resultado esperado dele (ponto B) no escopo do seu fluxo. Aqui, entendemos o contexto do nosso usuário (externo ou interno), bem como sua jornada para um resultado.
Dica: recomendamos que o resultado seja sempre uma ação, como em um jobs to be done. Use verbos para descrever qual é esse objetivo final e ter clareza do escopo da narrativa que você está trabalhando.
Voltando ao nosso exemplo:
- Intenção (ponto A): comprar um produto usando um cupom de desconto (via link cuponável).
- Resultado esperado (ponto B): finalizar a compra com o desconto do cupom.
Observe que o limite da narrativa é a finalização da compra com o desconto. Não estamos considerando o fluxo de pós-vendas, por exemplo.
Uma boa definição de escopo significa clareza sobre o contexto da comunicação (cenário e o porquê da comunicação).
Passo 2: mapear as tarefas principais da narrativa.
Agora que você já tem o escopo definido, mapeie quais são as tarefas principais em etapas que devem acontecer do ponto A ao B. Aqui, entendemos o contexto de cada tarefa — o que deve acontecer para um fluxo sem fricção — como em uma jornada do usuário.
Resuma a tarefa no título e selecione o momento principal do ciclo de vida do produto que ela corresponde: atrair, converter, recepcionar, engajar, dar suporte ou transformar.
- Tarefa 1: ganhar consciência e entendimento sobre o link cuponado.
- Momento principal: atrair.
Dica: selecionar corretamente o momento do ciclo de vida do produto em cada tarefa principal vai ajudar você a entender o propósito dela.
Passo 3: entender e projetar o conteúdo que você precisa entregar ao usuário.
Hora de entrar nos detalhes da comunicação! Após mapear as tarefas principais, para cada uma delas, responda as perguntas do Content First. A partir das respostas, você terá as informações para decidir a quantidade de telas, conteúdos e componentes de design no seu protótipo.
Aqui, entendemos como deve ser a mensagem e o código — o conteúdo em si. Mas não é a versão final dele, apenas sua definição. E é completamente normal que você tenha que revisitar essas definições quando estiver no protótipo, pois contextos podem mudar e necessidades diferentes podem surgir.
Quais ações o usuário precisa fazer aqui?
Quais tarefas de sucesso ele precisa completar para que a tarefa principal seja concluída?
Retome sempre o contexto da etapa e onde o usuário quer chegar.
Dica: pense em tudo que precisa acontecer para que ele complete a tarefa principal. Considere possíveis bloqueios e limitações do sistema, como cenários de erros.
Como vamos ajudá-lo a fazer isso?
O que precisamos comunicar? o que o sistema precisa dar ao usuário?
Defina como deve ser o conteúdo da mensagem. Não é o conteúdo final em si.
Dica: aqui vamos definir o objetivo principal da comunicação. Os agrupamentos do modelo são os mesmos que definimos no tom e voz das marcas do Grupo SBF e estão conectados com os momentos do ciclo de vida de um produto digital.
Como a nossa marca deve se expressar?
Quais conceitos de voz e tom vão de encontro ao que o usuário precisa nessa tarefa?
Aqui, você está representando a marca (o emissor) da narrativa. No modelo, as opções são generalistas e você deve personalizar de acordo com as diretrizes de tom e voz da sua organização. Recomendamos calibrar segundo a dimensão de tom proposto por Nielsen Norman Group.
Dica: calibre o seu tom e voz com muita intencionalidade. Para cada marca do Grupo SBF, designers podem consultar sua respectiva documentação para entender quando e como usar cada uma delas. Inclusive, você pode conferir aqui como foi o processo de tradução de tom e voz para Nike.
Essas orientações também já estão conectadas nos próprios componentes do figma para unir conceito à prática.
Com esses 3 passos, você já está com tudo certo para desenhar a solução final. Assim, terá mapeado o que precisa acontecer considerando o contexto de comunicação.
Para resumir!
Passo 1: definir o escopo (do ponto A ao B).
Passo 2: mapear as tarefas principais.
Passo 3: entender e projetar o conteúdo que precisa ser entregue ao usuário (ao responder as perguntas do Content First).
É sobre aplicar com coerência o conhecimento de marca tanto em forma quanto em conteúdo priorizando o diálogo eficiente entre produto e consumidor.
Importante ressaltar que a ferramenta foi inspirada pela metodologia proposta por Torrey Podmajerski e adaptada pelo time de Content Design do Grupo SBF considerando o contexto da companhia. Não significa que é a única maneira de fazer Content First e recomendamos que você também adapte ao que fizer mais sentido para a sua organização.
E ah, se quiser trocar ideias sobre diferentes formas de Content First ou tiver dúvidas sobre a nossa ferramenta, chama a gente no Linkedin! Paula Berlim e Luana Gomes.
Impacto do Content First no processo de design
Como resultado do uso de pessoas designers, notamos:
- Melhor desenho de fluxograma e arquitetura de informação.
- Aplicação coerente e intencional de conceitos de tom e voz no conteúdo final, bem como uma melhor assimilação das suas diretrizes.
- Uso como formato de documentação para defender escolhas de conteúdo e design com stakeholders de outras áreas, como produto e engenharia.
- Maior cocriação e colaboração com outras pessoas designers.
- Qualidade dos atendimentos de conteúdo elevada para debates de narrativa e estratégia de conteúdo, não apenas revisão final de texto.
Agora, estamos em uma etapa de aprendizado pela repetição e prática no dia a dia até que todos os times tenham confiança de usar o Content First como recurso acionável e útil na etapa de ideação, mas já é nítida a entrega de valor da ferramenta que eleva a qualidade da discussão de conteúdo, marca e usuários nos produtos.
É este o resultado que esperamos que você também tenha.
Valeu por chegar até aqui! Use e abuse do modelo que disponibilizamos e se quiser trocar mais ideia sobre ou tiver dúvidas, é só chamar. E fique de olho nas redes do Grupo SBF para qualquer atualização da ferramenta. 😉
Agradecimentos especiais:
Wilson Iwano, pelo engajamento e contribuição na cocriação em desenvolver uma ferramenta de designers para designers.
Luiza Prade e Ayrton Gutierrez pela parceria na missão de consolidar o modelo de Content First em nome da companhia para toda a comunidade de design.
Nara Mulati, Lucas Moschione e Thales Souza por experimentarem a ferramenta com intenção e por apresentarem resultados incríveis nos atendimentos de Content Design.
Tamíz Freitas, por ser a primeira usuária do conteúdo e dar feedbacks tão úteis e valiosos antes de compartilhar com a comunidade.
Luana Gomes, por topar ser a melhor parceira no desafio construindo junto e elevando Content Design no Grupo SBF.
Eliseu Zanesco, por todo o apoio como líder para desenvolver algo tão criativo enquanto ContentOps.
Marina Domingues, por todo apoio como líder e sempre ter nos puxado em desenvolver ações eficientes para elevar a qualidade de conteúdo na companhia.
