Skip to main content



Product pages introduce more granular detail than hub pages. They often display pricing, product terms and promotion details. Primary actions on the page drive customers into the sales journey, and conversion rate should be measured into these journeys to deduce how to optimise page performance.


  • Immediately convey the value of the featured product (or service).
  • Explain the key features of the the product or service, this could be visually or verbally.
  • Make customers believe this is the product or service they need.
  • Convince the customer of the product offering to drive them into the top of the sales funnel.
  • Carry all relevant legal or regulatory information (this could be a link to or caveat etc) required for the product & service offerings on the page.
  • Direct users to more information if they’re not at the sales part of their buying journey.

Principles to follow#

CreativeTone of voiceKeywords
Modern and dynamicBe active, Be naturalPromotional, Informative


Content guidance#

Use images of the product itself, or if that isn't tangible, the items it affects. Show clarity in pricing and create a persuasive call-to-action (CTA). Write informative product descriptions for the uninitiated. Leverage social proof where possible. Provide accurate product recommendations and remain consistent.

There are different types of products, so you will need to assess your individual product's requirements, but you may find the following composition guidelines of use.

Page compositionDescription
Image of headerThis page will always start with nsx-header providing the primary navigation for the website, whilst also being our main brand presence.
Image of landmark-lakesideUse the ns-landmark component (lakeside) with a prominent, compelling, value proposition. Clearly and concisely describe the product and any offer, to confirm to the user the page they have opened. It effectively brings CTAs further up the page and into view, which in theory should increase conversions (the use of a single CTA here could also work in the absence of multiple choices). Optionally, you could include an ns-pill component to highlight the offer.
Image of Product cardsConversions may be increased if the ns-product-card or ns-card (support with image type) CTAs are high up in the order of a product page – situating them in the most visually scanned areas. Use images that conform to ns-image 16:9 aspect ratio, and help communicate the product. It can also make comparisons easier.
Image of benefits bullet point listExplain the main benefits of the product. Perhaps tell a story or link to one. This could be in the form of a list within the ns-content or ns-lockup components.
Image of Trustpilot testimonialsLeverage social proof by including things like TrustPilot reviews or the ns-testimonial component. TrustPilot can be of more value to the user as the content is honest and not curated by our business. However, in some cases, using the ns-testimonial component may be more appropriate and utilises the company's brand aesthetic in the section.
Image of lockupHighlight related products, services or links to guides etc. using ns-lockup component, but keep this lower down the page than the main product information.
Image of accordionUse the ns-accordion component to display any FAQs. If a user has scrolled this far they are likely to have unanswered questions. You may also want to consider including live chat support like 'Cosmo' (British Gas).
Image of caveatFollowing that we should display any caveats or legal information using the ns-caveat component.
Image of FooterFinally, 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.


  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.