Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing for digital PR

586 views

Published on

In this talk I share my findings after 4 years of working on Digital PR. We'll go through different ways of making an attractive campaign that journalists would like to feature on their articles.

I don't use Linkdin a lot but you can find me at @JazBatisti on twitter if you have any questions.

Published in: Marketing
  • Be the first to comment

Designing for digital PR

  1. 1. DESIGNING FOR DIGITAL PR By Jazmin Batisti
  2. 2. Summary of the talk WHAT WE DO WHAT I’VE LEARNT 01. 03. 02. 04. WHAT HAPPENS NEXT? CONCLUSION My design background and my job at Verve. The importance of having wash-up sessions and learning from our mistakes. Things to consider at the time of designing. A summary of my findings.
  3. 3. WHAT WE DO 01.
  4. 4. DIGITAL CAMPAIGNS Big Data We gather data and visualise it to make it easier to digest for the user. 01.
  5. 5. DIGITAL CAMPAIGNS Big Data We gather data and visualise it to make it easier to digest for the user. 01. Image Heavy These campaigns are very visual and focus on images or videos.
  6. 6. DIGITAL CAMPAIGNS Big Data We gather data and visualise it to make it easier to digest for the user. 01. Image Heavy These campaigns are very visual and focus on images or videos. Games Interactive games and puzzles that challenge the user.
  7. 7. DIGITAL CAMPAIGNS Big Data We gather data and visualise it to make it easier to digest for the user. 01. Image Heavy These campaigns are very visual and focus on images or videos. Games Interactive games and puzzles that challenge the user. Editorial Heavy blocks of text accompanied by images or pieces of data.
  8. 8. WHAT I’VE LEARNT 02.
  9. 9. BEFORE WE START Brand Guidelines How do we fit the content with the client’s visual language? 02.
  10. 10. BEFORE WE START Brand Guidelines How do we fit the content with the client’s visual language? 02. Publications Which are our target publications and how do we appeal to them?
  11. 11. BEFORE WE START Brand Guidelines How do we fit the content with the client’s visual language? 02. Publications Which are our target publications and how do we appeal to them? Showing the Content What’s the best way of displaying the information we have?
  12. 12. BEFORE WE START Brand Guidelines How do we fit the content with the client’s visual language? 02. Publications Which are our target publications and how do we appeal to them? Showing the Content What’s the best way of displaying the information we have? Key Elements Do we need to outsource any elements?
  13. 13. Brand Guidelines It’s hard to get a link from a campaign that looks too branded as it might be perceived as advertising.
  14. 14. As you can see, both campaigns use the same colours but we used them in very different ways.
  15. 15. Target Publications For the campaign to be featured, and especially if we want it to be embedded, we need it to look like it’ll fit the publication’s aesthetics.
  16. 16. Showing the Content Different concepts require different approaches to design. Sometimes we want our website to be striking, but in some cases we need to give way to the content so it can be the protagonist.
  17. 17. Key Elements Sometimes our campaigns require assets that might need outsourcing. Like videos, pictures, surveys, etc. ➔ Important! If you source images from the internet, check copyright first.
  18. 18. THINGS TO CONSIDER Embed Function An effective way to avoid nofollow links. 02.
  19. 19. THINGS TO CONSIDER Embed Function An effective way to avoid nofollow links. 02. Additional Assets Extra material can often help us get links.
  20. 20. THINGS TO CONSIDER Embed Function An effective way to avoid nofollow links. 02. Additional Assets Extra material can often help us get links. Responsive Design It’s important that our design adapts to all screens.
  21. 21. THINGS TO CONSIDER Embed Function An effective way to avoid nofollow links. 02. Additional Assets Extra material can often help us get links. Responsive Design It’s important that our design adapts to all screens. Accessibility We need to make sure everyone can use and see our campaigns properly.
  22. 22. Embed Function The possibility to embed a campaign allows the user to interact with our piece without leaving the site they’re currently on.
  23. 23. Works within the Article We can include a follow link inside the code Follow Link Why Embed? This allows the user to interact with our campaign without leaving the site
  24. 24. Things to keep in mind: ➔ White or very light-coloured backgrounds. ➔ Avoid adding a scroll function ➔ Don’t include sharing buttons ➔ Avoid using client’s logo
  25. 25. Additional Assets We use additional assets as a reinforcement for the campaign. They help us explore other angles, make our emails more eye-catching and, as with embeds, persuade the user to stay on the article for longer.
  26. 26. Why they work: ➔ Including images or gifs in our outreach emails helps get the attention of the journalist.
  27. 27. Why they work: ➔ Including images or gifs in our outreach emails helps get the attention of the journalist. ➔ Additional assets (especially gifs or video) encourage the user to stay on the article for longer.
  28. 28. Why they work: ➔ Including images or gifs in our outreach emails helps get the attention of the journalist. ➔ Additional assets (especially gifs or video) encourage the user to stay on the article for longer. ➔ If a campaign is not working very well, we can explore other angles and create additional assets to outreach.
  29. 29. Why they work: ➔ Including images or gifs in our outreach emails helps get the attention of the journalist. ➔ Additional assets (especially gifs or video) encourage the user to stay on the article for longer. ➔ If a campaign is not working very well, we can explore other angles and create additional assets to outreach. ➔ If a campaign worked very well we can use them to keep it evergreen.
  30. 30. Responsive Design Sometimes journalists will read our emails on the go. This means our designs will be seen on desktop, tablet and mobile, so we need to make sure they look good on all devices.
  31. 31. Things to keep in mind: ➔ If your campaign is not a website (for example an infographic) make sure the content looks well on mobile.
  32. 32. Things to keep in mind: ➔ If your campaign is not a website (for example an infographic) make sure the content looks well on mobile. ➔ A good alternative is making one big infographic and then dividing it into parts so it’s easier to see.
  33. 33. Things to keep in mind: ➔ If your campaign is not a website (for example an infographic) make sure the content looks well on mobile. ➔ A good alternative is making one big infographic and then dividing it into parts so it’s easier to see. ➔ On mobile, make sure your font is at least 14px.
  34. 34. Things to keep in mind: ➔ If your campaign is not a website (for example an infographic) make sure the content looks well on mobile. ➔ A good alternative is making one big infographic and then dividing it into parts so it’s easier to see. ➔ On mobile, make sure your font is at least 14px. ➔ It’s ok to sacrifice some graphs in favour of something simple like a table if that will make it easier for people to look at the content.
  35. 35. Accessibility Accessibility in design is a complex topic, but for the purpose of this talk I’m going to focus on the need for making designs easy to read and use for as many people as possible.
  36. 36. Things to keep in mind: ➔ Be mindful of contrast, especially on text. If you’re unsure about the contrast on your design, run it through an accessibility checker like colorable or webAIM.
  37. 37. Things to keep in mind: ➔ Be mindful of contrast, especially on text. If you’re unsure about the contrast on your design, run it through an accessibility checker like colorable or webAIM. ➔ Avoid pure black on pure white and vice versa.
  38. 38. Things to keep in mind: ➔ Be mindful of contrast, especially on text. If you’re unsure about the contrast on your design, run it through an accessibility checker like colorable or webAIM. ➔ Avoid pure black on pure white and vice versa. ➔ Don’t use colour as the only way to communicate something. Don’t rely on sound either.
  39. 39. Things to keep in mind: ➔ Be mindful of contrast, especially on text. If you’re unsure about the contrast on your design, run it through an accessibility checker like colorable or webAIM. ➔ Avoid pure black on pure white and vice versa. ➔ Don’t use colour as the only way to communicate something. Don’t rely on sound either. ➔ If possible, don’t place important information on hover.
  40. 40. Things to keep in mind: ➔ Be mindful of contrast, especially on text. If you’re unsure about the contrast on your design, run it through an accessibility checker like colorable or webAIM. ➔ Avoid pure black on pure white and vice versa. ➔ Don’t use colour as the only way to communicate something. Don’t rely on sound either. ➔ If possible, don’t place important information on hover. ➔ Use alternative text for your images.
  41. 41. WHAT NEXT? 03.
  42. 42. WASH–UP SESSIONS Survey We survey the participants on what worked and what didn’t. 03.
  43. 43. WASH-UP SESSIONS Survey We survey the participants on what worked and what didn’t. 03. Document We create a document with our findings.
  44. 44. WASH-UP SESSIONS Survey We survey the participants on what worked and what didn’t. 03. Document We create a document with our findings. Meeting On special campaigns we run an additional meeting and go through the feedback.
  45. 45. WASH-UP SESSIONS Survey We survey the participants on what worked and what didn’t. 03. Document We create a document with our findings. Meeting On special campaigns we run an additional meeting and go through the feedback. Learnings We share the document in an email so we all learn from it.
  46. 46. Survey Questions: ➔ Do you think you were given enough time to complete this project? ➔ What were the major challenges in your role? ➔ How would you rate the ease of this project from a technical / practical perspective? ➔ What support or resources would have made your job more easily accomplished? ➔ What were the notable successes/failures of our internal work process? What were yours? ➔ How would you rate the overall collaboration with the team?
  47. 47. Document: ➔ Overall results of survey ➔ Trends we identified ➔ Suggestions for improvements
  48. 48. Document: ➔ Overall results of survey ➔ Trends we identified ➔ Suggestions for change Meeting: ➔ Everyone involved in the campaign should be invited: designer, developer, outreach, project manager, etc. ➔ The findings of the survey are discussed and we analyse why a campaign performed the way it did. ➔ We add the results of that discussion to the final document.
  49. 49. CONCLUSION 04.
  50. 50. CONCLUSION Before the Campaign Ask ourselves key questions that will help us down the line. 04.
  51. 51. CONCLUSION Before the Campaign Ask ourselves key questions that will help us down the line. 04. Other Features Will this campaign benefit from an embed function? Any additional assets we’d like to use?
  52. 52. CONCLUSION Before the Campaign Ask ourselves key questions that will help us down the line. 04. Other Features Will this campaign benefit from an embed function? Any additional assets we’d like to use? During the Process Is the campaign showing what we intended? Don’t be afraid of starting over. Test it.
  53. 53. CONCLUSION Before the Campaign Ask ourselves key questions that will help us down the line. 04. Other Features Will this campaign benefit from an embed function? Any additional assets we’d like to use? During the Process Is the campaign showing what we intended? Don’t be afraid of starting over. Test it. Look Back Take a look at what went well and what needs improvement. Ask other members of the team.
  54. 54. THAT’S ALL FOLKS! jazmin@vervesearch.com @JazBatisti Jazmin Batisti
  55. 55. RESOURCES ➔ Wash up survey template by The Article Group https://medium.com/article-group/who-shot-ya-a-better-post -mortem-for-agencies-or-any-business-really-b9a829cd3fcb ➔ Pexels Free Image Bank https://www.pexels.com/ ➔ WebAIM Contrast Checker https://webaim.org/resources/contrastchecker/ ➔ Stark (Contrast Sketch plugin) https://www.getstark.co/ ➔ MOZ on Alt text https://moz.com/learn/seo/alt-text ➔ Check that the colours on your website have good enough contrast on colorable https://colorable.jxnblk.com/
  56. 56. CREDITS ➔ Presentation template by Slidesgo ➔ Pictures by pexels.com ➔ Icons created by these designers from NounProject ◆ Accessibility and Survey icons by Yu Luck ◆ Assets icon by Shashank Singh ◆ Before icon by Carla Porciuncula ◆ Blog icon by lastpark ◆ Display icon by Icons Bazaar ◆ During icon by Shocho ◆ Document icon by Dennis ◆ Embed icon by Shastry ◆ Knowledge and Games icon by Supalerk Iaipawat ◆ Look back icon by Markus ◆ Meeting icon by Artworkbean ◆ Other icon by Myart ◆ Outsource icon by Andrey Vasiliev ◆ Responsive icon by Nikita Kozin ◆ Big Data icon by Eucalyp ◆ Target icon by Danil Polshin ◆ Visual icon by Anastasia Latysheva

×