My personal notes for building more effective landing pages.
Throughout this year, we build around 30 new landing pages. I was responsible for selecting the page builder and was involved in all aspects of the building and optimization process. Here and there I documented our learnings and hope that this will prevent me and the team from making some of the mistakes again.
Terminology:
Within the team: Clearly differentiate between a website & landing page.
When I started, everybody used the term “landing page” for pretty much any single web page for any product that we had floating around. Not having a clear definition meant that everybody was throwing in his “website design wisdom” for every new section/element that was being created. This slowed down the design process and made it harder to optimise in regards to the conversion goal.
Here is how we tried to distinguish the two types:
Landing page:
- is used for a specific audience (often to trigger their interest or convert them on an offer/ad)
- only has one conversion goal (to be able to really optimise conversion rates in A/B tests)
- is often used in a specific (paid) marketing campaign
Homepage/Website:
- should be able to educate multiple types of customers, stakeholders etc.
- is a rather informative medium (learn about the product, the story of the company etc.)
- has multiple conversion goals (educate, demo, contact, trial signup)
- contains a lot of sub pages and links + a navigation bar
Content Creation
The Chicken and Egg Problem — What comes first: Content or Design?
We tried multiple approaches. If we startet with “content first” in a plain document, the created sentences were often too long and didn’t contain the right format for the marketing speak of a landing page. If we started out with a particular design that we wanted to match, we erased content just to make the design work, only to later find out that people didn’t get the message with the selected text bits.
My approach:
Basic Design (Content Blocks) — Content — Design — Iteration
- Pick a good example that you somewhat want to copy/use for inspiration
- Derive the content blocks and relative lengths of texts
- Write out the texts and see where you see where you stand in terms of content quality & length.
- Create designs for this content — Where necessary (to make the designs work) iterate with content.
When writing up content, start with the use cases first! (especially for new products)
Multiple times, we had the problem that we came up with generic phrases and slogans for different sections, just to see that they didn’t catch the essence of the product.
Takeaway: When creating content, start with a very detailed description of how people should use the product. Even if you are not using that detailed description on the page, it is a great foundation for all the other sections. As an example, sections like the classic 3 to 6 bullet point benefit section will follow naturally.
Make the sections real/personal to quickly build trust and authenticity.
We were pretty good at building generic/stylish landing pages, but in the beginning visitors were not converting as we hoped. We trialled a few sections after the header and the versions with testimonials and real person use cases converted best.
Takeaway: When people are not spending huge amounts of time on your site, you need to convince them quickly of what your product actually does and that it is a legitimate product used by real people. Therefore 2–3 testimonials, a user story or even a user video are essential to have.
Design & Optimization
The header is key and should be the main point of focus in the design process.
Within the team, we kept discussing section #6 and #7, whereas most of our visitors did not move beyond the header. Note: This is especially true when you are starting with a new marketing channel and the quality of the traffic that is coming onto the page is not optimised yet).
Pick complementary colors for your landing page and only the buttons should have a signal color.
It sounds pretty obvious, but this is easier said than done. You browse a lot of landing pages from other great companies + read a lot of how to articles and everybody tells you: The buttons should have a an urging “Call to Action” color in order to grab attention. And then in practice you and your manager still decide to go for a the most “stylish” looking combination of colors and dismiss the principle in the building process…
Takeaway: When starting out, just follow the principle.
For Version 2 Adjustments: Let your users decide! Run an experiment and test for one week how people are behaving on your site. Tools like Hotjar or features within landing page builders are great to see where people are clicking. (See tools section)
Dedicate a considerable amount of time on the mobile version.
We got a lot of traffic via paid channels, while spending most of our time on desktop optimisation.
Takeaway: For every new page I will try to remember the amount of mobile traffic and thus the importance of the mobile version. Plus check with the builder if it has mobile friendly features such as AMP (Accelerated Mobile Pages Project).
Design Principles for mobile:
- Short, Fast loading, Responsive
- Keep the conversion goals simple for mobile traffic (Not many input fields etc.)
