Introduction

Think of this page as the shop window. It is the primary display point of the brand. It needs to capture attention, and peak interest. It is also the starting point for many users to navigate into specific product journeys, or learn before they purchase. The homepage has to work hard and wear many hats without being an overwhelming barrage of information.

Purpose

• An introduction to the brand, leaving a lasting first impression.
• Promote specific products or services offered.
• Drive traffic to strategically important products and services.
• Provide a starting point for customers to easily find what they need.
• Promote the latest offers.

Example

Content guidance

Principles

• Creative - Warm and friendly
• Tone of voice - Be active, Be natural
• Keywords - Promotional, Navigational, Informative, Memorable

Page composition	Description
	This page will always start with <nsx-header> providing the primary navigation for the website, whilst also being our main brand presence with the logo.
	Positioned directly beneath the global navigation and above any content, <ns-skyline> displays high level messages to the user. The purpose of ns-skyline is to notify the user of important site-wide, or non-page specific events, that may affect their experience of using the website.
	This <ns-landmark> consists of a heading, an introductory paragraph and a CTA. Landmarks are used to introduce the page, informing users of their current location and its primary purpose. They contain the most compelling and important message, emphasising the key points in bold text, accompanied with a relevant ‘hero’ image.
	Next, this <ns-panel> consists of a heading, an introductory paragraph and 3 <ns-card> components (section type), with CTAs for the most common reasons a user would be visiting the website.
	Next is a <ns-lockup> describing some information such as latest news or a promotion combined with an image and a CTA.
	Following on, are 3 more <ns-card> components with text CTAs, combined with a heading. These offer links to other services that may also be of interest, but are of less importance than the 3 cards above.
	Next is an <ns-lockup> with decoration which is used to grab attention to another product or service lower down in the order.
	Following is an <ns-lockup> but without decoration, so of less importance than the lockup above.
	Then there is an <ns-lockup> with decoration…
	…and then, if it’s really necessary another type of <ns-lockup> can be used. Be mindful of putting too many lockups on one page.
	Now towards the end of the page we can ‘mop-up’ any users that have scrolled this far. Ask, ‘What else might they be looking for that’s not already been mentioned above?’ It consists of 3 more <ns-card> components with text CTAs, and with a decoration that is sympathetic to the end of the page caveat or footer section.
	If required, include <ns-caveat> to provide additional information and legal details to the content.
	Finally, there is <nsx-footer> which holds all required links and copyright information for the website. It is also an important SEO tool as it includes links to social channels and our mobile apps.