x Arrow 7 Steps to Ranking Your Site on the First Page of Google Ebook
 
Analysing Landing Page Designs for better Conversions
23rd
Dec

Analysing Landing Page Designs to generate better Conversions

Posted by on in Case Studies, Web Design

Businesses rely on new customers and new visitors to engage and grow. You have between 8-10 seconds to keep your visitor on your page, so you need to make them count and make a good first impression. Here’s how.

There are certain ways you can look at increasing your landing page conversions and work out for instance why a person leaves before finishing a sale, what they are most interested in, how they interact with the page and where they lose interest before moving on to the next page on Google Search. We strongly recommend you look at your Google Analytics to obtain this information about your target audience. Each landing page is designed with a purpose. Here are some case studies on how we analyse landing pages for our clients:

Orion Press

orion press landing page

Orion Template:

1. Logo and contact info:

• Placed in the top left hand corner of the screen, the logo is simple and clean. With block font in black, it stands out and is easily read. The leaf on the ‘I’ adds a little flair to the design without overcomplicating it. Whilst the logo is free standing, it is kept within a border made up from the menu outline.

2. Graphics/iconographic

• The space left for images is carefully calculated, there is a clear border of white space surrounding each image. This means that the images aren’t overlaying each other so they are easy to make out, but there are huge unnecessary gaps. This works so well because it makes for a dynamic, visually interesting page, whilst allowing you to see all of the vital details without having to scroll down. The carousel effect means that you can add movement to the page and enhances the amount of content you can display on the landing page without making it appear overcrowded.

3. Headings/Sub-headings

• The menu for the headings is a mixture of simple click icons and drop down menus. It is well placed at the top of the page and they use the same number that we decided was best used on an Accident Management company website. Like most of the website this section is done in black and white, this isn’t a colour scheme I would use but it works to highlight how effective simple, contrasting block colour can be.

• The subheadings here lie in two different sections: in the drop down menus (a) and in the sections under the smaller images (b). The text in section (b) would cover the details of the business in small detail, giving the written description to the image displayed. This section has a bold headline to it, and then proceeds to use a smaller font. This allows for the main, most vital details to be put across in a clear and most importantly concise manner. For an Accident Management company these sections would be used to highlight the main services they provide, such as a brief description of the fleet, details of replacement or repair of vehicles etc. with links to the relevant sections on the website.

4. Social networking accessibility

• There is a vast and varied range of social networking platforms on this landing page template, which gives you a larger scope of target audience. The number of social media sites that are linked to the page also increased the chance of threads leading from one platform to another and bringing in business. The symbols are all black and white and they have an inverted effect when you use the mouse to hover over each icon. The design is simple and effective, though they could be better placed, at the top of the page, where they could be utilised to draw in customers of a younger audience.

Moving Company

moving places landing page

Moving Company Template:

1. Logo and contact info:

• Another simple logo, following the trend of substance over style, nothing too intricate is used because it needs to be easily read and instantly recognisable. Placed at the top of the page where it is the first thing you see; this way you can immediately see what the name of the company is, without it being obtrusive. The border in the

2. Graphics/iconographic:

• The main image is in the centre of the header section at the top of the page. Again, the layout of the page means that whilst the imagine adds something to the page, gives a visual meaning to the company, it does not encroach or take away from on the important content. The image used is simple but straight forward in its approach, it is there to serve a very definite purpose.

• The smaller images used underneath are all relevant to the company’s services. Bright and eye catching, each picture is used to draw attention to an important, written, detail.

3. Headings/Sub-headings:

• The main heading section is displayed in a border near the top of the page, just under the main image. This, as with everything on the page is highly organised, kept in ordered boxes. Where the design itself is very plain, the way colour is used works to highlight the important content and bring it to the attention of the client. There would need to be a greater number of headings for our purpose, however they could be utilised in the same way.

• The sub-headings are boxed in with images above them. The fact that the text is cut short and they use the white space well, means that you get to see enough to understand the purpose of the website without having to scroll through pages and pages of information.

4. Social networking accessibility:

• Facebook, Twitter and Google+ are placed at the bottom of the page and notice is drawn to them because they use an inverted style colour scheme, white on a blue background to draw the eye. The placing would perhaps work better at the top of the page, near the contact information, because for (most especially) younger people this is just as important as a way to get in touch as a number or email.

5. Submissions Form:

• Contact us section – which is what many companies use as a submission form for accidental management. Clear and concise, doesn’t take up a lot of room and contains everything you need without going into two much detail. Specifies location that the service is provided in.  

Flow

flow landing page

Flow Template:

1. Logo and contact info:

• The logo is simple and free standing at the top of the webpage; the colour contrasts the background, so that despite its size it stands out. The font is stylised but legible.

2. Graphics/iconographic:

• There is room for one large image and then several smaller ones that would work as features for the rest of the webpage. The image space is big enough to create and interesting looking page, but not so big that it takes up vital space unnecessarily. The space left for other images are placed well, so that they attract the eye but do not distract you from other, written, information. The use of squares and circles in the design means the layout is simple, but not boring.

3. Headings/Sub-headings:

• There is no block menu, which is something that would need to be inserted, however the subheadings would be perfectly placed beside the circular spaces given for images. What this does is ensure that people read the information under the subheading and don’t just skim past it in order to get to other, more interesting sections, in the process missing vital material.

4. Social networking accessibility:

• The social networking icons are placed at the top of the page, in a position that means you see them immediately.

5. Customer Testimonials:

• The testimonials are well placed, bordered and in a sharper, darker contrasting colour. Despite the fact that they are placed central to the page, in the very middle, the testimonials don’t detract from the rest of the website. You are more likely to read them because they are in your direct line of site, but they are not obtrusive. This is quite an important thing to look at because, despite the fact that they are often ignored, attention from the public and other people/businesses of importance can make or break a business.

Norma

norma landing page

Norma Template:

1. Logo and contact info:

• The simple logo has something of a creative design element inside of it with the ‘o’ in ‘Norma’. Again the logo is at the top left hand side of the page, relatively small, but big enough to be noticed and to one of the first things you notice. The number for the website is placed above the logo, and whilst I would recommend it in a larger font, the fact that the telephone number and the social media links are parallel to each other is something that many other websites fail to do. They are just as likely to act as a way of getting in contact with the company as the number is for the younger audiences.

2. Graphics/iconographic:

• There is one large image, centralised so as to draw the eye, it cleverly incorporates still images into a timed carousel to show a multitude of ‘feature images’. They are also incorporate headlines and links to other, most important section of the website. This use of pictures has the potential customer pausing to see what will come up next and so automatically taking in more information about the company and the service they provide.

• The smaller images and icons beneath it can be used to highlight important information with the same intention of drawing your attention to potentially uninteresting but ultimately important info. Where this layout says recent works, an accident management company could put images of the fleet, or them at work etc. information about the company that would be useful to the client.

• The layout of the page means that you see from the top of the page to the smaller images without having to scroll down. That gives you the company name, several headlining images, contact details, menu, icons and pictures immediately upon opening the page. Every vital piece of information to keep the client on the page is given in one clean window.

3. Headings/Sub-headings:

• The main headings are placed at the top right hand side of the page, with a drop down feature to the sub headings. One of the best features of this website is the fact that the menu follows you down the page so you don’t have to scroll to the top to navigate elsewhere. The menu font could perhaps be a little larger, but they are easily found and used.

• The subheadings are given a larger space, under the headlining image so that you can use catchy phrases to promote the business. The space under them is reserved for small amounts of text that elaborate on the heading above it. There are links from these to the complete pages of text located on other sections of the website.

4. Social networking accessibility:

• It seems to me that it is important, for the younger generation to know that a business is up to date with technology and the internet. Therefore this website has adapted itself to focus highly upon this target audience. Not only are all the links kept on a par with the contact information, there are also Twitter and Flickr feeds that allow the customers to access the social media aspects of the company without leaving the main website.

5. Submissions Form:

• This is a small box at the bottom that allows you to put in ‘name, email and message’. It is called a contact form, however this is often the way accident management companies ask their customers to fill out the claims form. The section isn’t big, but it gives you enough room to serve a purpose without asking for a million unnecessary questions.

6. Customer Testimonials:

• There is a small section dedicated to testimonials on the website, with an automated relay system. The section is small and unobtrusive but strategically placed with other images so that you can’t help but take a look to see what it says. This is, perhaps, the best way to get people to read the testimonials. The contrasting background colour means that it stands out against the rest of the page, drawing your eye to an often neglected aspect of the website.

TAVR – Heart Value

TAVR landing page

TAVR – Heart Value Template:

1. This perfectly frames the visitor’s vision of the screen; Further emphasising the tagline “Is TAVR Right for You?” and the accompanying graphic. Having this section a darker hue than the general colour scheme allows it to be easily recognised as a distinct and independently working part of the landing page, whilst still maintain noticeability, due to the hue.

2. By depicting a clear representation of the subject matter, whilst also complementing the colour scheme, a sense of co-ordination and professionalism is conveyed. Also, visual representations further the visitor understands of the page by contextualising the written content.

3. Having superfluous options on the submission section can look archaic, clunky and disorganised. Condensing these options by prioritising the required fields will greatly diminish the dread induced by viewing several boxes, all requiring user input. User input should be used when necessary, and avoided if possible – as it detracts from the rest of the visuals. Furthermore, the “Submit” button should always tell the user exactly what they are agreeing to. This is of paramount importance, as ambiguity leads to confusion and misinterpretation.

4. The arrows I added to the image made the course of narration more noticeable; however, even without the arrows, a clear progression of information is seen. Presenting information which requires prerequisite knowledge should be avoided at all costs – and if unavoidable, ensure that the required knowledge is presented beforehand. Sub-headings aid this factor’s effectiveness.

5. Succinct and informative text should be allocated the space most visible on-screen upon first glance. Having a very small (max 30 words) introduction to the page’s motives and content will ease the visitors into a state of mind which is ready to receive new information, and eventually, to convert.

6. N/A

7. N/A

8. Briefly detailing the company’s intent will increase perceived legitimacy, and thus build trust for the website. Within this space, a statistic or date can also be included, which will provide a historical context, and further ground the company in the visitor’s reality.

9. N/A

American Bullion

american bullion

American Bullion Template:

1. Including contact information in this space removes the necessity for an entire section dedicated to contact information, and it is also near impossible to overlook as visitor to the page. It also includes the name of the company is a very blatant font colour, and complements the colour scheme on the rest of the page.

2. The very clear depiction of gold nicely ties all the aspects of the landing page together – the colour scheme, the subject matter, and the page architecture all entwine with this graphic; a feeling of coordination and professionalism is witnessed. However, one criticism is that the graphic draws immediate attention away from the more important aspects of the page – which are at either side. Placing the graphic at the side of the screen instead of the centre would improve this issue.

3. This is an example of a submission section done correctly. There are only 4 required fields, and the urgency conveyed in the large “GET FREE GOLD GUIDE” icon convinces the visitor that the process is effortlessly quick. However, one must be weary when constructing a sparsely populated area of the screen, as it may appear barren or dislocated.

4. The numerical headings with buzzwords attached to them are a great addition to the landing page, as the sub-headings allow visitors to quickly understand the reason for the text’s placement, and have an idea of its contents, without having to read and navigate across the page.

5. By including a large three word heading on the leftmost part of the screen (where visitors will first look, due to “left to right” text placement), the visitor will understand the sole purpose of the company. If unable to obtain a sense of grounding, and receive a contextualised summary of the web space’s contents, it is unlikely that visitors will stay on the page long enough to convert.

6. This small section of the screen is monochrome, and yet retains enough white space to frame the logos perfectly. This allows appropriation of recognised logos, without disparaging the landing page’s own intent. Housing familiar names on a landing page will obviously have beneficial effects, presumably due to the trust related to the brands.

7. Testimonials should be no more than 300 characters, and should only be used to intensify a marketing point. Do not devote more excessive screen space to this, as attention is drawn away from the other content. Include testimonials near to the “Submission” section on the landing page, as this will strengthen the mental link between customer satisfaction, and conversion. In this specific example of a landing page, a lightbox could have been implemented to reduce page space usage.

8. As one of the most pivotal sections, the company motives / history should be concisely written, and have no filler text. Bullet pointed pros of the company are welcomed, and as seen in the accompanying diagram, they can make a page more fast paced. A content-rich and succinct page is more assuring than one which requires superfluous terminology to convey any meaning.

9. N/A

Falcon Social

falcon social landing page

Falcon Social Template:

1. The simple framing here once again implements slight decolouration of the landing page’s primary colour, allowing contrast to attract attention to this area of the site, without negatively affecting the time spent viewing the rest of the page. It is simple to interpret and maintains professionalism, with clear consideration for colour design.

2. The audio-visual component here has a clear priority on this page, and thus is a valid method of explaining a company’s motives and features without the necessity for large amounts of text. Alongside reducing screen space, a video can increase the likelihood of traffic resultant of social networking, as YouTube has great accessibility to all popular social networks. Moreover, the video requires a visitor’s attention for several minutes to have full effect, and a video >5 minutes may have trouble gaining viewers. An attention grabbing graphic may have been aptly placed here in the video’s stead, however both are valid options.

3. By drastically reducing the screen space and formality of a classic “Submit” section, a emphasised link has been placed instead. This link for a free trial is placed at the first area a visitor will look – the leftmost part of the screen (*return to first page for citation). The purposefully garish colour accentuates the clear focus of the page – converting visitors, by convincing them to test a free trial of a product.

4. These very strategically placed sub-headings have clear intent, focus and relevant written content. The “Learn more” link enables most features of the company to be alluded to within the landing page, without dedicating a large amount of space to provide adequate detail. Also, the separation of the page into three distinct sectors (Promotion, Content, Supporters) allows a very streamlined format. Moreover, the mid-section of the page demonstrates the managerial talent of the company in question – a managerial company which cannot organise its own web space is demoralising.

5. This heading outlines both the services provided (social media management) and the intended demographic (Teams and Enterprises). This decision works greatly, and leaves no ambiguity as to the page’s intent. Without scrolling down, the entire company’s motives and methods have been explained, all within 8 words. This feat should be our aspiration when developing a landing page, as it affirms the visitor that they are visiting a site which has a clear purpose and method.

6. As a preface, “some of our clients” are formally introduced, and this minute detail adds a vital asset to the page – personality. The narration in the headings & sub-headings is impressive, and comforts visitors with accompanying mild colours, which lull the visitors into a sense of security, susceptible to conversion.

7. The testimonials themselves are not lengthy, however they would benefit from a light box, or at least a mechanic in which the testimonials have a rota for screen time. These text boxes don’t necessarily add any content per se, however they do fulfil the need for grounding in reality – where a website firmly entwines it’s personal history with that of the visitor, allowing trust of a long, and well-established company.

8. This section does lack any historical context, and could benefit from insight into the reason behind the company’s inception. However, the brief summary here does utilise short sentences, which can be inferred by visitors as a demonstration of confidence in the branding – which is supported by phrasing such as “it’s easy and efficient to moderate in teams”, which contains a single adjective. The page effectively creates an aura of logical, happenstance professionalism – making up for its deficiency in charm and actual personality.

9. Featured both on the top and bottom of the landing page, referrals to social networking sites are prominent, but are used merely to frame the screen, whilst still providing utilities – rather than having its own area on the page. This ensures that attention is not drawn away from the main domain, but makes it impossible to not notice the social media aspect of the company. This is a good example of how to place links to social networking; Links should complement the backdrop, but be clearly visible, and not take space away from other more important content (i.e. let social networking, and contact information frame the top and bottom of the page).

Websquare have recently launched a Accident Management site called Hamilton Levi that we have specifically designed to generate landing page conversions and created to get their services across to visitors almost instantaneously. If you want a website specifically designed to generate leads, please feel free to get in contact with us on info@websquare.co.uk.


Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top
Close Open