Increased engagement on GAF’s blog
Table of contents
Overview
The challenge
GAF is a roofing manufacturer that uses its SEO-driven blog to attract customers. The blog’s 700,00 yearly visitors rarely explored beyond one article on GAF’s website. My aim for this project was to encourage users to further explore the GAF site by improving content discoverability.
Business impact
Before the blog’s redesign, 1 in 13 users explored beyond a single article; after the redesign, that improved to 1 in 10. This lift matters because a new residential roof averages $15,000, making each engaged homeowner visitor a high-value opportunity. Architect and contractor visitors represent six-figure commercial projects; even a single click on a product link can be highly valuable.
My role
I was the sole UX designer for this project, and I discovered current-state pain points, iterated on design solutions to recommend to stakeholders and handed off direction to the developer team.
Research findings
Low awareness of related products
Testing showed users found the blog’s editorial content to be relevant and useful, but had low awareness of related GAF products on article pages. Users often clicked off before seeing product links located at the bottom of articles.
Product links, pre-update
Low engagement with related content
Analytics revealed low engagement with related-content chips and little use of a search bar hidden behind the mobile hamburger menu. So instead of using these options to further explore the website, most mobile visitors left after only seeing one article.
Mobile chips, pre-update
Opportunity to simplify layouts
Stakeholders looked to GAF’s direct competitors for inspiration on the blog, but I saw an opportunity to shift competitive research to leaders in editorial design like the The New York Times and Vanity Fair. Their layouts were more streamlined than roofing industry websites, making information easier to scan.
Designing for desktop
Promote products without disrupting readers
My initial idea for products visibility on article pages was including inline promotions within the article text. But this would interrupt the reading experience and product cards would also appear in inconsistent locations depending on article length.
So, I pivoted to a two-column layout, allowing desktop users to scroll through articles uninterrupted. Product promotions and a blog search bar would be visible on a left rail.
I pivoted this design again by moving the rail to the right of the page. This move helped keep article text the main focus. Scroll-through on articles was critical to SEO rankings.
Before
After
Designing for mobile
Improving content discoveribility
Related article links would go into a drawer at the bottom of mobile screens. This was a trade-off because it made the screen more busy, but it gave the user awareness of related content.
Although adding the drawer introduced an additional visual element on mobile, removing the related-content chips at the end of articles resulted in a cleaner, more streamlined reading experience. Analytics revealed low engagement with the sticky “Select Category” bar on mobile, so it was replaced with a blog search bar.
Before
After
Streamlining layout
I further recommended streamlining the article listings page by removing unnecessary links on the blog’s homepage and “Browse by topic” pages. This is based on my reviews of the UI on New York Times and Vanity Fair, which showed that emphasizing titles alone keeps attention on the content rather than scattered link options.
After
After
Final experience
Fewer links on the homepage reduced scanning fatigue. Product links and blog search on article pages were more discoverable.
Six months of analytics post production showed the redesign was successful; exploration beyond one article rose from 1 in 13 users to 1 in 10 users. Even a single user’s product click could be valuable because architects and contractors represent six-figure commercial opportunities.
Increased engagement on GAF’s blog
Table of contents
Overview
The challenge
GAF is a roofing manufacturer that uses its SEO-driven blog to attract customers. The blog’s 700,00 yearly visitors rarely explored beyond one article on GAF’s website. My aim for this project was to encourage users to further explore the GAF site by improving content discoverability.
Business impact
Before the blog’s redesign, 1 in 13 users explored beyond a single article; after the redesign, that improved to 1 in 10. This lift matters because a new residential roof averages $15,000, making each engaged homeowner visitor a high-value opportunity. Architect and contractor visitors represent six-figure commercial projects; even a single click on a product link can be highly valuable.
My role
I was the sole UX designer for this project, and I discovered current-state pain points, iterated on design solutions to recommend to stakeholders and handed off direction to the developer team.
Research findings
Low awareness of related products
Testing showed users found the blog’s editorial content to be relevant and useful, but had low awareness of related GAF products on article pages. Users often clicked off before seeing product links located at the bottom of articles.
Product links, pre-update
Low engagement with related content
Analytics revealed low engagement with related-content chips and little use of a search bar hidden behind the mobile hamburger menu. So instead of using these options to further explore the website, most mobile visitors left after only seeing one article.
Mobile chips, pre-update
Opportunity to simplify layouts
Stakeholders looked to GAF’s direct competitors for inspiration on the blog, but I saw an opportunity to shift competitive research to leaders in editorial design like the The New York Times and Vanity Fair. Their layouts were more streamlined than roofing industry websites, making information easier to scan.
Designing for desktop
Promote products without disrupting readers
My initial idea for products visibility on article pages was including inline promotions within the article text. But this would interrupt the reading experience and product cards would also appear in inconsistent locations depending on article length.
So, I pivoted to a two-column layout, allowing desktop users to scroll through articles uninterrupted. Product promotions and a blog search bar would be visible on a left rail.
I pivoted this design again by moving the rail to the right of the page. This move helped keep article text the main focus. Scroll-through on articles was critical to SEO rankings.
Before
After
Designing for mobile
Improving content discoveribility
Related article links would go into a drawer at the bottom of mobile screens. This was a trade-off because it made the screen more busy, but it gave the user awareness of related content.
Although adding the drawer introduced an additional visual element on mobile, removing the related-content chips at the end of articles resulted in a cleaner, more streamlined reading experience. Analytics revealed low engagement with the sticky “Select Category” bar on mobile, so it was replaced with a blog search bar.
Before
After
Streamlining layout
I further recommended streamlining the article listings page by removing unnecessary links on the blog’s homepage and “Browse by topic” pages. This is based on my reviews of the UI on New York Times and Vanity Fair, which showed that emphasizing titles alone keeps attention on the content rather than scattered link options.
Before
After
Final experience
Fewer links on the homepage reduced scanning fatigue. Product links and blog search on article pages were more discoverable.
Six months of analytics post production showed the redesign was successful; exploration beyond one article rose from 1 in 13 users to 1 in 10 users. Even a single user’s product click could be valuable because architects and contractors represent six-figure commercial opportunities.
Table of contents
Increased engagement on GAF’s blog
Overview
The challenge
GAF is a roofing manufacturer that uses its SEO-driven blog to attract customers. The blog’s 700,00 yearly visitors rarely explored beyond one article on GAF’s website. My aim for this project was to encourage users to further explore the GAF site by improving content discoverability.
Business impact
Before the blog’s redesign, 1 in 13 users explored beyond a single article; after the redesign, that improved to 1 in 10. This lift matters because a new residential roof averages $15,000, making each engaged homeowner visitor a high-value opportunity. Architect and contractor visitors represent six-figure commercial projects; even a single click on a product link can be highly valuable.
My role
I was the sole UX designer for this project, and I discovered current-state pain points, iterated on design solutions to recommend to stakeholders and handed off direction to the developer team.
Research findings
Low awareness of related products
Testing showed users found the blog’s editorial content to be relevant and useful, but had low awareness of related GAF products on article pages. Users often clicked off before seeing product links located at the bottom of articles.
Product links, pre-update
Low engagement with related content
Analytics revealed low engagement with related-content chips and little use of a search bar hidden behind the mobile hamburger menu. So instead of using these options to further explore the website, most mobile visitors left after only seeing one article.
Mobile chips, pre-update
Opportunity to simplify layouts
Stakeholders looked to GAF’s direct competitors for inspiration on the blog, but I saw an opportunity to shift competitive research to leaders in editorial design like the The New York Times and Vanity Fair. Their layouts were more streamlined than roofing industry websites, making information easier to scan.
Designing for desktop
Promote products without disrupting readers
My initial idea for products visibility on article pages was including inline promotions within the article text. But this would interrupt the reading experience and product cards would also appear in inconsistent locations depending on article length.
So, I pivoted to a two-column layout, allowing desktop users to scroll through articles uninterrupted. Product promotions and a blog search bar would be visible on a left rail.
I pivoted this design again by moving the rail to the right of the page. This move helped keep article text the main focus. Scroll-through on articles was critical to SEO rankings.
Before
After
Designing for mobile
Tradeoffs to improve content discoverability
Related article links would go into a drawer at the bottom of mobile screens. This was a trade-off because it made the screen more busy, but it gave the user awareness of related content.
Although adding the drawer introduced an additional visual element on mobile, removing the related-content chips at the end of articles resulted in a cleaner, more streamlined reading experience. Analytics revealed low engagement with the sticky “Select Category” bar on mobile, so it was replaced with a blog search bar.
Before
After
Streamlining layout
I further recommended streamlining the article listings page by removing unnecessary links on the blog’s homepage and “Browse by topic” pages. This is based on my reviews of the UI on New York Times and Vanity Fair, which showed that emphasizing titles alone keeps attention on the content rather than scattered link options.
After
After
Final experience
Fewer links on the homepage reduced scanning fatigue. Product links and blog search on article pages were more discoverable.
Six months of analytics post production showed the redesign was successful; exploration beyond one article rose from 1 in 13 users to 1 in 10 users. Even a single user’s product click could be valuable because architects and contractors represent six-figure commercial opportunities.