Content design: The anatomy of a landing page
Content design
To dissect how I approach content design, I’ve broken down a page I rewrote and redesigned in 2022. I’ll outline my process, review the impact content can have on users and summarise the design decisions I made along the way.
The page I’m reviewing is the Confused.com car insurance landing page, the most visited page on the site. As it’s an SEO page, it’s content-heavy and the primary goal is to convince users to compare car insurance quotes.
How I approach content design
Content design is about giving the user information in the right way at the right time.
Context is everything. What has the user done to get here? What’s their goal? Is the change we’re making based on data, or a hunch?
When writing content I like to apply these rules:
Make sure there’s a consistent tone.
Use the same wording end-to-end e.g. from email to web page.
Keep the primary goal in mind. What does the user need/want to do?
All key decisions should be data-led.
Display information in the clearest way, using the correct components.
Tackling hero sections
As it has the largest impact, I’ll almost always spend the most time crafting the content in the hero section. In this example, 60% of users scrolled less than 10% of the page. 70% of active clicks used the main CTA in the hero.
What I did to improve the content:
Mirrored the search terms in the main headline to reassure the user they’ve landed on the correct page.
Included the main selling point in the headline ‘Save up to £X'
Made sure there’s additional reasons to buy with, including social proof, stats to back up our legitimacy, guarantee of a reward and line outlining the time it will take to reassure the user.
Descriptive labelling in the primary CTA
Positive iconography
An example of the search terms, mirrored in the headline.
Scannable headings and button labels
Users don’t read, they scan.
Headings, links and buttons are particularly noticeable in content so it’s important to use this content wisely. We need to make sure there’s a consistent tone running throughout the page, as if we’re having a conversation with the user.
What I did to improve the content:
Used consistent language in headings, in this case they’re all statements (rather than questions).
Paid attention to reading patterns, usually following an F-pattern – which focusses on the start of lines toward the top of the page (left-right languages).
Used descriptive labels for all button and links. I avoided content like ‘read more’ ‘click here’ ‘find out more’ as these are not accessible. Screen readers pick-up links so the link should make sense if you take everything else away.
Example of consistent headings and descriptive button & link content.
Developing the flow of the page
Naturally, SEO pages use a lot of content so we need to look at the order we display each module. It’s essential we look at the overall context of the page and our users and ask, what information is essential for the user to complete their task? And what’s the business goal?
What I did to improve the content:
Prioritised the most important sections for a user. In this case, user’s that scroll past the main CTA may need more information about ‘How to compare insurance’ so this information is available directly after the hero section.
Positioned content around key actions to improve the flow. ‘How to compare’ for example, leads nicely into a CTA as the user has now got the information they need. I also grouped certain sections as they’re directly related.
Improving the flow of the page: ‘How to compare…’ leads nicely into a second CTA
Organising longer content
For longer content, it’s important to provide detailed and helpful information without overwhelming users.
What I did to improve the content:
Split long content into a separate module.
Kept content to less than 350 words. Any longer and it can look cluttered.
Used two columns for content with a clear break.
Utilised bullets points where possible.
Front loaded paragraphs so users can scan and find the information they need without reading for too long.
Swapped words for more appropriate components, in this case a graph and bullets that use iconography.
Examples of longer content: Broken down into manageable sections.