UX and web design
Asbestos.com back pages
A new article template that puts more of the most important content above the fold without hurting design or readability.
The problem
- The layout couldn't fit all the content stakeholders wanted higher on the page.
- Videos took up a lot of space and weren't getting much engagement.
- The primary call to action wasn't as prominent as it could be.
- The page felt flat and hard to read.
The solution
- More legible typography.
- Stronger separation between the hero and the rest of the page.
- A smaller video, with trust signals and authorship moved up.
- A sticky side navigation that shows more content without distracting readers.
- Higher contrast on the table of contents for easier navigation.
Before and after
The old layout on the left, the new design on the right.
- Videos had a low click-through rate, so shrinking them made the primary call to action more visible.
- A new dark header and a more visible fact-checked box build trust.
- Related articles moved from the bottom of the page to the sidebar.
- A table of contents bar that's easier to see.
Sidebar
The original template used a single column. A sticky side navigation fits more content above the fold, moves recommended reading higher, and keeps the call to action visible while reading. It also fixed an issue where the call to action overlapped text on some screen sizes.
Profile pages
The old profile layout was cluttered and short on white space. The new template moves key content above the fold and uses collapsible sections to cut visual noise.
Sticky navigation
On the old template, readers had to scroll back to the top to reach the main navigation. The new navigation reappears as you scroll up, and the updated table of contents no longer gets lost white-on-white.
Mobile mockups
The new template on mobile.
New pull quote style
A more distinct pull quote style for highlighting key statements.