{"id":95888,"date":"2023-05-18T19:59:22","date_gmt":"2023-05-18T19:59:22","guid":{"rendered":"https:\/\/rockcontent.com\/?p=95888"},"modified":"2025-09-17T02:10:02","modified_gmt":"2025-09-17T05:10:02","slug":"how-we-design-the-beat-interactive-newsletter","status":"publish","type":"post","link":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/","title":{"rendered":"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter"},"content":{"rendered":"\n<p>As you probably know, here at <strong>Rock Content<\/strong> we aim to bring only what is relevant to marketers and brand owners.<\/p>\n<p>And, like many brands, <a href=\"https:\/\/interactive.rockcontent.com\/thebeat#64\" target=\"_blank\" rel=\"noreferrer noopener\">we have a weekly newsletter<\/a> to deliver to our readers, straight to the point, everything that happened during the week and how each topic impacts their strategies \u2014 we rely on the point of view of our experts in each subject for this.<\/p>\n<p>What sets The Beat apart from any other marketing newsletter, however, is that it is a <a href=\"https:\/\/pingback.com\/en\/resources\/interactive-newsletter\/\" target=\"_blank\" rel=\"noreferrer noopener\">completely interactive newsletter<\/a>, built on a platform made for this.<\/p>\n<p>I&#8217;m a designer here at Rock Content, and I&#8217;m responsible for building The Beat&#8217;s interactive editions every week (yes, designer. Not a programmer, not an IT professional. I swear I only know a little bit of HTML and CSS).<\/p>\n<p>As I know that the interactive newsletter concept is not so popular and that perhaps many marketers wonder if it is possible to bring this to their own brands, today I&#8217;m going to tell you a little bit about the backstage of The Beat&#8217;s production: how the idea came up, which tool we use, what the weekly production process looks like and, extra, why we updated the project in January 2025.<\/p>\n<p>Shall we?<\/p>\n<h2 class=\"wp-block-heading\">The first sketches of our newsletter<\/h2>\n<p>The first issue of The Beat was released in January of 2022, but a lot happened before that first one aired.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-opt-id=1493585470  data-opt-src=\"http:\/\/rockcontent.com\/wp-content\/uploads\/2023\/05\/image-10.gif\"      decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"optimole-lazy-only  wp-image-95913\" width=\"320\" height=\"180\"\/><\/figure>\n<\/div>\n<p>The project that inspired the creation of The Beat was <a href=\"https:\/\/www.nytimes.com\/interactive\/2023\/05\/12\/briefing\/the-weekender.html#card1\" target=\"_blank\" rel=\"noreferrer noopener\"><em>The Weekender<\/em>, from <\/a><em><a href=\"https:\/\/www.nytimes.com\/interactive\/2023\/05\/12\/briefing\/the-weekender.html#card1\" target=\"_blank\" rel=\"noreferrer noopener\">The New York Times<\/a>.<\/em> It\u2019s a project that brings together eleven articles selected by NYT editors with news to enjoy over the weekend.<\/p>\n<p>When developing our newsletter project, our objectives were clear:<\/p>\n<ul class=\"wp-block-list\">\n<li>reach a new audience;<\/li>\n<li>diversify our content production;<\/li>\n<li>produce rich and strategic content;<\/li>\n<li>use Ion in a new format;<\/li>\n<li>produce weekly releases.<\/li>\n<\/ul>\n<p>Oh! <strong>Ion <\/strong>is Rock Content&#8217;s platform for creating content and interactive pages, and the tool we use to build The Beat on a weekly basis. I&#8217;ll talk more about that soon. For now, we continue with the initial planning of the newsletter.<\/p>\n<h2 class=\"wp-block-heading\">Time for the Briefing or the Panic Attack?<\/h2>\n<p>Once we defined the objectives and designed the project, it was time to start structuring the &#8216;face&#8217; of our newsletter. To accomplish that, the content team and I held a briefing meeting to align our expectations for the project.<\/p>\n<p><em>This right here is usually the moment when people have amazing and really crazy ideas, and I have to say <\/em><strong><em>no<\/em><\/strong><em>!&nbsp;<\/em><\/p>\n<p>At our briefing meeting, we decided what The Beat project should have:<\/p>\n<ul class=\"wp-block-list\">\n<li>Fixed menu on the side;<\/li>\n<li>Form for subscribing to the newsletter;<\/li>\n<li>A space for the editor&#8217;s note;<\/li>\n<li>Sections with a different layout: Jam Session, Interviews, Quote of the Week;<\/li>\n<li>Interactivity:\n<ul>\n<li>Quizzes;\u00a0<\/li>\n<li>Reactions;<\/li>\n<li>Animated Graphics;<\/li>\n<li>WOW moment in the last section;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>As a designer, at this point, my main concern was to develop a layout that could be easily updated and that catered to all the items the content team brought.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=65999717  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:auto\/h:auto\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-2.gif\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"optimole-lazy-only  wp-image-95901\"\/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">Let&#8217;s work! Building the layout<\/h2>\n<p>Initially, we thought of using one of the <a href=\"https:\/\/rockcontent.com\/products\/ion\/quick-starts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ion templates<\/a>. But as this project is very personalized, I realized that the best option was for it to have its own layout.<\/p>\n<h3 class=\"wp-block-heading\">My process<\/h3>\n<p>For me, it&#8217;s much easier to create and visualize the layout when I draw it in my notebook. Let&#8217;s say I make low-fidelity mockups.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-opt-id=290398215  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:693\/h:1024\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/rascunho-693x1024.jpeg\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20693%201024%22%20width%3D%22693%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22693%22%20height%3D%221024%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95983\" width=\"347\" height=\"512\"\/><\/figure>\n<\/div>\n<p>As you can see, it&#8217;s not very elaborate. It&#8217;s actually a simple design, but it helps me visualize how to arrange the different elements on the page.<\/p>\n<p>Remember the list of things we decided The Beat should have? The result looked like this:<\/p>\n<h4 class=\"wp-block-heading\">Fixed menu on the side<\/h4>\n<p>The fixed menu on the side was definitely one of the features that took the most work.<\/p>\n<p>Ion has several features that make it easy to pin an element to the screen. So, I fragmented the layout to adapt to what we needed for The Beat, so I was able to use the tools that Ion itself offers.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-opt-id=27553443  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:1024\/h:497\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-30-1024x497.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%20497%22%20width%3D%221024%22%20height%3D%22497%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%22497%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95902\"\/><figcaption><em>In Ion, we work with a grid of 12 columns. The solution found to have the side menu was to use 3 columns for the menu, and, in the other 9 columns, build the content.<\/em><\/figcaption><\/figure>\n<\/div>\n<h4 class=\"wp-block-heading\">Form<\/h4>\n<p>There&#8217;s not much mystery here, most of our creatives in Ion have a form. We just made sure to have a message confirming that the subscription had been sent and to create a segmentation in our CRM for subscribers.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1135449900  data-opt-src=\"http:\/\/rockcontent.com\/wp-content\/uploads\/2023\/05\/image-8.gif\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"optimole-lazy-only  wp-image-95911\"\/><\/figure>\n<\/div>\n<h4 class=\"wp-block-heading\">Space for the editor&#8217;s note<\/h4>\n<p>Right after the issue&#8217;s introduction, we have a \u201ccover letter\u201d, a few words from Rock Content&#8217;s co-founder, Vitor Pe\u00e7anha.<\/p>\n<p>This is an extremely simple layout. But to make it a little more attractive and dynamic from one issue to another, we customized Pe\u00e7anha\u2019s photo, with different background colors, and alternated between them each issue.<\/p>\n<figure class=\"wp-block-image size-full\"><img data-opt-id=2004191735  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:auto\/h:auto\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/imagens-pecanha.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-96001\"\/><\/figure>\n<h4 class=\"wp-block-heading\">Sections with a different layout<\/h4>\n<p>When The Beat started, we already knew that when scrolling the page, the reader would realize that the content was varied. And so we decided that the best option was to change the layout.<\/p>\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1811088909  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:auto\/h:auto\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-33.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95916\"\/><\/figure>\n<\/div>\n<h4 class=\"wp-block-heading\">Interactivity<\/h4>\n<p>We are talking about Ion, <strong>Rock Content<\/strong>\u2019s tool that facilitates the design of interactive experiences. So, of course, we could not fail to add some moments of interactivity to the newsletter.<\/p>\n<h4 class=\"wp-block-heading\">Reveal<\/h4>\n<figure class=\"wp-block-image size-full\"><img data-opt-id=43552283  data-opt-src=\"http:\/\/rockcontent.com\/wp-content\/uploads\/2023\/05\/Gif_podcast-min.gif\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"optimole-lazy-only  wp-image-96009\"\/><\/figure>\n<h4 class=\"wp-block-heading\">Quiz<\/h4>\n<figure class=\"wp-block-image size-full\"><img data-opt-id=976130808  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:auto\/h:auto\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/quiz.gif\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"optimole-lazy-only  wp-image-96002\"\/><\/figure>\n<p class=\"has-text-align-center\">\n<p><!-- NEW PARAGRAPH 1 (inserted here, after a big chunk of layout\/feature detail but before \"Animations\") --><\/p>\n<p>What\u2019s really interesting is that, after pushing through the technical hurdles, folks started sending in replies like, \u201cI didn\u2019t even know emails could do this.\u201d It might sound clich\u00e9, but breaking out of the old grid-format inbox genuinely surprised a lot of our subscribers. Sometimes, the simple addition of a small animation or a clickable choice drastically upped engagement\u2014way more than a headline tweak ever could. And yes, every team that came in with a new idea for interactivity underestimated the time it takes to make those little touches feel intuitive.<\/p>\n<p><!-- END NEW PARAGRAPH 1 --><\/p>\n<h4 class=\"wp-block-heading\">Animations<\/h4>\n<figure class=\"wp-block-image size-full\"><img data-opt-id=1491023479  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:auto\/h:auto\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/animacao.gif\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"optimole-lazy-only  wp-image-96003\"\/><\/figure>\n<figure class=\"wp-block-image size-full\"><img data-opt-id=235980014  data-opt-src=\"http:\/\/rockcontent.com\/wp-content\/uploads\/2023\/05\/grafico_animado-min.gif\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"optimole-lazy-only  wp-image-96004\"\/><\/figure>\n<h3 class=\"wp-block-heading\">But not everything is perfect<\/h3>\n<p>Looking at everything we achieved, it seems that all went well in the first version of The Beat. After all, everything we had idealized went live\u2026&nbsp;<\/p>\n<p>Well, we managed to put 80% of it live, yes\u2026. but, there&#8217;s the other 20%.<\/p>\n<h4 class=\"wp-block-heading\">Reactions<\/h4>\n<p>In the &#8216;quote of the week&#8217; section, the content team wanted to enable readers to react to the content, similar to how we do on platforms like Facebook or LinkedIn. After the reader clicks on their reaction, a graph will appear displaying the emotions with which they had the most interactions.<\/p>\n<p><!-- NEW PARAGRAPH 2 (inserted here, right at the moment of transition from \"not everything perfect\" to concrete reaction example) --><\/p>\n<p>We\u2019d sketch out features on sticky notes (digital and actual paper) and sometimes hit a wall\u2014either because of a weird browser quirk or, frankly, because our ambitions outpaced what the platform could do right out of the box. There\u2019s always a temptation to just toss another widget or clever effect into the mix, but we had to remind ourselves that clarity wins over flash most of the time. Some of the trickiest bugs didn\u2019t show up in Chrome but suddenly popped when someone opened the newsletter in Outlook\u2014or, worse, on their ancient iPhone. If you\u2019ve ever tested an interactive email, you know that pain. Still, it\u2019s weirdly satisfying to see people interacting even with the experiments that almost broke everything.<\/p>\n<p><!-- END NEW PARAGRAPH 2 --><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=80540561  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:auto\/h:auto\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-20.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95890\"\/><\/figure>\n<\/div>\n<p>Unfortunately, in the first version of The Beat, we weren&#8217;t able to include this. But, to continue having some element of interaction, we put emotions for people to click on, and in place of the graph with the number of clicks, we put a fun gif.<\/p>\n<h4 class=\"wp-block-heading\">WOW moment in the last section<\/h4>\n<p>We needed something to mark that the reader had reached the end of the newsletter. The solution, once again, came through GIFs. We created, following Rock Content&#8217;s visual identity, four GIFs that are interspersed with each edition in the last fold of the newsletter.<\/p>\n<figure class=\"wp-block-image size-full\"><img data-opt-id=1543765405  data-opt-src=\"http:\/\/rockcontent.com\/wp-content\/uploads\/2023\/05\/gifs_thebeat.gif\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"optimole-lazy-only  wp-image-96005\"\/><\/figure>\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<h2 class=\"wp-block-heading\">The results? A successful interactive newsletter<\/h2>\n<p>On December 22nd we released a test version, promoting The Beat only to Rock Content&#8217;s internal team. We collected a series of feedback, made the necessary adjustments, and then the first version of The Beat in English for the general public was released in January 2022. The Portuguese edition was released a while later, in March.<\/p>\n<p>Throughout the year, we brought gradual improvements, observing the behavior of readers within the page through tags in Ion (another point for interactivity: we were able to know exactly how people are behaving on the page, collect data through quizzes and, thus, to be more assertive with each edition). I even passed the baton of building the weekly page to another designer on the team, once the template was ready and easy to replicate.<\/p>\n<p>At this time, The Beat was consolidated. We went from less than 15,000 subscribers adding native audiences in Portuguese, English, and Spanish, to a community of more than 90,000 professionals around the world who follow what matters most in marketing, content, and sales on a weekly basis with us.<\/p>\n<p>In December 2022, I took over The Beat again. And after a year, it was time to officially revisit our newsletter&#8217;s base template and understand what still made sense, and what could be improved.<\/p>\n<h2 class=\"wp-block-heading\">The Beat 2.0<\/h2>\n<p>We published the new version of The Beat in January 2025. Our main goals with this optimization were to improve the mobile experience and have a template that was easier to update on a weekly basis.<\/p>\n<p>What has changed:<\/p>\n<p><strong>The mobile version has been 100% redesigned<\/strong>. Font, spacing, menu\u2026<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=834298176  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:auto\/h:auto\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-29.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95899\"\/><\/figure>\n<\/div>\n<p>The desktop layout has also been optimized. Now, in most articles, we work with two columns.<\/p>\n<p>In the side menu, we added a \u201csign up\u201d button.<\/p>\n<p>We kept the different sections of the newsletter with articles, interviews, podcasts, and quotes of the week.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-opt-id=879828241  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:1024\/h:695\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-27-1024x695.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%20695%22%20width%3D%221024%22%20height%3D%22695%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%22695%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95897\"\/><\/figure>\n<\/div>\n<p>We&#8217;ve also standardized and optimized the use of tags in The Beat. In the previous version, some edits were tagged and some weren&#8217;t.<\/p>\n<p>Tags are how we can map and understand interactions within a creative in Ion. With an example it is easier to understand, right?<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-opt-id=142355412  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:1024\/h:553\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-26-1024x553.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%20553%22%20width%3D%221024%22%20height%3D%22553%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%22553%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95896\"\/><\/figure>\n<\/div>\n<p>1 &#8211; Most read article<\/p>\n<p>2 &#8211; In the menu, which article was the most clicked<\/p>\n<p>3 &#8211; In the quiz, we want to know which alternative had more clicks<\/p>\n<p>We changed the \u201cQuote of the Week\u201d section, as it was too complicated to find high-quality photos by the authors.<\/p>\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img data-opt-id=1672400347  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:auto\/h:auto\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/Quote.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%%20100%%22%20width%3D%22100%%22%20height%3D%22100%%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%%22%20height%3D%22100%%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95990\"\/><\/figure>\n<\/div>\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img data-opt-id=426139477  data-opt-src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/w:1024\/h:649\/q:mauto\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/novo-quote-1024x649.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%20649%22%20width%3D%221024%22%20height%3D%22649%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%22649%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"\" class=\"wp-image-95991\"\/><\/figure>\n<\/div>\n<\/div>\n<p class=\"has-text-align-center\">Before\/After<\/p>\n<p>And we continue in continuous improvement.<\/p>\n<p>Growing our community of professionals who rely on our newsletter to keep up with the market. Bringing an out-of-the-curve experience, unlike any other marketing newsletter, in a much simpler way than the end result makes it seem \u2014 which would never have been possible without Ion.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As you probably know, here at Rock Content we aim to bring only what is relevant to marketers and brand owners. And, like many brands, we have a weekly newsletter to deliver to our readers, straight to the point, everything that happened during the week and how each topic impacts their strategies \u2014 we rely [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":95889,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,122],"tags":[],"class_list":["post-95888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-everybody-writes","category-news"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter<\/title>\n<meta name=\"description\" content=\"In this article we explain how we created The Beat, Rock Content\u2019s interactive newsletter, the tools we used and why we updated the project in 2022.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter\" \/>\n<meta property=\"og:description\" content=\"In this article we explain how we created The Beat, Rock Content\u2019s interactive newsletter, the tools we used and why we updated the project in 2022.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-18T19:59:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-17T05:10:02+00:00\" \/>\n<meta name=\"author\" content=\"Carolina\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter\" \/>\n<meta name=\"twitter:description\" content=\"In this article we explain how we created The Beat, Rock Content\u2019s interactive newsletter, the tools we used and why we updated the project in 2022.\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carolina\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/\",\"url\":\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/\",\"name\":\"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-05-18T19:59:22+00:00\",\"dateModified\":\"2025-09-17T05:10:02+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33\"},\"description\":\"In this article we explain how we created The Beat, Rock Content\u2019s interactive newsletter, the tools we used and why we updated the project in 2022.\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/en\/resources\/\",\"name\":\"Pingback\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/en\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33\",\"name\":\"Carolina\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Carolina\"},\"sameAs\":[\"https:\/\/pingback.com\"],\"url\":\"https:\/\/pingback.com\/en\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter","description":"In this article we explain how we created The Beat, Rock Content\u2019s interactive newsletter, the tools we used and why we updated the project in 2022.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/","og_locale":"pt_BR","og_type":"article","og_title":"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter","og_description":"In this article we explain how we created The Beat, Rock Content\u2019s interactive newsletter, the tools we used and why we updated the project in 2022.","og_url":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/","og_site_name":"Pingback","article_published_time":"2023-05-18T19:59:22+00:00","article_modified_time":"2025-09-17T05:10:02+00:00","author":"Carolina","twitter_card":"summary_large_image","twitter_title":"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter","twitter_description":"In this article we explain how we created The Beat, Rock Content\u2019s interactive newsletter, the tools we used and why we updated the project in 2022.","twitter_misc":{"Escrito por":"Carolina","Est. tempo de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/","url":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/","name":"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter","isPartOf":{"@id":"https:\/\/pingback.com\/en\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-05-18T19:59:22+00:00","dateModified":"2025-09-17T05:10:02+00:00","author":{"@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33"},"description":"In this article we explain how we created The Beat, Rock Content\u2019s interactive newsletter, the tools we used and why we updated the project in 2022.","breadcrumb":{"@id":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/en\/resources\/how-we-design-the-beat-interactive-newsletter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creative Designer\u2019s POV: How We Designed (And Redesigned) Our Interactive Newsletter"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/en\/resources\/#website","url":"https:\/\/pingback.com\/en\/resources\/","name":"Pingback","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/en\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/5931a4533700c840b9f38199581abc33","name":"Carolina","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/en\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Carolina"},"sameAs":["https:\/\/pingback.com"],"url":"https:\/\/pingback.com\/en\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/95888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/comments?post=95888"}],"version-history":[{"count":3,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/95888\/revisions"}],"predecessor-version":[{"id":129173,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/posts\/95888\/revisions\/129173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/media?parent=95888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/categories?post=95888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/en\/resources\/wp-json\/wp\/v2\/tags?post=95888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}