My role
At the time of this project, we did not yet have product managers on the team. Throughout this work, I was responsible for defining the areas of opportunity and the scope of requirements as well as the UI design. I worked with the VP of Design and Director of Brand and Marketing Design to define our overarching brand goals and source brand illustrations. I also collaborated with the audience growth and data teams to understand current newsletter growth metrics.
The challenge
In the summer of 2021, the audience growth team noticed that our newsletter signups were starting to stagnate. This is a key company metric that we use to track company health.
At the same time, our Brand and Marketing team had just redefined our overarching brand style guide. Our sites were now out-of-date with our brand values and overarching aesthetic.
To address the brand misalignment and stagnating audience growth, I was tasked with analyzing our user funnels and redesigning key site components. I aimed to create a more modern and memorable site so as to align with our new brand aesthetic as well as increase newsletter signups.
Defining the Brand and Product Relationship
To start, I needed to understand the new brand guidelines and how they related to our reader audience. Over the course of a few weeks, I collaborated with the VP of Design and the Director of Brand and Marketing to align on how the new Dive aesthetic related to our reader personas.
Through these discussions, we defined a personality for the brand with functional and expressive adjectives.
- Personality: Navigator – our work should guide the reader through the latest news and trends in their industry
- Functional descriptors: Clear, insightful, reliable
- Expressive descriptor: With confidence
These guiding words would define our new visual aesthetic and shape UI decisions around increasing newsletter signups.
Analyzing the metrics
While defining the brand vision for the publications, I met with the audience growth and data teams to understand the current metrics for newsletter subscriber acquisition.
One finding they shared is that the conversion rate for the bottom article placement and the in-article placement were slowly decreasing. The other publication placements were not declining but were been stagnant.
To understand why those two placements might be declining, we dug into previous product changes to see if we could find any correlation between the metrics and releases. We found that the bottom article spot had started declining after we added press release and article components above the spot. We had also reconfigured our in-article ad logic and the new logic had resulted in the signup being displayed lower down on the page.
Based on these findings, it was noted that not only did these components need a visual overhaul to increase prominence, but also a reassessment of their logical placement.
Elevating our newsletter offering
After understanding the stakeholder needs as well as current user behavior, I worked to define new UI pattern standards for our signup spots.
Improving our end-of-article experience
The bottom of the article is an important signup spot as readers who reach the end of an article are engaged readers. The article page is also where we see the most traffic on our site.
Previously, the signup spot at the bottom of our articles was positioned right above the site footer and was entirely text-based. After coordinating with stakeholders, we were approved to move the placement up to be directly below the editorial content. This would increase visibility of the component to the reader.
One challenge when I began designing was how to make the component not seem as if it is the end of the page. Along with this, we did not want it to fully distract from the placements now below it or have it seem like sponsored or client content.
For the final design, to tease content below the component, we decided on a module that was not full-width and had a white background with a thin border. We also added a branded product image to provide context and showcase the newsletter.
Top navigation
Another area of opportunity was site navigation. Previously, the top navigation was black with the top links being a light grey and then a secondary nav below with topics. While this nav design did a good job of anchoring the page, it was heavy and there was no hierarchy between the different top links.
To bring greater focus to our editorial content I first redesigned the top navigation to be white rather than black. By making it white, it encouraged the reader to “navigate” down the page and created hierarchy between navigation and editorial content. By guiding our reader and introducing a lighter more modern aesthetic, the component was now aligned with our new brand vision.
The light top nav also made it easier to elevate the top signup button. I redesigned the top navigation sign-up link to now be a red button. The new brand guidelines also paired down the amount of red on the site, which resulted in the button standing out even more.
Inline signup logic and design
For the in-article component, we refreshed the design to align with the new component patterns. The heading styles now had a red line, which highlights the section within the article, and the indigo button brings in the brand color.
While these design changes didn’t hurt click-throughs, we realized later in 2022 that the signup was still receiving fewer impressions than in early 2021.
To combat this, we modified the display logic to bring the location up higher on the page. We also moved it up to be higher in the article on mobile using an old ad slot that was not currently in use. These changes increased the visibility of the component by moving it higher on the page and increasing the number of articles it appears on.
Results and next steps
Overall, we were very satisfied with the results of this work. When comparing the number of onsite signups, we saw a 25% increase in Q1 & Q2 of this year compared to Q3 & Q4 of 2021.
We are still working with the Brand and Marketing team to better measure brand awareness with our audience but as a whole, we are currently happy with how the sites look. We have received positive feedback about the reading experience and ease of navigation and even had a Dive site as a finalist for Azbee’s Website of the Year.
For the next steps, a company north star metric is never done. We are continuing to experiment with different ways to improve newsletter audience growth. One project we are excited about is the redesign of our newsletter ads which will go live before the end of 2022.
