Written by Charles Javelona, CEO & Co-Founder of UnivJobs | www.univjobs.ca
Brief Story:
Before fully building UnivJobs, we were still in school. First, we needed to validate our assumption that students and recent grads would want a platform to help them with their employment search. We decided that a landing page would be a good start. Over the course of a few days, our team managed to get over 200 student sign-ups. This gave us the confidence to move forward with this project.
As a startup, you have limited resources, so the goal of a homepage is to be self-evident. Prioritize clarity, directness, and brevity. No need to be innovated on your design, unless you have a great reason to do so.
When site visitors come to your site, they want to figure out what you do right away. Give them that info as quickly as you can to help them decide whether to sign up or not.
To start off, let’s identify 3 types of landing pages:
Homepage – general page for all visitors to see.
Persona landing page – a page that has a tailored message to a specific audience.
Product page – detailed description of a particular product/feature.
In this post, we will focus on the homepage and how to maximize your conversion rate. Conversion in the context of landing pages means proceeding to the next step. Most of the time, it means signing up for your service or becoming your client.
Here is the conversion equation I’ve learned:
Conversion rate = Desire – Labor – Confusion
So what we need to do to maximize the conversion rate is increase desire, decrease the labor and eliminate confusion.
The first step is to focus on your messaging.
The messaging first approach maps well with the conversion rate equation. Below are the general steps to take.
- Find the value proposition that outlines the most desirable asset about your product.
- Next, identify the text and media that convey those points clearly and concisely.
- Finally, design your page in a way that it enhances the clarity and facilitate #2.
Say a lot with fewer words.
This is the principle of information density, which aims to avoid giving the visitor a surplus of reading labor.
Here are some tips to write a value proposition with high information density:
* Refine words until there’s no room for improvement – Write a list of variations. Then, find the most enticing and concise variation. Ask others to rank your best ones.
* Delete unnecessary text – Each word on your page must be necessary. Excess of words increases your visitor’s labor and triggers the impulse to skim. Tip: avoid marketing fluffs like “revolutionary”, “incredibly powerful”, “best-ever”, and so on. Visitors are blind to them. It’s better to describe your key differentiators that define your product.
* Pitch using the 80/20 rule – The more visitors are given to read, the less they read in total. So prevent triggering their reflex to skim. Always identify the two or three sub-points that convey the most value.
Landing Page Guide
Follow through this template and only detour away if you’ve released your first version and need to do A/B testing.
Navbar
All your navbar needs is a logo, optional key links on your homepage or links to other pages on your site, and a call to action button such as a login or signup.
Hero
“Hero” in layman’s terms is the section where site visitors normally see first before scrolling down the page. Hero consists of title-text, subtitle-text, and often an image.
This section is very important, it has the highest impact on whether your visitors will sign up or scroll down to know more about your product. Remember about the first impression? This is the first place where you would place your value proposition.
Hero – Image:
To start off, the purpose of any visuals in this section is to support the text and to reinforce the value proposition. Your priority is to get the messaging first before the image, always remember that. Above is an example of our landing page at UnivJobs for employers with real people involved.
You can also use product shots or illustrations, below are examples from Front and Envoy.
What you don’t want is random photos that don’t match with what you offer, this leads to lower conversion rates. Your hero section is the first thing that people will see, don’t waste precious seconds by confusing them.
Another thing to note is that you want to be as literal, concise and clear as possible. Just get to the point and save you and your site visitors time and energy. You don’t have the same luxury as the well established companies who can show a lot of marketing fluff and still get away with it.
Hero – Title:
To reiterate, the hero section has the title and subtitle text. Your title most likely is the first thing your site visitor will read. Therefore, it must be fully descriptive and punchy so that the person reading it will instantly get what you’re doing. If your site visitors get confuse right away, they will likely skim your website, and finally will leave, simply because they didn’t understand what you do.
A perfect example of inefficient title would be a brand slogan that is general and not descriptive enough. For example: “Increase your productivity!” or “Save time and make money!”. Those lines don’t say what you do, and clearly they don’t explain how your product works.
Here are some examples of a descriptive title:
* For a piano home service – We come to your home to teach piano.
* For a mobile website builder – Build a website from your phone within minutes.
* For a quiz application – Study, challenge and share class notes using online flashcards.
There’s no confusion whatsoever what the products above do and those who resonate with the messaging will likely be more patient to read the rest of your site.
Title with Value Proposition
Going back to the original examples I have, the second sentence always points out the core value of your proposition, mainly from the pain points your key audience currently experience without your solution.
* For a piano home service – We come to your home to teach piano. So you don’t have to drive your kids anymore.
* For a mobile website builder -Build a website from your phone within minutes. You can even in do it while you commute.
* For a quiz application – Study, challenge and share class notes using online flashcards. So you don’t have to study alone and miss out.
Remember, keep it punchy and concise. It would help if you keep the sentences 6 – 12 words max.
Hero – Subtitle:
The title explains what you do. Now, the subtitle will explain how. A crucial element that will help you accelerate your customer acquisition. This is where you show your site visitors how your product/service can help them solve their problem. Use your subtitle to differentiate yourself from your competitors or to address pain points and objections. Do this clearly and concisely in a single sentence.
Here are examples we use at UnivJobs for students and employers:
Student side: A marketplace to find part-time, co-op, entry-level jobs and internships.
Employer side: A network of young talent from different post-secondary schools to source, recruit, and hire.
Keep your sentences to less than 12 words as much as you can to help with readability.
Social Proof:
Now that you’ve explain to people what you do and how you do it. Let’s build trust and credibility by adding your existing clients’ logos. Here’s a tip if you don’t work with any big clients yet. You can provide your service or platform access to well known companies for free to get a feedback. If any of notable companies ended up becoming your clients, you can place their logos on your site.
Call To Action:
This is the part where you nudge your site visitors to the next part of their journey towards conversion. It could be getting them to sign up, to create a profile or to book a service. The call to action consists of three things: title, subtitle, and button.
Call To Action – Title:
The title is there to convey what a person will receive after they sign up. It needs to be specific, clear, and concise. For example:
- Get your meals delivered to your door.
- Find a pet sitter nearby.
Avoid the general marketing jargon or things like “Get started now”. Here is a landing page that we had before:
- Title: Get help and save money with UnivJobs.
- Button: Try it now!
Notice that I’m vague in what it means for the site visitor to get help and save money ? The button text also doesn’t help. I just simply told them to ‘Try it now!’ without knowing what they’re trying. Here is the new landing page that we have for employers.
- Title: Get early access to young talent now
- Button: Start hiring
As you can see, it says clearly what the employers will get by signing up. After this adjustment, I’ve been noticing a pattern of employer signups on our platform. On the last week of every month, this section has the most clicks and the highest conversion rate across our site.
Call to Action – Button:
The button text is there to remind your site visitors the value your are giving them once they take an action.
Here is a tip: Start with a verb to remind visitors why they came to your site. Guide them through their conversion journey and let them know their next step (ex. ‘Start’, ‘Signup’, ‘See’, ‘Browse’). Here are some examples we used at UnivJobs:
- Start hiring
- Find jobs
- Recruit students
You should not put clickbait all over your call to actions, this would be absolutely annoying to your site visitors. Instead, you can use a different color with another font weight to make the button stand out.
Features And Objections:
This section is the last piece of this tutorial. The features and objections section helps you close a sale if your site visitors are not convinced yet. Here is where you handle most of the objections and criticism from your site visitors about your value proposition. Features and objections contain multiple sections:
- Value proposition title
- Paragraph to handle objections and facts supporting your value proposition
- Image to reinforce the value proposition
Here’s an example from Stripe:
Features & Objections – Title
Write only 3 – 5 words defining your value proposition. Bluntly describe what it is so that readers can quickly decide whether the value proposition is valuable or not to them or if they should read the feature paragraph. Here are examples of feature headers from Memora Health:
- Cut your outpatient communication overhead
- Modernize outpatient communication
Features & Objections – Paragraphs
Every time your site visitors will read this paragraph, they will decide whether to believe you or not. If they don’t, hook them with something after each sentence to get them to read the full paragraph. Here are some examples:
- But it gets worse…
- You would know believe this…
- Sadly, this always happens…
If the narrative is too complex to break down, but has the potential to convert people, use a link to a separate page where site visitors can get more information about it. In addition, a simple button to reveal more info can help as well.
Features & Objections – Images
A product screenshot with relevant visuals will help you support your value propositions. Even better if it’s GIF or a SVG animation. It’s always better to show than tell.
Get feedback on your page:
Normally, your first version will not be your final version, and you should get the feedback from two types of reviewers:
- People who don’t know your market. Learn from them if your product is enticing and understandable. Do they get what your product does? One way to find out is to ask someone who’s not in your market.
- People in your target market. Understand whether your message is unique and descriptive enough to convince your target audience with high intent to choose you over the competition.
Here are some questions you can ask them:
- Conversion – Are you willing to hand over your credit card and signup right now? If not, what would you need to see to get to that point?
- Interest – On a scale of 1-10, how well the landing page kept your interest?. What would you suggest to rewrite or to redesign?
- Disbelief – Was there anything that triggered you to say ‘Untrue!’?
- Clarity – Which part is unclear? What unanswered questions are you left with?
- Expansion – Did you find something impressive on the page that you would want more details on?
- Brevity – If you had to delete half the page, which imagery and copy would that be?
Charles Javelona | CEO & Co-Founder of UnivJobs | www.univjobs.ca
To reach out for any questions:
charles@univjobs.ca | twitter: @charlesjavelona